Question

Ok so I have created a wizard and everything works great. But I have one little piece that seems to ‘bother’ me if you will.

In the last step of the wizard I build, it uses obflush to process data onto the screen
to show some actions happening. But the problem with that is, that the ‘entire’ page doesn’t load until the obflush process is done, and then the page all lines up nicely and such.

Im wondering if there is such a way that maybe ajax can flush the obflush process?

Maybe this is completely wrong but this is how I can envision it happening.

User goes thru the wizard and gets to the final page
The entire page loads
At the end of the page is some ajax code to apply to a tag maybe
The ajax is refreshing itself every second to check against the update of the obflush and then outputting what the obflush has outputted to the screen.

Does that make sense?

Any insight is greatly appreciated.

Thanks

Answer 1

This question is about how to load part of a web page with Ajax. In particular, how to load the structure of a page, and then fill in the details with Ajax calls.

I assume the intention is for the structure to be loaded quickly because it does actually have some content, and then load parts of the page that take a long time to process. Otherwise the effect on screen will be that loading is actually slower.

I would use the JavaScript library jQuery to help with this, although it can be done without any libraries as shown in this question.

• The browser makes a web page request and the server responds like it would normally, but just with the structure of the page

• Within the basically empty page that was loaded, jQuery will then make an Ajax call with load() that will load the response from a URL into the specified HTML section.

The code would look like this, where my-intro-div is the id of a regular HTML div tag:

$(function() {
    var myIntroDiv = $('#my-intro-div');    

    myIntroDiv.load('/my_intro_div.php');
});

• The PHP script my_intro_div.php returns the HTML that is meant to be displayed inside the my-intro-div tag

There are some good examples in the jQuery documentation here:

http://api.jquery.com/load/

jQuery can help with a tonne of other things too. It has a tiny learning curve that can be a little steep, but after that I’ve found that it is the most intuitive “language” I work with.