basic quick ajax question with jquery

Question

First try with ajax, please have patience.

<html>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        function hello() {
            $.post("testCaseAjaxServerSide.php", { ola: "hello"}, function(data){
                if (data) {
                    alert('the data is: '+data);
                }
                else {
                    alert('there were no data');
                }
            });
        }

        $("#inputAmigo").click(function(){
            hello();
        });
    });
    </script>

    <form method="post" action="">
        <input id="inputAmigo" type="submit"/>
    </form>
</html>

On the server side I have:

if (isset($_POST['ola']))
{
  echo "we got a post";
} 
else
{
  echo "no post buddy";
}

I'm always getting "there were no data". Any help please? :)

Thanks a lot, MEM

What am I missing? What additional information should I provide? Sorry, I'm really clueless here... :s — MEM, Sep 27 '10 at 16:19
Before `if (data)` try a `console.log(data)` and look at your console in firefox (with extension firebug) or in chrome (with the javascript console). Tell us was is the result. — Loïc Février, Sep 27 '10 at 16:22
I'm not forced to use a onclick event, I mean, I can use a submit event for instance no? (I will have a look and the dumps suggested). — MEM, Sep 27 '10 at 16:33
@Matthew J Morrison: How can I dump there? Since I'm using $.post, the var_dump will not be printed... or am I wrong? I mean, I have tried, but I see nothing outputted in the browser. :s — MEM, Sep 27 '10 at 16:42
@MEM write to a file on the server or use console.log on the client, or just do a print statement and use firebug to inspect what is returned from your ajax call. — Matthew J Morrison, Sep 27 '10 at 17:10

score 5 · Accepted Answer · answered Sep 27 '10 at 16:30

5

Works for me if I prevent the submit button's default behavior. Try changing the click function to:

$("#inputAmigo").click(function(e){
    e.preventDefault();
    hello();
});

or change your form so that you're not using a submit button. Use a simple <input type='button'> instead.

You could also try using the jQuery form plugin.

answered Sep 27 '10 at 16:30

villecoder

13,323
2
33
52

I would like to avoid the prevent... I believe if I code it right, I have no need to prevent. About the input type='button' is not a standard solution so I believe, so input type='submit' should be used instead. Since I'm fairly newbie into jquery I would prefer to NOT abuse, and have it's usage to the bare minimum, so Jquery form plugin will not be my first choice... I have tried to give the form an id, and use .submit() instead of click. No luck either... (Sorry for being such a pickier... Any other suggestion :s ) – MEM Sep 27 '10 at 16:46
1

@MEM if you don't prevent the form from being submitted, then there is no point of using ajax, because submitting the form will send your post to the server. If you want to use ajax to post the form the form cannot post, because that will force a page refresh. you should either use input type="button" or "return false" in your click handler. – Matthew J Morrison Sep 27 '10 at 17:02
So, preventDefault() is not a workaround, it's actually the way we can do, and no one will beat me with a ruler for that? Ok... – MEM Sep 27 '10 at 17:16
2

@MEM take a look at this: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Matthew J Morrison Sep 27 '10 at 17:25

basic quick ajax question with jquery

1 Answers1