Jquery Ajax + PHP

Question

I am having problems with jQuery Ajax and PHP

I have my php file set up to echo the data I am gathering from a mysql database. I have verified that the database is returning something and that the string at the end of the function actually contains data.

What is happening though, is that it looks like the php echo is happening before the ajax call, causing the php data to be displayed at the top of the page, and not below in proper div.

I think it might have something to do with timing of the ajax and the php call, but I am not sure.

So, why is the data not getting caught by the .ajax and thrown into the div?

Thanks for the help!

jQuery

$(document).ready(function() {  

$.ajax({
    url: "../database_functions.php",   
    type: "GET",
    data: "cat=jw&sub=pi&sort=no",      
    cache: false,
    success: function (html) {                
            alert("Success!");
            $('#product-list').html(html);          
        }       
    });   

});

PHP

echo "Hello World";

Answer 1

Are you sure you didn't use an include or require in your page? Try doing the same on a new empty dummy page. Also, try adding a thick red border to the div, so you are sure it is on the right position on the page, as there might be something wrong with your lay-out. Your code doesn't look wrong though.

Answer 2

If your JQuery code is in the same file as PHP code, it is given that PHP will be executed before JQuery code,.. since JavaScript is Client side, PHP is Server side, PHP file first get executed on the server, rendering static HTML from the dynamic PHP, and than when client browser render the page JavaScript get executed.

.ajax will be executed only once when whole page is loaded since you stated in JavaScript that you want that it get executed when document return event ready.

Why .ajax doesn't return value,.. It is not quite clear for the code you provided, problem could be in the file or path to the file ajax call trying to run.