CODEWITHSUNDEEP
phpjavascriptajaxjquery
Pike Man
Pike Man

Reputation: 353

Using JQuery, AJAX and PHP

I am creating a PHP site and have ran into the following problem, i would like to be able to click a hyperlink on a page, send a small data item to a php script, have the script perform its function and then return the results.

I am using AJAX with this site to have each page load into a div section of the site, all pages, data and responses load into this central div, like so:

<html>
    <body>
        <div id="topMenuBar">
            <div id="contents">
            //ALL DATA IS LOADED HERE...//
            </div>
        </div>
    </body>
</html>

So, when a page is selected from the top menu i simply have the following code run:

$('#topMenuBar a').click(function(e)
{
    e.preventDefault();
    $('#contents').load($(this).attr('href'), function()
    {
    });
});

Now that pages load into the content section, I am loading a page called "results.php" which connects to a DB, queries it, and the creates a HTML table with the results. Each table row has a small hyperlink which when clicked is intended to send a value to another PHP script and then clear the contents div and then repopulate the div with the response from this script (getInfo.php). For example, a row will have the following PHP code generate a link:

<label class="moreInfo"><a name="test01" onClick="getInfoFromPHP(<?php echo $data[$id]; ?> )">Get Info</a></label>

So when the table is generated by PHP it, the link when clicked passes a JS function the value.

What i now need to do is to send the value to a PHP script which will again query the DB, and have the results inserted into the "contents" div. I have been trying the following function.

function getInfoFromPHP(myVar){
    var netID = myVar;
    $.ajax({
        url: "getInfo.php",
        type: "POST",     
        data: { 
            networkID: netID
        }, 
        success: function(html) {
            $('#contents').empty();
            $('#contents').load(html);
        }      
    });
};

When i call the function it does seem to send the data to the script but i get the following error from firebug:

POST http://127.0.0.1/private/networks/includes/leave_a_network.php - 200 OK -15ms
GET http://127.0.0.1/%3Ch2%3EHello 403 Forbidden 21ms "NetworkError: 403 Forbidden - http://127.0.0.1/%3Ch2%3EHello" Hello

The PHP script is only doing the following:

<?php
    session_start();
    $networkID = $_POST['networkID'];
    echo "<h2>Hello World</h2>";
?>

What is the best way to send data to a PHP script and have it load into a div?

Thanks for any feedback.

Upvotes: 2

Views: 1396

Answers (3)

Jay Blanchard
Jay Blanchard

Reputation: 34426

success: function(html) {

Is returning html as a string that does not need to be 'load'ed again like you try here - 

$('#contents').load(html);

Change that line to this

$('#contents').html(html);

Upvotes: 4

Sebastian Breit
Sebastian Breit

Reputation: 6159

In the success function, put $('#contents').html(html); instead of load.

Upvotes: 9

Marc Bartony
Marc Bartony

Reputation: 27

A better way is using $.ajax to send the request. On the success callback, you can analyse the result, and do what you want with :

http://api.jquery.com/jQuery.ajax/

Upvotes: -1

Related Questions