CODEWITHSUNDEEP
phpjqueryajax
JoeCortopassi
JoeCortopassi

Reputation: 5093

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

Playing with jquery for the first time, and I'm trying to get a simple AJAX set up working so I can better understand how things work. Unfortunately, I don't know a whole lot. Here's the HTML with the script:

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

And here is the PHP it's talking to:

<?php
$age = $_POST['age'];

if ($age < 30)
  {
  echo "Young";
  }
else if ($age > 30)
  {
  echo "Old";
  }
else
  {
  echo "you're 30";
  }
?>

Upvotes: 0

Views: 408

Answers (6)

Felix Kling
Felix Kling

Reputation: 816790

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()!

Upvotes: 5

jkody21
jkody21

Reputation: 126

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);
    });
}

Upvotes: 4

Roman
Roman

Reputation: 20256

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

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

  2. You should either write

    function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } or use the $(document).ready as Felix suggested

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

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

Upvotes: 2

Chetan S
Chetan S

Reputation: 23813

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);
     });
}

Upvotes: 0

Neil T.
Neil T.

Reputation: 3320

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() { ... }

Upvotes: 1

Annie
Annie

Reputation: 6631

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.

Upvotes: 1

Related Questions