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);
    });

Answer 1

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);
                     });
}) );