CODEWITHSUNDEEP
jquery
user725912
user725912

Reputation: 69

Problems with e.preventDefault()

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".

Upvotes: 2

Views: 2809

Answers (4)

John Strickler
John Strickler

Reputation: 25421

preventDefault() can be called anywhere in the scope of the event handler's function. It can be the first or last line but it cannot be inside another function within it especially not in one that is being called asynchronously.

Hope this helps.

Upvotes: 0

megakorre
megakorre

Reputation: 2223

hej user725912 the post call is async meaning that your not preventing the default action in time.

the async call returns after the default action has been done.

Upvotes: 0

Raynos
Raynos

Reputation: 169383

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.

Upvotes: 5

kobe
kobe

Reputation: 15835

user return false , it does both preventDefault and stopPropogation

you should do that in outerloop..

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

                }
            });
          return false
        });

and to your other question , firebug is the best

Upvotes: 1

Related Questions