Develop Reference

Two close events in Fancybox

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!

jQuery dialog remembers previously typed text in <input> field

I know that there are several questions which are similar, but none have worked for me.
I'll start by explaining how the jQuery Dialog is invoked. I have a page, where there is a button which is used to invoke the dialog:
<input type="button" class="..." value="..." onclick="forwardToEmail();"/>
On the same page I also have the following hidden div:
<div title="..." id="SendToemailDialog" style="display:none>
<p>...</p>
<input type="text" name="Email" id="SendToemail" />
</div>
The function forwardToEmail:
function forwardToEmail() {
//$('#SendToemail').val(''); --> Does not solve the problem
$('#SendToemailDialog').dialog({
resizable: false,
draggable: false,
height: 200,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
var email = $('#SendToemail').val();
//POST request removed to make example simpler
$('<div title="Information">Sent to: ' + email + ' </div>').dialog({
resizable: false,
draggable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
//Another thing tried to solve the problem wihtout luck
$('#SendToemailDialog').dialog("destroy");
}
});
return false;
}
The problem:
Whenever the button is clicked, the dialog pops up and allows the user to enter an e-mail. That's all good. Now, when the button is clicked subsequently the dialog pops up again as expected with an empty textbox allowing the user to send to a different e-mail address. This looks fine.
However, when OK is pressed it has actually sent an e-mail to the previously entered e-mail. The previous value of the textbox is not being overwriten by the new value.
Even if I do the following: $('#SendToemail').val('') after sending the e-mail, or before sending the e-mail a second time, it does not work because when you enter a value in the textbox the second time it will now remember the previous value as just "" (empty string).
I don't understand why it is insisting on using the previous value. If I refresh the page then it's OK the first time, but the second time the same problem will occur.
What I have tried:
As also hinted in the code as comments, I have tried to clear the textbox before the dialog is opened, and I have also tried various ways to destroy the dialog upon closing the dialog. Without luck.
I'm suspecting it has something to do with the way the hidden div is used to show the textbox. The code is not mine I'm just trying to debug it to fix the error.

jQuery UI Dialog display only one time on page

I am using jQuery UI Dialog on the homepage with auto open set to true so it displays the popup as soon as the user comes to the website. here the development site
http://dev.startingpointnh.org/
As you can see the dialog box work perfectly but I just want to show it only once. Currently every time the user comes back to the homepage or reloads the page, the popup displays again.
I am wondering if there is way to display it one time once the close this message button or esc key is pressed like this site does
http://www.janedoe.org/
Any advise is appreciated.
Thanks

Store that information in your cookies. Check out some more details here.
Basically, add a variable that is stored as true when the user exits the dialog at the close function. Then store the variable:
document.cookie = "hasSeen: true"
Then on the page load, read the cookie:
var hasSeen = document.cookie
And set your autoOpen variable to that cookie:
if(hasSeen) {
$("#openDialog").dialog({
autoOpen: false
});
}
That'll do it!

Thanks Guys appreciate it. I have added a cookie like below and works perfectly when close this message button is clicked. but its still shows when the esc key or the x button at the top is clicked. How to reference these two also
<script type="text/javascript">
jQuery(document).ready(function(){
if( document.cookie.indexOf( "showOnce" ) < 0 ) {
jQuery('#dialog').dialog({
modal: true,
width: 740,
resizable: true,
buttons: {
"Close This Message": function() {
jQuery( this ).dialog( "close" );
document.cookie = "showOnce=true;";
}
}
});
}
});

How to hide a jquery dialog button on dialog load?

Can someone please help me with hiding/disabling a button on jQuery dialog box?
Scenario: On button click I am opening a dialog box with 'Add' and 'Update' button.
Inside the dialog I have 2 text box containing date and message.Both will populate data if data already present in database else they will be blank allowing user to add data.
Now, If text box has pre-populated data(message exist in db) I have to hide Add button as user can only update the message.I tried few tricks which I got from stackoverflow but none of them is working as I am opening dialog box on button click so I guess I am creating button dynamically and I cannot hide them on fly.
I also tried giving an id to dialog button and hiding/disabling it using below code:
$('#id').hide();
$('#id').attr('disabled','disabled');
I looked into the below fiddle which is exactly what I want but If I adopt this then I have to make a lot of code change. So, was wondering if anyone can provide me an easy solution.
[http://jsfiddle.net/kkh2a/1/]
Thanks in advance.
$('#dialog-form').dialog({width:350,height:300,
resizable:false,
modal:true,
closeOnEscape: true,
draggable:false,
show:{effect:"fade"},
buttons:{
Add:{
text:'Add',
id:'AddMsg',
click:function(){
}},
Update:function(){
},
Cancel:function(){
$(this).dialog("close");
}
}});

Try this:
$('#dialog-form').dialog({
...
buttons : {...},
open : function() {
$('#dialog-form')
.dialog('widget')
.find('div.ui-dialog-buttonpane div.ui-dialog-buttonset button')
.eq(0)
.button('disable');
}
});

Hy all,
I use this way:
$("#myDivForLoadingDialog").dialog({
modal: true,
resizable: false,
height: "auto",
draggable: false,
closeOnEscape: false,
open: function (event, ui) {
$("#myDivForLoadingDialog").prev().hide();
}
})
without setting button in the option it does not show any button inside
set closeOnEscape: false to avoid your loading message been closed by "esc" button
in the opencallback hide alle the title box (and the close button it has inside).
I prefer to avoid drag, resize and all features not needed by loading message.
it works with jQuery 1.11.1 (and maybe with all previous version)

jQuery dialog box does not pop up

I have a dialog box that is supposed to pop up if the user is not logged in, and presses the "vote up" link on this page: http://www.problemio.com
I have some JavaScript here: problemio.com/js/problemio.js and I declare that popup in the global variables like this:
var $dialog = $('#loginpopup')
.dialog({
autoOpen: false,
title: 'Login Dialog'
});
var $problemId = $('#theProblemId', '#loginpopup');
$("#newprofile").click(function ()
{
$("#login_div").hide();
$("#newprofileform").show();
});
but not exactly sure if the #newprofile code is right, or how to make it global, or whether it can't be global. This confusion stems from me being kind of new at this.
The JavaScript console in Chrome does not show any errors relevant to this, which is even more confusing.
Any ideas on what I might be doing wrong?
Thanks!!

Try using
$("#loginpopup").dialog();
A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by
default. If you want to reuse a dialog, the easiest way is to disable
the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')
jQuery UI Dialog

I'm a bit confused, not sure if your question is complete. However, you have autoOpen: false set on the dialog, so you have to manually open it with:
$("#loginpopup").dialog("open");
in your "vote up" click handler.