[jQuery] change html in realtime

[Jaynesh]

Hello

I have this script

<div id = "add">
Add as friend
</div>

<script>
jQuery("#add").click(function () {
    $.ajax({
    type: "POST",
    url: "data.php",
        });
});

 </script>

When the div is clicked in it, it will proccess data.php in real-time and add some data into the database.
I want to do a few things.

1) Check if the data has been added into the database successfully.
2) Change the div contents in real-time if it has been a success.
3) Add a new div notifying the user of the success.

How would I go about doing this?

[AussieJohn]

1) Check if the data has been added into the database successfully.
2) Change the div contents in real-time if it has been a success.
3) Add a new div notifying the user of the success.

How would I go about doing this?

You will need to add a success handler to the jQuery Ajax configuration options, e.g.

$.ajax({
  url: 'data.php',
  success: function( data ) {
    //do something with the data
  }
});

Let's say data.php does some stuff and then sends you back a JSON or XML document - whatever it is you return should get passed back in to the "data" variable. You can then do stuff with that.

[Jaynesh]

Hi, thank you for your response.

How would I modify/add new using 'success:'

I'm new to javascript, sorry.

[AussieJohn]

If you're very new to JavaScript, it's probably a good idea to find some tutorials to read up on and get a good grip on the base language before diving headfirst in to jQuery.

To answer your question though:

Let's say your data variable that you returned has a propery called "content", you could inject that into the "add" div with something like this:

$("#add").html(data.content);