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;}
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" );
}
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With