Solved

callback on submit issue

Posted on 2014-02-10
5
318 Views
Last Modified: 2014-02-10
Within my program, when a user adds a new record, they click on a button to insert the record. i then refresh the page and redisplay the record and the user has the view that he is now editing a record as opposed to adding one. this is working fine.

to do this, i call a function which basically reloads the page with the newly inserted id. What i want is to show an alert on the page, which says, you have just inserted a record etc.. this was working fine until i reloaded the page.

i then figured that i could use a callback. this worked, but the callback runs before the redirect and so the user doesnt even see it.

i'm now a bit stuck, because, i can't put the callback anywhere else, because the only place left to put it, is in the submit.. which doesn't have a call back

i hope i've explained this.. i will add the code :

//Show succesful alert
if(('<?php echo $actionType?>') =="Add"){
var alertText = "The Enquiry has been succesfully Inserted !"
var lastInsertedid = response.lastId;
redirectForm("EnquiryShow.php", { enquiryId: lastInsertedid, actionType:'Edit'},function(){
	showAlert("success",alertText,"fieldset");	
});
}

Open in new window



function redirectForm(url,redirectParams, callback){
		var formInput="";
		for (var param in redirectParams) {
			if (redirectParams.hasOwnProperty(param)) {
				formInput = formInput + "<input type='hidden' name='" + param + "' value='" + redirectParams[param] + "'>"
			}
		}
		var form = $("<form id= 'redirectForm' action='" + url + "' method='post'>" + formInput + "</form>");
		$('body').append(form);
				
		$('#redirectForm').submit();
				
		if (callback && typeof(callback) === "function"){
				callback();
				//this is running too late
		}
				
	}

Open in new window


As i say, everything is working fine.. i literally, just want to display the alert, the second the redirect has been acomplished

thanks
0
Comment
Question by:maddisoncr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39847956
It's a bit late but you can do better. The following submit the form silently and reload/refresh the body part of the page.

<script type="text/javascript">
jQuery(function($) { // wait complete page load

var callback = function() { alert("The Enquiry has been succesfully Inserted !"); };

// redirectForm is your form to add new data
$('#redirectForm').submit(function(event) {
     event.preventDefault(); // we don't want to reload the page
     var params = $(this).serializeArray(); // this represent the date in the form
     var action = $(this).attr("action");
     $("body").load(action+" body", params, callback); // submit the form silently and refresh the body the same(?) way it do it realoading the page 
});


});
</script>

Open in new window


Remove what you added to display the message on the server side
0
 

Author Comment

by:maddisoncr
ID: 39848041
thank you for your reply

that makes a lot of sense

the only issue i have is that i am using that redirectform throughout the program and when i start to implement the above, it stops quite a few other bits from working

would this be the only way i could do it ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39848068
would this be the only way i could do it ?

No, you may create a separate page(php script: newScript.php) to just return and only the new row.
So instead posting to the current redirect page, you post to that php script. this php script goal is ONLY (only, nothing else) add the new row to database and return the HMTL for the new line

<script type="text/javascript">
jQuery(function($) { // wait complete page load

var callback = function(newRow) { // your php script send back the HTML for the new row inserted
       $("#yourTableId").append( newRow ); // yourTableId is the ID of your table where to insert the new row at the end
       alert("The Enquiry has been succesfully Inserted !");
};

// redirectForm is your form to add new data
$('#redirectForm').submit(function(event) {
     event.preventDefault(); // we don't want to reload the page
     var params = $(this).serializeArray(); // this represent the date in the form
     var action = $(this).attr("action");
     var method = ($(this).attr("method")=="get")?"get":"post";
     $[method]("newScript.php", params, callback); 
});


});
</script>

Open in new window

0
 

Author Comment

by:maddisoncr
ID: 39848208
Thanks again

I'm trying to get your first approach working and i am being a little slow !

i now call this after an update

refreshForm("EnquiryShow.php", { enquiryId: lastInsertedid, actionType:'Edit'});

Open in new window


this then fires

//refresh form rather than redirect
			function refreshForm(url,refreshParams, callback){
				var formInput="";
				for (var param in refreshParams) {
					if (refreshParams.hasOwnProperty(param)) {
						formInput = formInput + "<input type='hidden' name='" + param + "' value='" + refreshParams[param] + "'>"
					}
				}
				var form = $("<form id= 'refreshForm' action='" + url + "' method='post'>" + formInput + "</form>");
				$('body').append(form);
				$('#refreshForm').submit();
			}

Open in new window



i then have your code in a function but i'm not sure how it ties together

jQuery(function($) { // wait complete page load

				var callback = function() { alert("The Enquiry has been succesfully Inserted !"); };

				// redirectForm is your form to add new data
				$('#refreshForm').submit(function(event) {
					alert('1');
					 event.preventDefault(); // we don't want to reload the page
					 var params = $(this).serializeArray(); // this represent the date in the form
					 var action = $(this).attr("action");
					 $("body").load(action+" body", params, callback); // submit the form silently and refresh the body the same(?) way it do it realoading the page 
				});
			});

Open in new window



or how it's called.. or whether i should submit

$('#refreshForm').submit();

Open in new window


sorry for being a little slow here and thanks for the help
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39848234
don't use your current refreshform function AND my code, refreshform refresh the page, my code does not but both do the same job, here a mix of both :

			function refreshForm(url,refreshParams, callback){
				var callback = function(newRowInserted) { 
                                      $("#yourTableId").append( newRowInserted );                                   
                                      alert("The Enquiry has been succesfully Inserted !");
                                };
				$.post(url, refreshParams, callback);
			}

Open in new window


You can't at the same time submit and not submit
If you want to refresh the best is to receive the HTML new row from the server and insert it in your table.
0

Featured Post

CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question