0

When I submit a form with AJAX the event.preventDefault() of jQuery doesn't work.

Here is what my HTML code looks like:

<form method="post" action="my_post_create_url" id="post-form">
    <textarea id="post-text" placeholder="Compose a new post"></textarea>
    <button type="submit" id="submit-post">Post</button>
</form>

Here is my jQuery code:

$('#post-form').submit(function(e) {    
    e.preventDefault();
    var url = $(this).attr("action");
    $.ajax({
        type: "POST",
        url: url, // 'my_post_create_url'
        data: $(this).serialize(),
        dataType: "html",
        success: function(msg){

            alert("Success!");

        }
    }); 
});

And here is how I process it in my controller:

public function createAction(Request $request){
    // some code here ...
    $form->handleRequest($request);
    if ($form->isValid()) {
        // some code here ...
        // ... then redirection 
    }
    return $this->render(...)
}

I even tried the 'return false' at the end of the jQuery code but it still redirects me :(

EDIT 1 :

It seems $('#post-form').submit(function(e) does not trigger at all neither on Chrome nor on Safari, any further help?

EDIT 2 :

I have removed some javascript files in my base HTML file and it now works properly in all browsers. The problem is somewhere else in my js files.

Liam
  • 27,717
  • 28
  • 128
  • 190
lokiloq
  • 194
  • 2
  • 10
  • check your console for error. Are you using local path? – A. Wolff Dec 10 '13 at 15:14
  • please post your HTML code as well – Naryl Dec 10 '13 at 15:15
  • I have no errors in my console and yes it's a local path @A.Wolff – lokiloq Dec 10 '13 at 15:30
  • I just posted my HTML code as well @user3035179 – lokiloq Dec 10 '13 at 15:31
  • chrome (safari?) cannot access local file by default if not served by a server. So, are you running a server? – A. Wolff Dec 10 '13 at 15:32
  • Yes, I am running on MAMP. @A.Wolff – lokiloq Dec 10 '13 at 15:33
  • @user3035179 so this is not your issue i guess. I see it now, you have already posted server side code, my bad – A. Wolff Dec 10 '13 at 15:34
  • possible duplicate of [event.preventDefault() does not work in Chrome and Opera](http://stackoverflow.com/questions/18389046/event-preventdefault-does-not-work-in-chrome-and-opera) – Liam Dec 10 '13 at 15:39
  • No it's not a duplicate @Liam – lokiloq Dec 10 '13 at 17:39
  • 1
    try implementing the `error` function and see what error is thrown. `error: function (jqXHR, textStatus, errorThrown){alert(errorThrown);}` – th1rdey3 Dec 10 '13 at 17:43
  • @th1rdey3 No errors thrown, again I am just trying to avoid that default form action. But neither e.preventDefault() nor return false do the job :( – lokiloq Dec 10 '13 at 18:04
  • you could also try jquery forms plugin http://malsup.com/jquery/form/ – th1rdey3 Dec 10 '13 at 18:17
  • another useful link http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting – th1rdey3 Dec 10 '13 at 18:24
  • Can you confirm that the handler was actually triggered? Put a log statement in there. Maybe you did not attach the listener correctly. Also check `console.log($('#post-form').length)` – Bergi Dec 10 '13 at 18:36
  • @Bergi Yes I can confirm the handler was actually triggered because it redirects me after validation. – lokiloq Dec 10 '13 at 18:52
  • @user3035179: What redirection? All you do is alerting "Success!". Please show your actual code if it differs from what you posted. – Bergi Dec 10 '13 at 19:06
  • @Bergi I mean the redirection in my controller (after submission it validates), I will try your snippet as well. – lokiloq Dec 10 '13 at 19:13
  • Remove `action="my_post_create_url"` from your `form`. The browser always follows through on the action, regardless of javascript. (At least this is how I remember solving a problem like this one) – Matt R Dec 10 '13 at 19:23
  • @Bergi It looks like the handler is not triggered on Chrome but it works on Firefox. Why two different behaviours? (your snippet does not display anything, I checked it with the debugger) – lokiloq Dec 10 '13 at 19:28
  • 1
    Are you attaching your submit handler after the DOM has loaded? If not, you may be attaching the handler to a non-existent form. – Jacob Dec 10 '13 at 19:47
  • @Jacob Wow that's pretty much possible, but why only on chrome? – lokiloq Dec 10 '13 at 19:49
  • 1
    You really should give a fiddle with your code - but in my experience with this issue, 99% of the time it is because the form doesn't exist when you try to attach the handler - so Jacob's comment about a non-existing form is probably right - I would try wrapping the code in a `$(function() {/*your code here*/});` – codefactor Dec 10 '13 at 19:59
  • Did you include your js file after the form was rendered or wait for document ready? Becuase http://plnkr.co/edit/4ErH5C?p=preview is working properly. – Daiwei Dec 10 '13 at 20:55
  • @codefactor It is already wrapped in a $(function() {..}); – lokiloq Dec 10 '13 at 21:25
  • @Daiwei It actually does not work on Chrome, I don't know why... – lokiloq Dec 10 '13 at 21:26
  • @user3035179 but I used this plnkr and works fine in Chrome. It might be caused from other part of the codes you included in the page. – Daiwei Dec 10 '13 at 21:31
  • @Daiwei Yes the problem comes from another of my js files. I need to check each of them to find out whats wrong. Thanks all for your suggestions, its been very helpful. – lokiloq Dec 10 '13 at 21:36
  • 1
    @user3035179 if attached other event handler to the submit button and prevented the default behavior, the form submit event will not be triggered. http://plnkr.co/edit/4ErH5C?p=preview – Daiwei Dec 10 '13 at 21:45
  • @Daiwei Searching in all my js files, I just find out that problem probably come from $(window).on("popstate", function(e) {...}); I can not explain why for the moment. – lokiloq Dec 10 '13 at 21:48

1 Answers1

1

Well, the issue came from the window.popsate which behave differently depending on Chrome (and Safari) or Firefox (and Opera), here was the problematical line in one of my js files:

$(window).on("popstate", function(e) { ... });

And here is some answers for the problem for those who are facing the same issue: Popstate on page's load in Chrome

Community
  • 1
  • 1
lokiloq
  • 194
  • 2
  • 10