Refresh Div content after submitting AJAX form

Question

I have this Ajax code to submit a PHP form. The code works, however, I would like the <div>content to be updated without refreshing the entire page.

The div identifier is # container.

Here is the AJAX code:

$('.accept_friend').submit(function(){
        var data = $(this).serialize();

        $.ajax({
            url: "../accept_friend.php",
            type: "POST",
            data: data,
            success: function( data )
            {
               //here is the code I want to refresh the div(#container)

            },
            error: function(){
                alert('ERROR');
            }
        });

        return false;
    });

Answer 1

You will need to change the DIV property of innerHTML .. with jQuery this is done like this:

$('#container').html('... new content goes here...');

so in your case add the success function:

$('#container').html(data);

or

$('#container').html(data.someAttribute);

depending on the type and structure of the returned data.