Ajax - How refresh <DIV> after submit

[everclear]

Hi all,

I'm trying to figure out how to refresh the page DIV after a successful form insert into my MySQL database. I'm

using jquery along with the ajaxForm plugin (<script src="http://malsup.github.com/jquery.form.js"></script>).

I'm unsure where I should be inserting this part of the code into my submit function and whether there any problems

with it. I'm a novice so this concept is rather overwhelming. If you could please help it would be much appreciated.

Other similar example;
http://stackoverflow.com/questions/8...v-after-submit


Submit Form

 <form method="post" name="form" id="formSearch">       
        <label>First Name:</label><input id="First_Name" name="First_Name" type="text" />
        <br /> 
        <label>Last Name:</label><input id="Last_Name" name="Last_Name" type="text" />
        <br /> 
        <label>Email Address:</label><input id="Email_Address" name="Email_Address" type="text" />
        <br /> 
        <label>Telephone Number:</label><input id="Telephone_Number" name="Telephone_Number" type="text" 

/>
        <br /> 
        <label>Postal Address:</label><input id="Postal_Address" name="Postal_Address" type="text" />
          
        <select id="Contact_Group" name="Contact_Group">
        <option value="">Select Group</option>
        <option value="Ungrouped">Ungrouped</option>
        <option value="Friends">Friends</option>
        <option value="Family">Family</option>
        <option value="Colleagues">Colleagues</option>
        </select>

Current code as it stands now

//Sumbit form
$(function() {
$(".contact").click(function() {
var First_Name = $("#First_Name").val();
var Last_Name = $("#Last_Name").val();
var Email_Address = $("#Email_Address").val();
var Telephone_Number = $("#Telephone_Number").val();
var Postal_Address = $("#Postal_Address").val();
var Contact_Group = $("#Contact_Group").val();
	
var dataString = 'First_Name='+ First_Name + '&Last_Name=' + Last_Name + '&Email_Address=' + 

Email_Address + '&Telephone_Number=' + Telephone_Number + '&Postal_Address=' + Postal_Address + 

'&Contact_Group=' + Contact_Group;
	
if(First_Name=='' || Last_Name=='' || Email_Address=='' || Telephone_Number=='' || Postal_Address=='' || 

Contact_Group=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "php/new_contact.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();

//Newly added
$('#First_Name').val('');
$('#Last_Name').val('');
$('#Email_Address').val('');
$('#Telephone_Number').val('');
$('#Postal_Address').val('');
$('#Contact_Group').val('');

}
});
}
return false;
});
});

Code to be inserted

$(document).ready(function() {
	$("#formSearch").submit(function() {
		var options = {
			/* target:"#divResult", */

			success: function(html) {
				$("#txtSummary").replaceWith($('#txtSummary', $(html)));
			},

			url: "http://localhost/example/comp333assn1/php/group_list.php?

q=all_contacts"
		}

		$(this).ajax(options);
		return false;

	});
});

[everclear]

This function works nicely except it's based on an interval, how can I adapt it so it only fires once.

$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#txtSummary').load('http://localhost/example/comp333assn1/php/group_list.php?q=all_contacts')
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});

[Pullo]

This function works nicely except it's based on an interval, how can I adapt it so it only fires once.

You could use setTimeout instead of setInterval

setTimeout(function() {$('#txtSummary').load('http://localhost/example/comp333assn1/php/group_list.php?q=all_contacts')}, 3000);