Question

Here’s my Javascript:

<script type="text/javascript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '.error_box_wrapper',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
    }; 
    // bind form using 'ajaxForm' 
    $('#edit_group_form').ajaxForm(options); 
}); 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    return true; 
}  
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {  
    alert("Success!");
} 
</script>

I’m using the Jquery form plugin, after the form is submitted, I would like a div on page to refresh.

Answer 1

Update the HTML in your div with ID ‘myDiv’:

function showResponse(responseText, statusText, xhr, $form)  {  
    alert("Success!");
    $('#myDiv').html('YAY!');
} 

EDIT

In order to clarify my response based on comments, you should do something like this to refresh the data in the div:

var $newData = $(document.createElement('div'))
.append(
    $(document.createElement('div'))
        .append("First Name: "+results.User.first_name)
)
.append(
    $(document.createElement('div'))
        .append("Last Name: "+results.User.last_name)
);

$('#DivName').html($newData);

This creates a new HTML element with data based on a fake results object. You will have to tweak your code based on how you return data from your ajax call, but this should give you an idea of how to update the data without refreshing the whole page.