How to load page synchronously using jQuery

Question

Currently I am using jQuery to choose what my index page should load depending whether a cookie is set.

For example, the body tag of the index.html should load hasCookie.html if the cookie is set and noCookieSet.html if no cookie is set.

My index page currently has:

load user scripts
load styling scripts

<html><body></body></html>

The user script has the code that checks whether the cookie is set. If it is, I use jQuery's load to load the content into the body:

$(document.body).load('hasCookie.html')

However, since this is executed asynchronously, the styling scripts have loaded before the body tag has been updated, hence the body is not styled.

Is there a way of having a synchronous load, or should am I approaching this in the wrong way?

EDIT: if it helps, the styling scripts are basically jQueryUI

The best answer here is **don't** -- Instead use the callback for `.load()` to execute your styling functions... — gnarf, Mar 19 '11 at 18:59

score 9 · Answer 1 · answered Mar 19 '11 at 18:59

9

AFAIK, JQuery load cannot be synchronous.

You can cet around this witha callback function.

$(document.body).load('hasCookie.html', function(){
//call styling script here
});

answered Mar 19 '11 at 18:59

Peter Olson

139,199
49
202
242

score 2 · Accepted Answer · answered Mar 19 '11 at 18:57

2

In your case, this sounds like it would really be a better idea to implement server-side if possible. In PHP it would be a simple matter of detecting if the cookie you want is set in the $_COOKIE array and outputting the correct page.

answered Mar 19 '11 at 18:57

Chris Cherry

28,118
6
68
71

score 1 · Answer 3 · edited May 23 '17 at 12:09

1

You can form it as an AJAX request and populate your page with the response. Set the async option to false. This SO answer has more: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

edited May 23 '17 at 12:09

Community

1
1

answered Mar 19 '11 at 18:56

jnpdx

45,847
6
64
94

score 1 · Answer 4 · answered Mar 19 '11 at 18:57

Just change document.location.href to the url of the page.

What you're doing is loading content with ajax and placing it within the page body. You'd do this if you didn't want any resources declared in head to get requested. But there's no point in that since you can do it with caching.

score 0 · Answer 5 · answered Mar 19 '11 at 18:57

0

Try

$(document).ready(function() { $(document.body).load('hasCookie.html'); });

This will postpone loading until after everything else is already there.

answered Mar 19 '11 at 18:57

Jacob

1,516
9
7

score 0 · Answer 6 · answered Mar 19 '11 at 19:38

This is how i do it.

You can attach Style and Javascript upon callback from the Ajax Function.

  $.ajax({
    url: somePage,
    success:function(ajaxData){

                        //ATTACH AND RUN CORRESPONDING PAGE SCRIPT
                        var script = somePage + '.js';
                        $.getScript(script);



                        //ATTACH CORRESPONDING STYLE SHEET
                        var style = document.createElement('link');
                        style.type = 'text/css';
                        style.href = '/css/'+somePage+'.css';
                        style.rel = 'stylesheet';
                        style.media = 'screen';

                        document.getElementsByTagName('head')[0].appendChild(style);

                       //ADD HTML RETURNED
                       $('body').html(ajaxData);      


});

This allows everything to be loaded including styles and javascript, given that the script name and css file name are the same.

How to load page synchronously using jQuery

6 Answers6

Linked