Question

I have problems using preventDefault. The problem is that this piece of code works fine (it prevents the click everytime and I get the alert):

$("#vnesi").click(function (e) {
            $.post("/VnosPrijavnica/PreveriVnose", $("#kriteriji").serialize(), function (data) {
                if (data != "ok")
                    alert(data);

            });
            e.preventDefault();
        });

But this doesn’t (nothig happens, if data is either “ok” or not):

        $("#vnesi").click(function (e) {
            $.post("/VnosPrijavnica/PreveriVnose", $("#kriteriji").serialize(), function (data) {
                if (data != "ok"){
                    alert(data);
                    e.preventDefault();
                }
            });

        });

And also one more question. What is the best way to debug javascript in Firefox 4 (or any other browser but I prefer Firefox 4)?

Update

Thanks for your answers. How can I preventDefault() if I want it to act like in the second piece of code? I want e.preventDefault() to execute only if the data != “ok”.

Answer 1

Your calling e.preventDefault() in an asynchronous callback. The event handler will have completed before you prevented the event.

Basically you cannot change the event in the callback because the event has completed. You need to handle this differently (i.e. outside the callback).

$("#vnesi").click(function(e) {
    $.post("/VnosPrijavnica/PreveriVnose", $("#kriteriji").serialize(), function(data) {
        if (data != "ok") {
            alert(data);
        } else {
             // ajax post failed 
             // trigger the action of the event again. (form.submit ??)
        }
    });
    // prevent the default always
    e.preventDefault();
});

For debugging in firefox. Either use the in build tools (Ctrl+Shift+J) or install firebug. Then use F12 to open firebug.