ansaurus

Question

Using $.post for simple ajax test, what am I missing?

Answer 1

+5 A:

Not sure if the $.post() function has access to the str parameter. Try this instead:

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
    $("document").ready(function(){
        $('input').change(function() {
             $.post("ajaxjquerytest.php",{'age': $(this).val()},function(response){
                 $("p").html(response);
             });
        });
    });
 </script> 
</head>  
<body>
 <input type="text" />
 <p>Age?</p>
</body>
</html>

This attaches an onChange handler to the input element after the DOM is completely loaded.

Your approach should also work if you omit $(document).ready(). But attaching the JS function to the element is more the way it is done with jQuery.

Besides that, you only need to wrap code into $(document).ready() that should be executed after the whole DOM tree is built. Your case, your are defining just a function. There is no need to use document ready as the function cannot be called until the DOM is loaded anyway.

Read the documentation of .post()!

Felix Kling 2010-03-15 21:26:44

made you're suggested changes, and it got rid of two of the errors, but now firebug tells me: 'Uncaught ReferenceError: response is not defined'

Cortopasta 2010-03-15 21:40:17

@Cortopasta: A I see, you have to do `function(response){$("p").html(response)}`. Updated my code. Also you have to change how to send the data to the server, it has to be {'age': $(this).val()}. The best is, you read the documentation: http://api.jquery.com/jQuery.post/

Felix Kling 2010-03-16 08:06:11

Answer 2

+1 A:

The easiest way to debug problems like this is to use a tool which allows you to view HTTP requests. Try the net panel in Firebug. That will let you see what url the request was made to, what postdata was sent, and what the server response was. Then you'll know whether the PHP or the JS code is the problem.

Annie 2010-03-15 21:32:31

or you can also use fiddler2 from http://www.fiddler2.com/fiddler2/

Jayrox 2010-03-15 21:47:26

Answer 3

+1 A:

Change your function from this:

function ajax(str){
    $("document").ready(function(){
        $.post("ajaxjquerytest.php",str,function(){
            $("p").html(response);
        });
    });
}

to:

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(){
        $("p").html(response);
    });
}

First, the $(document).ready() construct executes when the page is first loaded. Second, "document" should not be in quotes. Finally, you might have better success with:

<form>
    <input type="text" />
    <p>Age?</p>
    <input type="submit" />
</form>

and change:

$('input').change(function() { ... }

to:

$('form').submit(function() { ... }

Neil T. 2010-03-15 21:33:14

Answer 4

A:

Your ajax() function is attaching a document#ready event handler. document#ready would have fired when your page is initially loaded and it never fires again. So $.post never execute. Just change your function to this.

function ajax(str){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
     });
}

Chetan Sastry 2010-03-15 21:35:17

Answer 5

+2 A:

There are a couple of problems in the code you posted.

It doesn't look like you're closing the brace on the "ajax" function so you should be getting a JS error when you load the page.
You should either write

function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } or use the $(document).ready as Felix suggested
Looks like your PHP code expects a parameter named AGE but you're but you're not explicitly giving in a name in your code, you need to create a JS class with an appropriately named property like so { AGE: str }. There are some examples of doing that in the jQuery documentation.
Also, be careful with using this keyword in JavaScript, it can have drastically different meanings based on what context it's used in. (Looks like the way you're using it is described at the very bottom of the page).

It may just be easier to start with Felix's example and work from there though.

R0MANARMY 2010-03-15 21:51:26

The reason Felix's answer isn't working for you is because of the callback method signature `function(){...}` doesn't define a response parameter, it should really be `function(response){...}`

R0MANARMY 2010-03-15 22:03:11

How do I send the value to the PHP script like you mention in #3

Cortopasta 2010-03-15 22:05:37

`$.post( "ajaxjquerytest.php", { age: str }, function(){ ... });Also if you follow the jQuery documentation link I provided, they have a couple examples of how to send arguments to the script.

R0MANARMY 2010-03-15 22:14:23

Answer 6

+4 A:

I think the problem here is that response isn't being defined. It should be passed as a parameter to the function. Try this:

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(response) {
        $("p").html(response);
    });
}

jkody21 2010-03-15 21:56:54

ansaurus

tags:

views:

answers:

Using $.post for simple ajax test, what am I missing?

related questions