Question

I’m building a website which has a page that users can add content to, and they can rearrange the divs to whichever position and size they want. I’d like to have a save button which saves the current position of each div; however, I don’t want the page to refresh each time (I’m also going to have an auto-save, which will have to save the information in the background).

I can’t figure out how to post the data to the server though, without causing the page to reload. I figure I need some kind of AJAX request, but can’t find anything that tells me how to do that (all the AJAX examples I can find seem to be about reading data from the server). I think I’m just starting to go round in circles now, but I can’t get my head around this at all – I know it’s probably not a hard thing to do, but I keep getting confused by the different examples.

So, first of all, is this the best way to do it? And, if so, can someone point me to a straightforward example of posting data via AJAX? I’m already using jQuery, so can use that for the Ajax as well.

Thanks.

Answer 1

Super simple AJAX with jQuery:

$.ajax({
    url: '/save-the-stuff-url',
    type: 'POST',
    data: {
        // information about your divs, etc.
        'foo' : 'bar'
    },
    success: function(response) {
        // if the AJAX call completes successfully, this function will get called.
        alert('POST successful!');
    }
});

Give it a shot!