Question

I have an issue with JQuery in IE7/IE8. My Code below is in the top of my page which gets inserted into a CMS page. This then loads the content (FAQ navigation) into an empty div in the main page.

<script type="text/javascript" src="/wcsstore/MadisonsStorefrontAssetStore/images/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$.get('/wcsstore/MadisonsStorefrontAssetStore/images/contentspots/viva/faqnavigation.html', function(data) {
 $('#faq_links').html(data);
});
</script>

As you can see from the above the content then gets inserted into the empty div in my page, which is the first in the page.

<div id="faq_links"></div>

I have tested this in FF, Opera, Safari, Chrome and IE9, all are fine, the issue comes with IE7 + IE8. Sometimes the navigation will load (But selecting a link will make it dissapear again) other times it just leaves a blank space where it should be. The file it links to is just a simple ul with about 20 links.

I have tried adding an alert into the page to see if it’s not loading the JQuery by adding

alert('Load was performed.');

just before the }); which worked, and gave the “Loaded” popup everytime the page was loaded but still didn’t load the content.

I can’t link you to the page because it is in a development CMS. Any help in finding out why it makes my navigation vanish would be appricated.

I’m happy to answer any question you may have or provide more info if required.

Thanks. Matt.

Answer 1

try adding $(document).ready:

<script type="text/javascript">
$(document).ready(function(){
   $.get('/wcsstore/MadisonsStorefrontAssetStore/images/contentspots/viva/faqnavigation.html',   function(data) {
    $('#faq_links').html(data);
   });
})
</script>