Question

This is my first attempt at AJAX and am unable to retrieve the output from the data.php file.

Here is the code so far, not all code is included, just what is applicable:

index.php

<article class="post">
    <form name="form"><input type="hidden" name="postid" value="<?php echo $value['post_id'];?>" />
   </article>

<div id="main-post">
<div id="gotpostid">some text</div>
</div>

.js file

$(".cover-img").click(function(){
    $("#main-post").fadeIn(1000);
    $.post("data.php", {postid: form.postid.value},
        function(output){
              $("#gotpostid").html(output).show();
    });   
 });

data.php

<?php

    echo 'got this from data.php';
?>

the data.php file is in the same directory as the .js.

Currently when I click on the image it shows the “main-post” div but the “gotpostid” within it still only displays the “some text” and doesn’t replace it with the output text from the php file.

This is the result of adding the following code:

.fail(function(x,y,z){ $("#gotpostid").html(x + "<br />" + y + "<br />" + z)})

[object Object] error Not Found

I found the error mostly thanks to Kevin B’s suggestion for adding the .fail().

The url wasn’t correct for the .php file, it should have been js/data.php.

Answer 1

Add a error method to your ajax handler to know if something unexpected is happening

$(".cover-img").click(function(){
    $("#main-post").fadeIn(1000);
    var jqxhr = $.post("/echo/html/", {postid: form.postid.value},
        function(output){
              $("#gotpostid").html(output).show();
    })
    .error( function()
    {
        console.log( "error" );      
    })

    return false;
 });​