I have a Signup page where after the form's submit I send a AJAX POST. There is no problem at all except that, in the success function, I have an alert function that doesn't wait for the user input, but executes the next function immediately.
This is the SubmitHandler Function:
submitHandler: function (form) {
$("#Sign_Button").attr("disabled", "disabled");
$.ajax({
type: "POST",
url: "ws/users/insert.php",
data: $("#form_sign").serialize(),
success: function (data) {
$("#Sign_Button").removeAttr("disabled");
console.log(data);
if (data.success == 1) {
alert("Success.");
window.location.href='./index.php';
}
}
});
}
Note: I tried with window.location.href and window.location, but in both cases it does the same thing: Popup the alert but also redirect to index.php without waiting, closing the popup alert.
NOTE: Please note that both with Alert and Confirm I have the same behaviour
As was answer in this question, you can pause the code using the alert inside of an if. This will also show only an "OK" button (instead of confirm's "yes/no").
It's important to put the ! before the alert call, as the alert function will return always undefined
this is the part of the code with the alert pausing the code:
if (data.success == 1) {
if(!alert("Success."))
window.location.href='./index.php';
I guess you want to use the confirm dialog instead of alert.
Example usage:
if (window.confirm("Do you really want to leave?")) {
window.open("exit.html", "Thanks for Visiting!");
}
More info here
This is the exact behaviour that is expected.
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
You would need to put the alert on the ./index.php page
Or you can use the dialog element
(function() {
var showBtn = document.getElementById('showBtn');
var myDialog = document.getElementById('myDialog');
showBtn.addEventListener('click', function() {
myDialog.showModal();
});
})();
<dialog id="myDialog">
<form method="dialog">
<div>Success</div>
<button>Ok</button>
</form>
</dialog>
<button id="showBtn">Show</button>
Related
This is my script
<script>
function myAlert() {
alert("You have changed your username, you will be logged out in order changes to be applied");
}
</script>
and this is my button
<input type="submit" value="Save" name="btnPass" class="button" onclick="myAlert()";/>
I wanted to know if there's a way how to add a redirect script when the "okay" button at the alert is click. how can i add it on my script? how can i add it on my script? thanks!
Use confirm instead of alert
The Window.confirm() method displays a modal dialog with an optional message and two buttons, OK and Cancel.
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed) {
window.location.href = 'google.com';
}
return false; // To stop form from submitting
}
#Tushar is correct on using the confirm dialog. Below is a modified version of his answer sure to work
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed == true) {
window.open("path-to-logout script","_self");
}
}
I have a parent window from where I am opening a pop-up window using window.open() and I am monitoring the return of that pop-up window using the window.opener method. I have two queries here:
On my pop-up window, there is a submit button that takes care of the submit functionality of the form and I would like to wait for the submit to complete and close this pop-up window on submission.
When the form is submitted and the pop-up window is closed, I am fetching one of the text box values and using that in my parent window to simulate a search automatically as soon as the pop-up window is closed.
Code:
// parent window handling of information returned from the pop-up window
function HandlePopupResult(value) {
alert("The field value is: " + value);
$("input[value='Search']").trigger("click");
}
//pop-up window handling of information to be returned to the parent window on submission
$("#myForm").submit(function() {
window.opener.HandlePopupResult($("#field").val());
window.close();
});
So my question is: How can I make sure that the submit is completed in order for me to trigger a search click in my parent window and close this pop-up window? Kindly let me know.
I am able to finally send information back to my parent form properly but I just need to make sure that my submit gets completed. Any suggestions on making sure that I fire my events only after the submit is successful?
Cheers.
The new window (popup) you have opened will load a new HTML page on submit (the function of the jQuery submit call is executed before the form is sent to the sever).
You shall do the actions within the new page being loaded in the popup window.
This would be helpful for others in the future. I was able to achieve this myself by just modifying the above code to the code given below:
// parent window handling of information returned from the pop-up window
function HandlePopupResult(value) {
alert("The field value is: " + value);
$("input[value='Search']").trigger("click");
}
Changed the form submission to an AJAX post call to ensure that the form submission has occurred and then carry out my remaining tasks of Handling the result of the pop-up window after which I close the popup window. Works like a charm!
//pop-up window handling of information to be returned to the parent window on submission
$("#myForm").submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
window.opener.HandlePopupResult($("#field").val());
window.close();
}
});
return false;
});
Another way to simplify that some would be using the $.post method instead. Saves a few lines, but achieves the same thing.
$.post( url, data, callback);
$.post( $( "#myForm" ).attr('action'), $( "#myForm" ).serialize(), function(){
window.opener.HandlePopupResult($("#field").val());
window.close();
});
You can either throw that inside of your .submit as a shorthand replacement for the AJAX request, or throw it into its own function that you call from your form.
<form onsubmit="submitHandler(this); return false" name="myForm" id="myForm">
You can also combine it with JSON to add some further functionality/validation before you have it sending things back to your main page, which could be helpful in many situations. As well, it's an awesome way of returning data from your PHP (or whatever you use) scripts back to your JS/jQuery.
$.post( $( "#myForm" ).attr('action'), $( "#myForm" ).serialize(), function(data){
if(data.status == 'failed')
{
// Lets present an error, or whatever we want
}
else
{
// Success! Continue as we were
window.opener.HandlePopupResult($("#field").val());
window.close();
}
}, 'json');
I am using a Ajax to call a MVC controller to submit a form, on a successful call I want to display a dialog box, currently its working the way I want to but the box opens for about a second then closes.
$("#addBtn").click(function () {
$(".container form").ajaxSubmit({ url: '/umbraco/Surface/Basket/AddNow', type: 'post', success: function () { afterSuccess(); } })
});
function afterSuccess() {
BootstrapDialog.alert('Test');
}
Why this is happening?
The problem was not in the Java Script, the problem was in the html of the page. I moved the submit button out side of the form.
This must happen quite a lot! - Hope this helps some else.
I put following script to prevent leave page meanwhile processing steps
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
JQObj.ajax({
type: "POST",
url: "<?php echo $this->url(array('controller'=>'question','action'=>'cleaSess'), 'default', true); ?>",
success: function(data){}
});
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
But every time i get default alert message instead of i set custom alert message,
And i want to call ajax call when end user click on "Leave page" button, but in above script ajax call calls before the click leave button,
Anyone have idea or logic to call ajax if and only if people leave the page.
You can use the "unload" event for sending the AJAX request:
<script type="text/javascript">
window.onbeforeunload = function() {
return "You have attempted to leave this page. "
+ "If you have made any changes to the fields without "
+ "clicking the Save button, your changes will be lost. "
+ "Are you sure you want to exit this page?";
};
window.onunload = function() {
// Ending up here means that the user chose to leave
JQObj.ajax({
type: "POST",
url: "http://your.url.goes/here",
success: function() {}
});
};
</script>
See, also, this short demo.
You shold try something like this:
window.onbeforeunload = displayConfirm;
function displayConfirm()
{
if (confirm("You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"))
{
confirmExit();
}
}
I'm using the jQuery validation plugin for a form contained in a colorbox. I want to close the colorbox and open a second colorbox (saying thank you) if the validation is successful, and then send the user to their original destination.
The script captures the destination of the user and puts it in a variable, then opens a colorbox. Users can exist the colorbox in four different ways, clicking off the bock, clicking the x in the upper right corner, clicking the close button, or a successful submit. Then they continue on their way.
What I need is something like an if submit successful, then open thank you colorbox. What I've tried so far just breaks everything.
$('#lookUpSubmit').unbind('click').click(function(){
$form.submit();
});
$("#lookUpCancel").unbind('click').click(function(){
$.colorbox.close();
});
$(document).bind('cbox_closed', function() {
window.location = destination_url;
});
$form.validate({
submitHandler: function(form) {
form.submit();
},
//some stuff
});
What exactly happens when de submit was successful ? Do you redirect to a page or something ? As far as JavaScript is Client based you have no influence or whatsoever on where the server brings you. You could implement the Thank You Popup on the Webpage which you are redirected after a successful submit !
The information you've provided is a bit vague. What do you mean specifically by "everything breaks"?
What you describe could be caused by a number of things:
Is $form actually defined somewhere, or did you mean to use $(form)?
Have you verified that your unbind/bind chaining is working properly?
$('#lookUpSubmit').unbind('click').click(function(){
alert("B2K Was Here!");
});
Submitting a form will reload the page or redirect to the action url. You need to prevent the submission.
$('#formid').submit(function(e) {
e.preventDefault();
// validate here
if ( valid ) {
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
success: function() {
// open thank you colorbox here
}
});
}
});