0

I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.

What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.

I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:

<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 that same html file, I have another div where I want to load the image:

<div id="model-map"></div>

I've tried the following ways, using jquery, in a separate js file:

I followed the selected answer for this question, which seemed to have the best approach (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;
    });
});

As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly. I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me. Thanks in advance!

Edit

The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected. Thanks!

Community
  • 1
  • 1
José Del Valle
  • 691
  • 1
  • 13
  • 27
  • use the html5 file api to read the image binary directly from the file input into a base64 data uri, which you can then set as the src attribute for the image. its pretty easy. google it – r3wt Dec 01 '14 at 00:20

2 Answers2

2

You need to use event.stopPropagation();

$('.model-selection').click(function( event ) {

    event.stopPropagation();
    // add your code here

});
joseluiscc
  • 234
  • 2
  • 5
  • Thanks!, as I said to Spencer, I tried with both preventDefault and stopPropagation, but I'm still being redirected to a new page. I think there may be something wrong with my code, but haven't found the error yet – José Del Valle Nov 30 '14 at 04:51
  • did u see if you get any error on your console? there might be some error that makes jQuery fail – joseluiscc Nov 30 '14 at 05:00
  • jsfiddle.net/jdelva/zsm4zqk8/1 no errors so far, it works on jsfiddle, I'm looking at every inch of my html and js files to see WTF is going on – José Del Valle Nov 30 '14 at 05:20
  • did u add the code above inside this? $(document).ready(function () { }); – joseluiscc Nov 30 '14 at 21:01
  • yes sir, I found out the error, I had some code from the YUI framework inside my html inside – José Del Valle Dec 01 '14 at 00:13
1

You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:

...
$('.model-selection').click(function (e) {
    e.preventDefault(); // Stops the redirect
    console.log("clicked"); // Now this works
    ...
)};
...
Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
  • Thanks for your answer, I tried using preventDefault and also stopPropagation but I'm still being redirected to a new page. What may be wrong? – José Del Valle Nov 30 '14 at 04:47
  • @dlvx Did you add the `function (e)`? – Spencer Wieczorek Nov 30 '14 at 04:51
  • yes sir, followed your answer, but still doesn't work, so I think it may be something else with my code – José Del Valle Nov 30 '14 at 04:53
  • @dlvx That's odd. The `return false` alone should be preventing the redirect. The only thing I can think of is you might not be clicking the element with the class `.model-selection`, or the old page is getting brought up in cache. Or maybe there is an error in your code or loading jQuery (check the console). Is it possible you could re-create this problem using [jsfiddle](http://jsfiddle.net/) ? – Spencer Wieczorek Nov 30 '14 at 04:57
  • http://jsfiddle.net/jdelva/zsm4zqk8/1/ There it is, and it works, I removed some list items cause the menu is bigger that that, what is strange is that with all the list items it doesn't work, but it works with less items. What I don't know right now is if it is a problem with my html, maybe some tags. I will have to look closer at it. – José Del Valle Nov 30 '14 at 05:14