On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page.
The content being loaded consists of multiple divs enclosed within an outer <div> that is hidden from view.
I have set up the display container div and various links for users to click. Each time a link is clicked, the corresponding content is loaded into the display container.
This is the jQuery code I am using:
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
Although everything works as intended for most of the links, there appears to be an issue with one specific link.
Within the hidden div, there are 4 content divs and 2 tables each with their own unique IDs. For example, SPECIFICATIONS corresponds to the #specTable, while APPLICATIONS maps to the #FEAT div. However, when it comes to ACCESSORIES, the content associated with the #ACCESSORY ID fails to load despite the script initializing and displaying the page loader gif properly. It seems like no content loads after the initial loading process.
For reference, the structure of the hidden area is as follows:
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
To confirm functionality, I created the following test:
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
Despite attempting various changes to the ID tags and link href attributes, the issue persists with ACCESSORIES. While changing to other IDs such as tables or different divs like #FEAT</code or <code>#specTable results in successful loading, this specific link refuses to load.
My suspicion is that there might be some unknown nuance regarding jQuery and .load() that is causing this problem.