Question

I have a jquery/php voting system I’m working on. Once a user clicks a vote button a jquery modal pops open and they must confirm their vote by clicking “Confirm”. This will send an ajax request to update the database and what not. After clicking confirm the modal will close. I would like to be able to update the number of votes dynamically on the page. I can easily grab that data from the mySQL table. My question is how does this get sent back for me to then update the html page dynamically?

Currently the page does nothing, so to the user it doesn’t look like they’ve voted. Ideally I’d want to update the total number of votes and also inject an image that shows what they voted for.

function vote(el, id) {
    $.ajax({
        type: 'POST',
        url: '/path/morepath/',

        dataType: 'json',
        data: {
            'action': 'castVote',
            'vote': id
        },
        success: function (data) {}
    });
    $.modal.close();
}

Answer 1

On the server side, respond to the POST request with a JSON object containing the number of votes and possibly the image path.

Then inside the AJAX callback, data will be that object. Then you can use jQuery to select an element in the DOM and call .text() or .html() on it to update the content.