CSS styles won't refresh after AJAX runs

Question

I'm using the AJAX code below to append content from another HTML file to my index page. The AJAX works correctly, and my content shows up, but the styles that I have coded in the CSS are not being applied after the AJAX runs.

I've been searching the net looking for an answer to the problem, but so far the solutions I've tried haven't worked. Below I'm using .trigger('create') to try and force the CSS refresh on the content that I'm appending, but it's not working. If I refresh the page manually through the browser, then my styles are applied. Can someone point me in the right direction as to how to refresh the styles after the AJAX runs without refreshing the entire page?

$.ajax({ type: "GET",   
    url: pageToLoad,   
    async: false,
    success : function(data)
    {
        $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create');
    }
});

HTML that is being appended to index page:

<div class="content" id="portfolio">
    <div class="wrapper">
         <h2>Portfolio</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum libero non egestas dapibus. Nam gravida, libero ac posuere eleifend, mauris nisi venenatis metus, non hendrerit magna justo eget lectus.</p>
    </div><!--wrapper-->
    <div class="clear"></div>
</div><!--content-->

CSS styles being applied in default.css:

#index {background-color:#82e4e5;}
#portfolio {background-color:#fb5656;}

Solution 1

You shouldn't need to refresh your styles after an AJAX call. Can you create a jsFiddle as an example?

I created a jsFiddle that works for me. But I had to surround the injecting HTML with a div. I also got rid of the .trigger('create') code.

Solution 2

have you try this?

$.ajax({ type: "GET",   
    url: pageToLoad,   
    async: false,
    success : function(data)
    {
        $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create');
        $('#index').css( "backgroundColor", "#82e4e5" );
        $('#portfolio').css( "backgroundColor", "#fb5656" );
    }
});

Comments

[jmbertucci]

Hi Leann, browsers should apply styles to HTML added via AJAX. If they're not, verify there isn't a typo in the CSS select. It doesn't look like it from what I see but I don't know if there's more going on. Another troubleshooting step could be to place the HTML directly into your file to verify it'll get styled, removing the JavaScript from the equation. If it does style, then it should narrow down the issue to be something odd happening in the JS.

[Leann]

Hey Lion, thank you for the response. However, I want to be able to control the CSS from the stylesheet itself rather than apply the colors via jQuery. There is a lot more styling I need to do after I get this working (x Hopefully! x). Do you know how to force the stylesheet refresh after the AJAX runs?

[Andrew Liu]

Same as lebolo, I have made some ajax call to append something to the page and all can read stylesheet without any problem. Can you be more specific on your problem?

[Leann]

Everyone, I've decided to take the jQuery in another direction. It seems to work better with the styles that are already in place. This question is no longer valid. Thank you for responding!