We Keep Coding

Delay a jquery plugin by seconds, scroll y or exit intent

Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!

use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);

I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1

MVC Jquery unresponsive after partial update

On my page I have a button for delete and that triggers a Jquery event for posting showing a dialog first and on continue it passes on the controller and action.
That works fine. Here is the jquery code:
$('#deleteMaintor-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$('#aniWait').show();
$.post(deleteLinkObj[0].href, function (data) { //Post to action
$('#Tor').html(data);
$('#aniWait').hide();
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(document).on('click', '#btnDeleteMaintor', function (e) {
deleteLinkObj = $(this); //for future use
$('#deleteMaintor-dialog').dialog('open');
return false; // prevents the default behaviour
});
The problem is that after this, none of the jquery events on the controles are fired anymore.
Why not?
I guess this has to do with the Success part of the $.Post?

I found the solution:
All the controls that were not working anymore were not anchored to the document, so I did that and now it is working fine.

Jquery UI Dialog + Jquery Repeats its Functions when Cancelled

please help me on this
Q1: When i clicked the Cancel Button, all the functions seems to repeat calling itself, and I only encounter this in IE
my HTML
<button class="btnCaller">diag caller 1</button>
<button type="button" class="btnCaller">diag caller 2</button >
<table id="diagMenu" style="display:none">
<tr><td>
<input id="anyField"></input>
<button id="cmdInsertNewProject">Ok</button >
<button id="cmdCancelNewProject">Cancel</button >
</td></tr>
</table>
my JS
$(document).ready(function() {
$('.btnCaller').click(function() {
fnAddNewProject()
AddNewProject_ShowUI()
})
});
function fnAddNewProject() {
$('#diagMenu').dialog({
autoOpen: false,
width: 650,
maxHeight: 1000,
maxWidth: 600,
modal: true,
resizable: false,
title: "Insert New Project",
position: "center"
})
$('#btnRun').click(function() {
alert("do other stuff")
})
$('#cmdInsertNewProject').live('click', function() {
InsertNewProject();
})
$('#cmdCancelNewProject').live('click', function() {
$('#diagMenu').dialog('close');
})
}
function InsertNewProject() {
if ($('#anyField').val() == '') {
alert("Fill up field to continue") //dont close the dialog
return false
} else {
//reset and exit
$('#anyField').val('')
$('#diagMenu').dialog('close');
}
}
function AddNewProject_ShowUI() {
$('#diagMenu').dialog('open');
}
i have this on jsFiddle
http://jsfiddle.net/aeris/Qn9HE/

There is a problem with how you're registering the event handlers. The click event handlers should be added only once, so this can be done in ready() method.
Also what ever you are doing in fnAddNewProject() should be done only once, not on every click so you can move the function call to ready()
You can see it working here.

Change
.live('click',
to
.click(
and that should fix your problems, I think.
EDIT:
according to http://api.jquery.com/live/, it appears that the .live() command is deprecated. Try using .on() instead.

So, as it has already been pointed out, the way you are registering your handler with the dialog is causing it to be reregistered every time the event happens. As a result, you get the popup repeatedly (because of the new registration every single time).
With that said, you can make use of jQueryUI's dialog's buttons property to attach your buttons (and the corresponding functions) to your dialog and not have to worry about all this event registration. I didn't complete it, but I updated your example here (you'll note - it's a lot more simple). Please note the "buttons" property that is part of the dialog.
$('#diagMenu').dialog({
autoOpen: false,
width: 650,
maxHeight: 1000,
maxWidth: 600,
modal: true,
resizable: false,
title: "Insert New Project",
position: "center",
buttons: {
"OK": function() {
InsertNewProject();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog("close");
}
});

Page Refreshes before jQuery dialog is closed

I created a function that replaces the window.alert function with my own function that utilizes jquery.dialog. The problem is that in some functions I call that function and reload the page right afterwards. It is supposed to refresh it when user clicks "OK", but it is reloading the page by itself before I even click "OK".
Here's an example of call sequence in a function:
function UpdateCertSucccess(result) {
customAlert("Hello World");
window.location.href = "./SomePage.aspx";
}
And here's my defined customAlert()
function customAlert(message) {
if (!isOpen) {
$('#error-message-dialog').dialog({
autoOpen: false, bgiframe: true, position: ['center', 100], modal: true, zIndex: '6000', title: 'R+L Carriers Message', width: 475, height: 250,
buttons: {
"OK": function () {
$(this).dialog("close");
isOpen = false;
}
}
});
var elements = message.split("|");
$('#spMessage').text(elements[0]);
$('#spCode').text(elements[1]);
$('#spTime').text(elements[2]);
$('#spServer').text(elements[3]);
$('#error-message-dialog').dialog('open');
isOpen = true;
}
else {
$('#spMessage').append("<br /><br />");
$('#spMessage').append(message);
}
return false;
};
What could be causing the page reload before I close the dialog and how can I fix it?
Thanks!

remove 'window.location.href = "./SomePage.aspx";' from 'UpdateCertSucccess()' function and place it in the function call after Ok click (ok click callback function where you closing the dialog box)

Only browser popups (alert, confirm...) can suspend the execution of a function. You can't achieve the same effect yourself, so you'll need to improve your code, add an "onclose" callback option or something.

jQuery UI Dialog Box - does not open after being closed

I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks

You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.

I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.

I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.

For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});

<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>

This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.

$(this).dialog('destroy');
works!

.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs

I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.

The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.