Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS styles won't refresh after AJAX runs

Tags:

jquery

ajax

css

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;}
like image 734
Leann Avatar asked Sep 06 '13 02:09

Leann


2 Answers

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" );
    }
});
like image 200
Andrew Liu Avatar answered Nov 19 '22 03:11

Andrew Liu


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.

like image 35
lebolo Avatar answered Nov 19 '22 01:11

lebolo