I'm facing problem with my popup ajax contact form because it have only one close event...
My AJAX contact form have two buttons SEND and CANCEL.
When i use SEND button the Sweet alert confirmation show correct message.
But when i close the window by button CANCEL or click outside the window or use X button on the corner the same confirmation message is showing and this is problem
My js code
$('#button').fancybox({
'hideOnContentClick': false,
'afterClose' : function(){
swal({
title: 'Thanks dude!',
text: 'You are awesome!',
type: 'success',
showConfirmButton: false,
timer: '5000'
});
}
});
My ajax call
$.ajax({
url: "ajax_form.php",
post: "POST",
data: $('#contact').serialize(),
dataType: "json"
}); $.fancybox.close();
So when someone hit SEND button $.fancybox.close(); will close the window and Sweet Alert give nice info with great success.
How to add or disable Sweet Alert confirmation when someone use CANCEL button or use other close action?
Thinking in another way to close it, you can try adding a common class or something to the CANCEL, X button and the parent element outside the fancybox. Then with jQuery (or JS), you can define a function that closes it and avoid the ajax call.
For example, add a common class class="preventAjax". Then with jQuery:
$('.preventAjax').click(function() {$.fancybox.close();});
Other than that, you can close it with Css, but I recommend closing it with the commands that the API provides.
Hope that helps!
Related
I have a controller in c# and inside the controller there is a save method. The save method saves/updates data that is submitted by submit button click and javascript. The problem is, if you click on the button multiple time, it should only process the very first click and rest of them should be identified as duplicate submit and should be discarded by controller. How to do this in c# mvc web application?
Disable the button after it's clicked. So it can just be clicked once.
Simple way
when button clicked disabled it then actived again after you got response result from ajax! u can also add loader that make ur web look so cool!
<button id="btnSend" onClick="send()">submit</button>
<script>
btnSend=document.getElementById("btnSend");
function send(){
btnSend.disabled=true;
//set disabled button here
$.ajax({ type: "GET",
url: "http://www.google.de",
async: false,
success : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
},
fail : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
}
});
}
</script>
I would also disable the button on the client side. But you could also check if the submitted data is different from the stored data. If no changes were made you could just return without further saving logic.
Should it be possible to just save the data once? Maybe a redirect to a different view after saving could be a possible solution in special cases.
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 want to show a popup when user click on the close button or back button in browser in checkout page of my site. I have implemented the following code for that ........
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
//window.history.forward();
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
Now everything is working fine. But the final requirement is when user click on the back browser button from the checkout page, the fancy box popup appear and it will stay ~40 seconds then the page redirect to back.
I can't solve this problem. How do I stay the popup when already the page redirecting to click on the back button on browser. Is it possible? Please help me
Have you tried (#user1721135)
Jquery when back button is pressed
I understand is a different event but maybe can help :S.... Also: (#IMRAN ABDUL GHANI) Solution to browser back button click event handling
I am looking to check if a page has been refreshed or closed with jQuery or javascript.
What I have currently is I have some database values that I want to delete if the user either navigates away or refreshes the page.
I am using AJAX calls to delete the values.
Right now, I have the following code:
The handler:
window.beforeunload = cleanUp;
The cleanUp() method:
function cleanUp() {
// Check to see if it's an actual page change.
if(myActualLeave) {
$.ajax({
type: "POST",
url: "/api/cleanup",
data: { id: myLocalId },
success: function (data) {
console.log(myLocalId + " got removed from the database.");
}
});
}
// Reset the flag, so it can be checked again.
myActualLeave = true;
}
Where myActualLeave is a flag that I set to false when AJAX calls are made, so they don't trigger the beforeunload handler.
The problem I am running into is that when I click a link on my page, so for instance a link to Google, the window.beforeunload doesn't trigger. I may have a misunderstanding of this, but I have tried using jQuery's $(window).unload(...); and the onbeforeunload trigger as well.
What should I use to call javascript when:
the user refreshes the page,
when the user navigates away from the page, or
when the user closes the page?
Edit: It came up in a comment that I could use a click() jQuery handler to detect navigating away. I should have made it more specific that I don't mean when the user clicks a link only then I want it to proc. I want it to trigger when they change pages in any way. So if the address bar gets typed in, for instance.
You should try "onbeforeunload" :
window.onbeforeunload
But i think you can't put "active" (ajax call) code in this callback function. All you can do is defining a confirm modal window that will be displayed to the user before leaving like :
Are you sure you want to leave because...
So you should do as #Leeish said : put a code in the .on('click') of the link so it can launch the ajax call before sending to another page.
But for the "refresh" or "close" scenario, you can consider marking your database row as "draft" (or whatever) and if not saved when on the next page, delete the draft line.
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
}
});
}
});