JQuery PHP $.post() server response will not work

Question

I'm trying to figure out how to get a response back from my $.post() and I can't seem to figure it out. It works just fine in IE but chokes in FF and Chrome. I am sure it's something really simple. I have read through as many postings here and on Google trying all the suggestions, still no luck. Can someone see what I am doing wrong? The response I should expect is testing.

Forgot to include what I am getting; in the Chrome and FF Firebug console I see the .error() message and all it has is 'error' ... no description.

Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

HTML

<form id="frm">
    <input type="text" name="usr" />
    <input type="submit" value="Click" />
</form>

JQuery

$(function()
{
    $('form#frm').submit(function()
    {
        $.post('process.php',$('#frm').serialize(),function(response)
        {
            console.log('PHP returned : '+response);
        })
        .error(function(XMLHttpRequest,textStatus,errorThrown)
        {
            console.log('Error with ajax Function: '+ textStatus+' '+errorThrown);
        });
    });
});

PHP

<?php
print('testing');
?>

EDIT (For anyone else that's having the same issue, this code works)

$(function()
{
    $('form#frm').submit(function(e)
    {
        e.preventDefault();
        $.post('process.php',$('#frm').serialize(),function(response)
        {
            /* Do something with response */
        })
        .error(function(XMLHttpRequest,textStatus,errorThrown)
        {
            alert('Error with ajax Function: '+ textStatus+' '+errorThrown);
        });
    });
});

You could easily debug in chrome the script in console manager press f12 and see in network tab, that the request and responses are coming through. — Risto Novik, Feb 19 '12 at 19:22
@ jurka - did what you said and it quickly flashes `Error with ajax Function: error` — Mike, Feb 19 '12 at 19:25
If Firebug or the Developer Console tells you that the network action completes successfully, you may simply have to specify the data type `text` to jQuery via one more parameter after your success function, as in `$.post('process.php',$('#frm').serialize(),function(response){...},"text")` and so on. — wecsam, Feb 19 '12 at 19:44

Tim · Accepted Answer · 2012-02-19T19:40:27.283

1

I assume that since your you did not specify a form action and don't prevent the form from submitting by returning false in the event handler, the page is being refreshed (you post to the same page and it simply reloads) before the AJAX callback is executed. That would not explain the error message though.

edited Feb 19 '12 at 19:40

answered Feb 19 '12 at 19:34

Tim

2,430
19
20

1

You shouldn't use `return false` as a way to prevent the default event from firing but use the `event.preventDefault()` function, as in `function callback_function(e){e.preventDefault();}`. – wecsam Feb 19 '12 at 19:40
TheShellfishMeme .... you are the man(or woman, lol). Simply by putting `return false;` in the event handler it resolved my issue. Didn't try adding `action`, but non the less, it works. Thank you so much :) – Mike Feb 19 '12 at 19:42
@wecsam - I will try your option as well. Off the top of your head, is there some where that goes into more detail about what your saying? – Mike Feb 19 '12 at 19:44
Just curious, why would `event.preventDefault();` be better than `return false;`? – Mike Feb 19 '12 at 19:46
@Mike See http://api.jquery.com/event.preventDefault/ in the jQuery documentation. Note that modern browsers also have a built-in `event.preventDefault()` function that is not to be confused with jQuery's. – wecsam Feb 19 '12 at 19:47
@Mike I read somewhere that `return false` will do some other things in addition to canceling the event, which may lead to unexpected results. – wecsam Feb 19 '12 at 19:48
Just tried `event.preventDefault()` in Safari, FF, Chrome, Opera, and IE and the only browser that it did not work was FF. I also tried `return false;` in all the same browsers and it worked in all of them. Just for anyone else having this same issue. – Mike Feb 19 '12 at 19:54
@wecsam I usually use `event.preventDefault()` and always thought it was preferable, but when looking this up I saw that the [jQuery documentation](http://api.jquery.com/submit/) mainly used `return false` so I went with that. – Tim Feb 19 '12 at 19:55
1

This is a good post on this topic -> http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Mike Feb 19 '12 at 20:03

JQuery PHP $.post() server response will not work

1 Answers1