After searching through numerous posts on this topic, I have tried multiple solutions but still can't get it to work. Essentially, I am attempting to dynamically load an image into a div without redirecting to a new page upon clicking a link.
The menu I am working with is created using Pure Css (). Each list item in the menu contains a link:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li><a href="path_to_image" class="model-selection">Model 1</a></li>
</ul>
</div>
In my HTML file, there is a separate div where I want the image to be loaded:
<div id="model-map"></div>
I have attempted various methods using jQuery in a separate JS file:
I followed the guidance from a Stack Overflow post (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
Although the code retrieves the image, it redirects to a new page instead of loading in the div as intended. Any assistance would be greatly appreciated. Thank you!
Edit
I have resolved the issue - the code was functioning correctly, but there was a conflict with YUI code in my HTML that was interfering with the JS file. After moving the conflicting code to the JS file, everything now works as expected. Thank you!