Using JQuery, AJAX and PHP

Question

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.

When you call $('#contents').load(html);, you are firing another AJAX request. You want $('#contents').html(html); to load the response into the selected container. — Evan Davis
– Evan Davis, Commented Apr 30, 2012 at 17:36

Sebastian Breit · Accepted Answer · 2012-04-30 17:37:45Z

9

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

answered Apr 30, 2012 at 17:37

Sebastian Breit

6,1611 gold badge37 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jay Blanchard · Accepted Answer · 2012-04-30 17:38:09Z

4

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

answered Apr 30, 2012 at 17:38

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Comments

Marc Bartony · Accepted Answer · 2012-04-30 17:35:11Z

-1

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/

answered Apr 30, 2012 at 17:35

Marc Bartony

272 bronze badges

1 Comment

Jay Blanchard Over a year ago

The OP is using $.ajax in his second call.

Collectives™ on Stack Overflow

Using JQuery, AJAX and PHP

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related