JQuery/ajax page update help pls

Question

Hi Am new to Jquery/ajax and need help with the final (I think) piece of code. I have a draggable item (JQuery ui.draggable) that when placed in a drop zone updates a mysql table - that works, with this:

    function addlist(param)
{
    $.ajax({
    type: "POST",
    url: "ajax/addtocart.php",
    data: 'img='+encodeURIComponent(param),
    dataType: 'json',
    beforeSend: function(x){$('#ajax-loader').css('visibility','visible');}



    });
}

but what I cannot get it to do is "reload" another page/same page to display the updated results. In simple terms I want to

1. Drag & drop
2. Update the database
3. Show loading gif
4. Display list from DB table with the updated post (i.e. from the drag & drop)

As said before new to Jquery/Ajax but very happy with the PHP/MySQL. Help much appreciated but pleae remember I am a JQuery simpleton - thanks in advance.

Answer 1

I don't know PHP but what you want is addtocart.php to give back some kind of response (echo?) that you will take care of.

$.ajax({
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),
dataType: 'json',
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');

success: function(response){ /* use the response to update your html*/} });

Answer 2

The are many ways of doing it. What I would probably do is have the PHP script output the content that needs to be displayed. This could be done either through JSON (which is basically data encoded in JavaScript syntax) or through raw HTML.

If you were to use raw HTML:

function addlist(param)
{
    $.ajax(
    {
        type: 'POST',
        url: 'ajax/addtocart.php',
        data: 'img=' + encodeURIComponent(param),
        dataType: 'html',
        beforeSend: function()
        {
            $('#ajax-loader').css('visibility','visible');
        },
        success: function(data, status)
        {
            // Process the returned HTML and append it to some part of the page.
            var elements = $(data);
            $('#some-element').append(elements);
        },
        error: function()
        {
            // Handle errors here.
        },
        complete: function()
        {
            // Hide the loading GIF.
        }
    });
}

If using JSON, the process would essentially be the same, except you'd have to construct the new HTML elements yourself in the JavaScript (and the output from the PHP script would have to be encoded using json_encode, obviously). Your success callback might then look like this:

function(data, status)
{
    // Get some properties from the JSON structure and build a list item.
    var item = $('<li />');
    $('<div id="div-1" />').text(data.foo).appendTo(item);
    $('<div id="div-2" />').text(data.bar).appendTo(item);

    // Append the item to some other element that already exists.
    $('#some-element').append(item);
}