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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •