Home/ Questions/Q 6842913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:09:35+00:00

I’ve been trying to get this really simple example of using AJAX with JQuery

  • 0

I’ve been trying to get this really simple example of using AJAX with JQuery and PHP to work with no luck (here’s the page for the sample). I’ve had a look at quite a few posts with similar discriptions and none have helped…

I’ve copied the code exactly but my function that should be run on success is never called. As an experiment, in the call to $.post I commented out the data part ({sendValue:str}) and the JSON part and added an alert into the body of the success function to see if it was called and it was. So I’m guessing there’s something wrong with how I’ve created my data? I also tried to display the data returned from the AJAX call in the alert and it came out as ‘undeclared’ (data.returnValue).

This is a copy of my code, you can see the full example via the link above and also a working example from the author of the tutorial here: http://www.devirtuoso.com/Examples/jQuery-Ajax/

JQuery:

        $(document).ready(function(){
            $('#txtValue').keyup(function(){
                sendValue($(this).val());
            });
        });

        function sendValue(str){
            $.post("ajax.php",
                   { sendValue: str },
                   function(data){
                       $('#display').html(data.returnValue);
                   },
                    "json"
            );
        }

PHP:

<?php

//Get Post Variables. The name is the same as
//what was in the object that was sent in the jQuery
if (isset($_POST['sendValue'])){
    $value = $_POST['sendValue'];  
}else{
    $value = "";
}

//Because we want to use json, we have to place things in an array and encode it for json.
//This will give us a nice javascript object on the front side.
echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value));

?>

HTML:

    <body>

    <p>On keyup this text box sends a request to PHP and a value is returned.</p>

    <label for="txtValue">Enter a value : </label><input type="text" name="txtValue" value="" id="txtValue">

    <div id="display"></div>

</body>

Thanks!

EDIT:
I rewrote my $.post into a $.ajax with an error function in it. I’m definitely hitting the error function and the error is a parse error – I’m guessing it’s coming from my PHP script when I call json_encode… here’s a screenshot from firebug – anyone got any more ideas?:

Screenshot 1 – firebug console

Screenshot 2 – firebug watch window

screen grab of firefox console
screen grab of watch on error function

Thanks for all the help so far by the way, really appreciate it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I noticed that var str = $('#txt').val(); would give you an error because $('#txt') does not exist, it should be $('#txtValue').

    After looking at your code, everything looks as it should, my next step would be trying to debug your code by using some console.debug() in JavaScript and some echo in PHP. I recommend you get Firebug for Chrome/Firefox and if using IE upgrade to IE9 and use their developer tools. Using the mentioned tools will give you a better idea of how your code is executing.

    My first step would be to make sure that the keyup is firing:

     $(document).ready(function(){
        $('#txtValue').keyup(function(){
            alert('keyUp');
            sendValue($(this).val());
        });
 });

    Second step would be to make sure sendValue is firing:

    function sendValue() {
    alert('sendValue');
    var str = $('#txt').val();
    tmr = null;


    $.post(
        'test.php', 
        { sendValue: str }, 
        function(data) { 
            alert('inside post');
            $('#output').html(data.returnValue); 
        }, 
        'json'
    );
}
    • 0