How to get my jQuery AJAX php code to update a div?

Question

I have a jQuery call to some PHP which works fine. What I would like to do is to output the new contents of a particular div right from the php using the echo statement. Is that possible?

Previously I used to return the new contents of the div using JSON encoding like this:

$rows = array();
while($r = mysql_fetch_assoc($result))
{
        $rows[] = $r;
}

echo json_encode($rows);

But now I want to call a PHP function which is used elsewhere to create div contents, and I want that to be the only place where those div contents are made.

Is it possible to do what I am trying?

Thanks!

What do you mean by "PHP function which is used elsewhere to create div elements"? — Gustav Barkefors
– Gustav Barkefors, Commented Oct 13, 2011 at 19:01

Jeff Lambert · Accepted Answer · 2011-10-13 20:00:01Z

1

Yes, this is possible. Remember that the parameter to your jQuery success function contains all of the output from your back-end script. Simply replace the html of the container you want with the contents of the parameter.

PHP (someUrl.php):

echo('<div>Hello World!</div>');

JavaScript:

var YourDataString = '';
$.ajax({
    type: 'GET',
    url: 'someUrl.php',
    data: YourDataString,
    success: function(html) {
        $('#someContainer').html(html);
    }
});

This will put '<div>Hello World</div>' inside of the element with the id: someContainer

Edit

When I have problems (like stuff not appearing) with AJAX requests, it helps me if I visit the page I am calling directly to see what output is being generated. If I don't turn on error reporting and I see nothing but a white screen, then I know there's an error in my PHP and nothing is being output because of it.

You can try turning on error reporting in your script to see if there is an error. If you cannot find one, comment your entire script out and put a single echo('I am here!'); in there and see if that makes it to your page. If it does, then you know that there's an error in your PHP somewhere.

You can also look at your browser's error console to see if your JavaScript is throwing any errors. Try a more simplistic example first if you can't quite wrap your head around it yet. The code above should work.

edited Oct 13, 2011 at 20:00

answered Oct 13, 2011 at 19:02

Jeff Lambert

24.7k4 gold badges72 silver badges98 bronze badges

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

5 Comments

GeekedOut Over a year ago

i think it didn't quite work. In the php, I do echo on everything I want to be seen to the JavaScript in that html variable, but I think nothing is getting displayed.

GeekedOut Over a year ago

Does the diff between sending a get and post request matter here?

Jeff Lambert Over a year ago

If there is an error in your PHP, nothing will be returned back. If you use Firebug you can check the request to see if it gets a 500 server error (or you can try navigating to your PHP file directly)

Jeff Lambert Over a year ago

The difference between GET and POST in this case is (somewhat) semantic. Since you are getting data from the server and you do not change anything, GET is appropriate (unless you are changing something and you havent said anything)

GeekedOut Over a year ago

I see...so using the echo in the PHP does not seem to make any change in the html I want to change. Do you know how to go about debugging this? I do know that I am able to make the query for the items I want, and loop through them and echo them....but after that, I don't know how to make the echo-ed data appear.

David Nguyen · Accepted Answer · 2011-10-13 19:02:04Z

1

You can use jquery.ajax to update content from a php file:

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

answered Oct 13, 2011 at 19:02

David Nguyen

8,5182 gold badges35 silver badges50 bronze badges

Comments

razvancod · Accepted Answer · 2011-10-13 23:04:14Z

0

$rows = array();
while($r = mysql_fetch_assoc($result))
{
        $rows[] = $r;
}

echo json_encode($rows);
die();enter code here

you need to die() or exit

answered Oct 13, 2011 at 23:04

razvancod

211 bronze badge

Collectives™ on Stack Overflow

How to get my jQuery AJAX php code to update a div?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related