SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax - How refresh <DIV> after submit

    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
    Code:
     <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

    Code:
    //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


    Code:
    $(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;
    
    	});
    });

  2. #2
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This function works nicely except it's based on an interval, how can I adapt it so it only fires once.

    Code:
    $(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.
    });

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by everclear View Post
    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

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •