SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [jQuery] change html in realtime

    Hello

    I have this script

    HTML Code:
    <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?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    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.

    Code javascript:
    $.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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thank you for your response.

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

    I'm new to javascript, sorry.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code javascript:
    $("#add").html(data.content);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •