Load a page without refreshing?

[acctman]

Is there a ajax/js that will load pages within a div without a refresh/page url changing?

So if i was to add a 3 page / step submission form, when the user press Next then new pages will just load in the DIV. Is this possible?

[Medyman]

Sure is...

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm

[acctman]

Sure is...

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm

are their any other versions that you know of? this one seems to be the only one that works http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

just wondering if there has been an improved version with less coding since that one was created in 2005.

[TheJoshMan]

just wondering if there has been an improved version with less coding since that one was created in 2005.


Perfect example of how THIS (http://www.dynamicdrive.com/forums/showpost.php?p=155550&postcount=7) thread ties in and is certainly well worth the effort...

[Medyman]

just wondering if there has been an improved version with less coding since that one was created in 2005.

Hmm, not on DD that I know of. You could google around for some though. I don't know of any off the top of my head as I don't really use any of these scripts.

I'm a big jQuery (http://jquery.com/) user, so I do most of my AJAX through that (http://docs.jquery.com/Ajax). Incidentally, that might be what you're looking for. The code to load an external HTML page into a certain div is as simple as:


$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});


Combined with the jQuery Form plugin (http://malsup.com/jquery/form/), you should be all set.

Let me know if you need any help in setting it up.

[acctman]

Hmm, not on DD that I know of. You could google around for some though. I don't know of any off the top of my head as I don't really use any of these scripts.

I'm a big jQuery (http://jquery.com/) user, so I do most of my AJAX through that (http://docs.jquery.com/Ajax). Incidentally, that might be what you're looking for. The code to load an external HTML page into a certain div is as simple as:


$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});


Combined with the jQuery Form plugin (http://malsup.com/jquery/form/), you should be all set.

Let me know if you need any help in setting it up.


an example would be great. what I'm doing is I have 3 step image submission process and I want to move through all 3 pages without refresh. the last 3rd page will be the submit page which will refresh to a different page.

[Nile]

Here's an example with a few modifications:
http://niler.net/examples/loadnewpage/file.html

[Medyman]

an example would be great. what I'm doing is I have 3 step image submission process and I want to move through all 3 pages without refresh. the last 3rd page will be the submit page which will refresh to a different page.

Nile posted a basic example. You should be able to extrapolate from that.

The bigger question is if you really are doing what you say you are. How are you submitting the different sections of the form? Saving them to a cookie? The fact that you say that the last page will be the "submit" page leads me to believe that you're looking for more of a virtual pagination script than something like what Nile and I have posted.

[Nile]

What about with something like this:
http://niler.net/examples/loadnewpage/loadNextpage.html
:)

[acctman]

Nile posted a basic example. You should be able to extrapolate from that.

The bigger question is if you really are doing what you say you are. How are you submitting the different sections of the form? Saving them to a cookie? The fact that you say that the last page will be the "submit" page leads me to believe that you're looking for more of a virtual pagination script than something like what Nile and I have posted.

The 3 pages would like this user goes to page 1 edits image (hits next) data is processed and saved to image file, page 2 reloads that temp img, and then on page 3 final process of temp & rename when user hits the submit.

Its part of a registration form and the idea is to limit the steps since editing the images is an Option that can be skipped. But there is still 2 other pages the uploading image page and the user info form. So if i can make the entire process seem like 2-3 pages when its actually 5pages that would be great.

[Medyman]

The 3 pages would like this user goes to page 1 edits image (hits next) data is processed and saved to image file, page 2 reloads that temp img, and then on page 3 final process of temp & rename when user hits the submit.

Its part of a registration form and the idea is to limit the steps since editing the images is an Option that can be skipped. But there is still 2 other pages the uploading image page and the user info form. So if i can make the entire process seem like 2-3 pages when its actually 5pages that would be great.

Ahh, I see...

Then, what Nile posted in his last post should work for you. As long as you're saving the data as you go along. If it were all to be submitted together, then I would say display only certain parts at a time and do the so-called "Coda" effect.

Let us know if you need more help.