How to ensure dynamic CSS is loaded first before AJAX content?

Question

I need help on timing issues between CSS file and HTML code from AJAX. I am loading CSS by just adding link in the head and also I am loading HTML content by AJAX.

My intention is to apply styles(in profile_info.css file) on the dynamic contents(generated by profile_info.php). thats why i am first downloading css then asking ajax to get the content.

How can I ensure that CSS is loaded first so that styles can be applied on the dynamic HTML content? Here is the code:

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'css/profile_info.css') );

$.get('/ajax/controllers/profile_info.php',
    {id: user_id},
    function(response){
        $('#middle_content').html(response);
    });

Why do you need to add the styles dynamically to the head of your document? This will cause you to lose the performance advantages of having your CSS in the <head> element. The browser usually would process that CSS before it ever got to the Javascript, but in your case since your doing it dynamically in Javascript, this is not the case. Do you really need to add the CSS dynamically like that? — stevebot
– stevebot, Commented Oct 29, 2011 at 19:03
yes, i think styling the dynamic content, we have 2 solution.1.we need to statically put the CSS for all upcoming html contents in future on page. Other one is to load dynamically CSS thats what i am trying in code — P K
– P K, Commented Oct 29, 2011 at 19:17
I'm not 100% certain, but I think this should work as-is. Are you sure the CSS file gets loaded at all? You might need a rooted path like /css/profile_info.css — No Results Found
– No Results Found, Commented Oct 29, 2011 at 20:04
CSS as well as ajax content is getting loaded perfectly but sometime CSS loading takes more time than html content. In that case styling is messed up in between :(. — P K
– P K, Commented Oct 29, 2011 at 20:25
Another approach, use CSS variables: stackoverflow.com/a/65927959/2213708 — Alex Khimich
– Alex Khimich, Commented Jan 27, 2021 at 22:14

Jacob Mattison · Accepted Answer · 2011-10-29 19:01:34Z

3

Put the get command into a function fired by the load event of the stylesheet link.

Maybe something like

$('head').append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'css/profile_info.css').load(function(){
    $.get(
      '/ajax/controllers/profile_info.php',
      {id: user_id},
      function(response){
      $('#middle_content').html(response);
                     });
}) );

answered Oct 29, 2011 at 19:01

Jacob Mattison

51.2k11 gold badges109 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

P K Over a year ago

thanks Jacob for your reply, can you please write the code for load event. Appriciate your help.

P K Over a year ago

Great let me try and i will comment again.

P K Over a year ago

Sir not working :(. i guess( not sure) load event can be associated with any div or HTML element inside body tag like image or div. after loading image/div, load event can be fired automatically. what is the best way to style(apply css) on dynamic content?

P K Over a year ago

you point me in correct direction but question how can we detect css is loaded?

pixeline Over a year ago

You're making an ajax call inside an ajax call! (load( $.get) which content will be injected in the head tag For your plan to work, you'd need a "before making the ajax call" callback. You need to use $.ajax({beforeSend:function(){//fetch the stylesheet here });

|

cHao · Accepted Answer · 2014-03-07 23:07:03Z

Some CSSs need to be loaded first than JQuery needs. First or even in a certain pretended order. That's why, on ordinary HTML pages loading, we write all CSSs in the <head> section! ;-) The browser will always load it first, before all the body code.

If of any help, here is a solution where diferente pieces of code can be loaded in a certain hierarchy.

ajax_getScript('dir/certainPage.php')
    .then(function(retObjHTML){           //'ajax_getScript()' has been TRIGGERED and, when finish, the browser comes next line!
        /*----------------*/
        $.when(ajax_getScript('dir/scrp/certainPage.css'))
            .done(function(retObjCSS){   //It will only enter next line, after the complete CSS file is loaded into the browser!
                /*----------------*/
                $divToFill
                    .prepend(retObjCSS)
                    .prepend(retObjHTML)
                /*----------------*/
            });
        /*----------------*/
    });

And the function, simple one, that loads generic "HTML" of an 'url' content, via AJAX:

ajax_getScript = function(url){       //the complete '$.ajax' parameters set can be checked here: http://coursesweb.net/jquery/jquery-ajax
    //      $.get( url [, dataToSent ] [, success(data, textStatus, jqXHR) ] [, dataType ] )    Returns: object 'jqXHR'.
    return  $.get(url, function(retAjaxObj){}, "html");
}

Pedro Ferreira · Accepted Answer · 2014-03-08 18:03:28Z

The example above is loading each file separately, on a serial fetch.

However, we can do it in parallel, saving some waiting time (if more than a couple of files, can be highly consuming!) and still assure all needed files are previously loaded - to HTML writing/using, or any other event.

$.when(ajax_getScript('dir/certainPage.php'), ajax_getScript('dir/scrp/certainPage.css'))
            .done(function(retObjHTML, retObjCSS){
                //----------------
                $formToComand
                    .prepend(retObjCSS[0])
                    .prepend(retObjHTML[0]);
                //----------------
})

The calback function

ajax_getScript()

is the same.

pixeline · Accepted Answer · 2011-10-29 21:59:14Z

-1

I would put all needed CSS in your static, main stylesheet. Much more easily maintainable.

But, if you really want, you can be very dirty and output your css right inside your html response (put the style tag before the html content tags):

<style type="text/css">
.overwrite-css{background:red;color:white;}
</style>
<div class="overwrite-css">This is red</div>

But: that's really dirty and really, you should put all your css in your static css file.

edited Oct 29, 2011 at 21:59

answered Oct 29, 2011 at 19:08

pixeline

18.1k12 gold badges87 silver badges110 bronze badges

3 Comments

P K Over a year ago

For ajax based website, dynamics contents are generally very high in volume so putting CSS for all statically is not a good idea.

pixeline Over a year ago

i personally would prefer that all CSS be loaded, cached once and for all. You can't beat that, even though it may make the initial load time a bit longer. But hey, every project is different. At least my answer provides you with a safe way to make sure the relevant css is available before the new html gets injected.

P K Over a year ago

i agree with you for safety side.

Collectives™ on Stack Overflow

How to ensure dynamic CSS is loaded first before AJAX content?

4 Answers 4

8 Comments

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

3 Comments

Linked

Related