Develop Reference

How to stay fancy box popup sometime after click on the browser back button

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

Page becomes unresponsive after closing a modal

I am creating a system for hotel management that manages guests and checkins.
I am having trouble with the response time of my modals.
I have a cancel button inside the modal which closes the modal BUT DOESN'T reload the page. Here's what I got in the cancel button:
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close');
jQuery(".ui-widget-overlay").dialog().dialog('close');
});
Here's the problem:
When the modal appears (by clicking another button), I click cancel and the code above is to be executed. I did this numerous times (Open modal and cancel) and the page became unresponsive. You have to wait minutes before it closes the modal after doing it for over 5 times. You can't even close the tab of the browser.
Any ideas would be very much welcome. Thank you.
PS.
I uploaded the system to the web for you to see.
http://greenenergiesllc.com/temp
Login: joel
Password: 1234
PHP file that creates some of my modals: https://www.dropbox.com/s/azi51w0pzp69kgh/checkin.php
Code snippet on how I create a modal:
jQuery( "#ex4").dialog({
height: 'auto',
width: 450,
modal: true,
closeOnEscape: false,
open: function(event, ui) {
jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}, position: ["center", 100],
resizable: false
});
EDIT:
This is what I've done so far. I solved the DOM problem of creating too many objects by adding .remove after the close call.
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close').remove();
jQuery(".ui-widget-overlay").dialog().dialog('close').remove;
});
However, after closing the modal for the first time, it won't open for the second time and I got this error.
--> UPDATE: Using remove won't bring the modal back when called. I am completely confused now what to do. I need to remove those DOM elements when called by using .remove() but I need to bring them back when called.
Uncaught TypeError: Cannot call method '_focusTabbable' of undefined

Dont need to use like that way. Try
$(".ui-dialog").dialog( "close" );
$("#cancel").click(function(event) {
event.preventDefault();
$(".ui-dialog").dialog( "close" );
$(".ui-widget-overlay").dialog('close');
});

It's not appear to be a problem with the close function.
When you click on link, the modal appears. In this moment, you create one modal in the DOM. See:
If you click many times, you have created many others modals in the DOM. See:
The problem is in your function that trigger this modal. With many HTML in your DOM, more slower the "close" function will be.

After button postback (Server side) jquery dialog moves to top of page

I've got a jquery dialog that opens up. On it are some server side drop down lists that have AutoPostback set to true because they cascade and fill other drop down lists after a postback. I maintain keeping my dialog open after a server side post back by making use of a hidden field and setting it to 1 if I need to keep the dialog open or 0 if I want to close it.
Heres the jquery test to see hidden field value:
if ($("#MainContent_hdnOpenContactCompany").val() === "1") {
$("#dialogContactCompany").dialog("open");
} else {
$("#dialogContactCompany").hide();
}
So my issue is not that I do not have the dialog open, my issue is when Im scrolled down a page and I open a dialog, the minute I do a postback the dialog moves to to the top of the page. So the user cannot see it unless he / she scrolls to the top.
I tried adding this, (http://www.cleancode.co.nz/blog/240/jquery-dialog-position-problem-web-form-postback), but I believe the author has a set width...but this did not work for me.
//Company dialog
var pos = new Array();
pos[0] = ($(window).width() - 880) / 2 +
parseInt(theForm.elements['__SCROLLPOSITIONX'].value);
pos[1] = 100 + parseInt(theForm.elements['__SCROLLPOSITIONY'].value);
$("#dialogContactCompany").hide();
$("#dialogContactCompany").dialog({
autoOpen: false,
appendTo: "form:first",
position: pos,
width: 880,
height: 'auto',
modal: true,
open: function (event, ui) {
$('#dialogContactCompany').css('overflow', 'hidden'); //this line does the actual hiding
},
close: function (event, ui) {
//if someone x's out (Closes the dialog) we better make sure we
//set the hidden field to 0 so that the dialog doesn't open up again on post back
$("#MainContent_hdnOpenContactCompany").val("0");
}
});
Mainly the pos information to maintain a position but that too does not work. How can I fix this?

Finally got this we had to use document.scroll.
Here is a great article: http://jadendreamer.wordpress.com/2013/04/24/jquery-tutorial-scroll-ui-dialog-boxes-with-the-page-as-it-scrolls/

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)

How to implement jQuery cookies on this code

I just wrote this code to use a slide to toggle a box as hidden/displayed using a button:
jQuery("#button").click(function () {
jQuery('#box').slideToggle('fast');
});
I want to implement cookies on this to remember if the box was hidden or visible. Can someone guide me with this?

There is a jQuery Cookie plugin available, which will make reading and writing to and from cookies a lot easier and more convenient. Here is an example:
// if the slider is visible, set the cookie slider value to true
$.cookie('slider', 'visible', { expires: 7, path: '/' });
To read the value, use the following as an example:
var sliderVisible = $.cookie('slider');
More information can be found on the jQuery Cookies Plugin Site.

I just got it working. I made two buttons so that there is different button on each state (i.e closed and open)
jQuery('#button_open').hide(); //initially we keep the open button hidden
// this code defines what happens when we click the close button
jQuery('#button_close').click(function () {
jQuery(this).hide(); //this hides the close button as the box is now closed
jQuery('#box').slideUp('fast'); //hides the box
jQuery('#button_open').show(); //shows the open button
jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
return false;
});
// this code defines what happens when we click the open button
jQuery("#button_open").click(function () {
jQuery(this).hide(); //hides the open button as the box is now open
jQuery('#box').slideDown('fast'); //shows the box
jQuery('#button_close').show(); //shows the close button
jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
return false;
});
//and now the magical part comes in. this code checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.
if(jQuery.cookie("openclose") == "closed") {
jQuery("#button_close").hide();
jQuery("#button_open").show();
jQuery('#box').hide();
};