maddisoncr
asked on
callback on submit issue
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 :
As i say, everything is working fine.. i literally, just want to display the alert, the second the redirect has been acomplished
thanks
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");
});
}
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
}
}
As i say, everything is working fine.. i literally, just want to display the alert, the second the redirect has been acomplished
thanks
ASKER
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 ?
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 ?
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>
ASKER
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
this then fires
i then have your code in a function but i'm not sure how it ties together
or how it's called.. or whether i should submit
sorry for being a little slow here and thanks for the help
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'});
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();
}
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
});
});
or how it's called.. or whether i should submit
$('#refreshForm').submit();
sorry for being a little slow here and thanks for the help
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
Remove what you added to display the message on the server side