Calling preventDefault on DOM element

Question

I am currently in the process of creating an MVC4 web application, and I seem to have run into a weird issue. I have created a unordered list with some list items in it, and their respective anchor tags, in which I am going to be able to click, that will return the respective /CONTROLLER/ACTION view.

    <div>
        <ul>
            <li>
                <a class="ajax" href="/Test/One"></a>
            </li>
            <li>
                <a class="ajax" href="/Test/Two"></a>
            </li>
            <li>
                <a class="ajax" href="/Test/Three"></a>
            </li>
            <li>
                <a class="ajax" href="/Test/Four"></a>
            </li>
        </ul>
   </div>

   <div id="body">
   </div>

I have then created some jQuery to call when you click either of the anchor tags, looking for a class of "ajax", and if you are to click the anchor tag, it will then run another function called GetContent, passing through the HREF value of the anchor tag, which will be used as the path for the ajax call.

$(document).ready(function () {
    $(".ajax").click(function () {
        var path = $(this).attr("href");
        GetContent(path);
    });
});

function GetContent(path) {

    $.ajax({
        url: path,
        type: 'POST',
        async: false,
        success: function (result) {
            $("#body").html(result);
        }
    });
}

I have heard of a function you can call, called preventDefault I believe. I am finding that I am not sure when to call this preventDefault to override the click of the anchor tag.

I did try placing it into a couple of places, but with no luck... I am finding at the moment I am able to click any of the anchor tags, and the default action occurs, it simply returns the whole website with the new view loaded. However if I open up the console in google chrome developer tools, and call the function GetContent, passing through the path I am expecting, it will then call the function, return the ajax, and update my web page.

If someone is able to point out where I am supposed to call the preventDefault function that would be great.

*"I have heard of a function you can call, called preventDefault I believe."* I, too, have heard rumours of such a function. There have been multiple reports of it being seen in the underbrush of the web. Or, wait, **[in the documentation](http://api.jquery.com/event.preventDefault/)**. And lo! The example in the documentation is preventing the default action of a link. Golly. — T.J. Crowder, Jan 20 '13 at 09:44
use `return false;` in the click handler or just pass a param in the function(e) and use `e.preventDefault()` just after the click handler function. — Jai, Jan 20 '13 at 09:47
Thanks T.J, really appreciated the sarcasm... I am only new to jquery so give me a break... Thank you Jai, appreciate the help. — OhTehNoes, Jan 20 '13 at 10:08
@OhTehNoes: It takes an hour, tops, to read [the jQuery documentation](http://api.jquery.com) from beginning to end, and it saves you a huge amount of time in the long term (or even in the medium term). I strongly recommend it. (Lest you get the wrong impression: I'd've also *answered* the question, but Rafael already had.) (BTW, if you want people to be notified that you've commented to them, you need to use the `@` sign.) — T.J. Crowder, Jan 20 '13 at 10:25
@t.j.crowder, thank you, I will go ahead and read the documentation. I appreciate that you got back to me in a positive manner, I'm sure you understand that being new to a language isn't always the easiest, and sometimes simple mistakes are made. Nonetheless, cheers. — OhTehNoes, Jan 20 '13 at 11:57
@T.J.Crowder, sorry, didn't realize it had case sensitivity. — OhTehNoes, Jan 20 '13 at 12:07
@OhTehNoes: *"sorry, didn't realize it had case sensitivity"* I don't think it does. :-) — T.J. Crowder, Jan 20 '13 at 12:22

score 3 · Accepted Answer · answered Jan 20 '13 at 09:42

3

preventDefault is a method of event object. You get the reference to event object as first param of the click event handler…

$(".ajax").click(function (event) {
    var path = $(this).attr("href");
    GetContent(path);
    event.preventDefault();
});

answered Jan 20 '13 at 09:42

Rafael

18,349
5
58
67

Thank you Rafael, I appreciate the help, this is exactly the sort of answer I was hoping for. – OhTehNoes Jan 20 '13 at 10:09
It still does seem as though it does not work correctly... I still see the whole page refresh and the url change to match the normal request. Which does not happen when I simply call the GetContent function using the console by itself. – OhTehNoes Jan 20 '13 at 10:21
This can mean many things. Some code part throws error before reaching `event.preventDefault` call. Or the click handler is not attached to the links. The second one you can easily check by putting `alert('test')` just before the line `var path = ...`. The second one, you have to check error console in your browser. In other cases, we would need a live example so we can click through it. – Rafael Jan 20 '13 at 10:42
thanks for the tips, I will go and investigate, and will get back to you. – OhTehNoes Jan 20 '13 at 12:04

Calling preventDefault on DOM element

1 Answers1