How to use $.dialog.confirm() with JQuery's ZLDialog popup dialog handler - javascript

The following page shows all the documentation.
http://www.jqueryscript.net/other/Tiny-Feature-rich-jQuery-Dialog-Popup-Plugin-ZLDialog.html
I have no trouble getting simple (OK) dialogs to work. However, there is no example of a Yes/No dialog and all my attempts to get it work have failed.

As James mentioned in the comment under your post, it would be helpful to have an example of your failed attempt. That said, here is a fiddle showing a basic example with a callback on confirm:
http://jsfiddle.net/iamjpg/avcLrtzd/
$("#demo-dialog-callback").click(function() {
$.dialog({
content: "Dialog with callback",
hideX: true,
drag: false,
lock: false,
closeBack: function() {
$.dialog.message({
content: "Callback content"
});
},
buttons: [{
text: "Click me"
}]
});
});

var myDialog = $.dialog.confirm({
content: "Do you want to continue?"},
function () {
$.dialog.message({
content: "Yes",
timeout:1000
});
myDialog();
}, function () {
$.dialog.message({
content: "No",
timeout:1000
});
myDialog();
});

Related

how to close sweet alert on ajax request completion

I am using Sweet-alert in my angular app.
function GetDataFromServer(url) {
SweetAlert.swal(
{
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
//SweetAlert.swal(
// {
// title: "",
// text: "data loaded",
// });
return response.data;
}
function exception(ex) {
return (ex);
}
}
Req #1 (Main Objective of my this post)
What I am looking for is when the ajax request completes i.e.,
controls enters in the then(), Sweet alert should automatically hide.
Req #2
Also while request processing, I don't want to have the Close pop-up button (Ok button) in the sweet alert.
As per the documentation,showConfirmButton: false should hide it but it's not.
Any help/suggestion highly appreciated.
Thanks.
For automatically hiding the pop-over when it's done, you should set your initial pop-over to a variable so you can access it later. Maybe:
function GetDataFromServer(url) {
SweetAlert.swal({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swal.close()
return response.data;
}
function exception(ex) {
return (ex);
}
}
It's right on: https://t4t5.github.io/sweetalert/ in the methods section near the bottom.
Since you don't have a specific 'way' you want to do hide the ok button and you're just looking for suggestions, you could always just use a little CSS to target it and give it the ol display: none; setup.
You can close current showing sweetalert by using below line of code anywhere you want.
swal.close();
That's it!
You can use the close method over the sweet object see the documentation in down part
https://t4t5.github.io/sweetalert/
swal.close(); --> Close the currently open SweetAlert programmatically.
self.showProgress = function(message) {
swal({ title: message });
swal.showLoading();
};
self.hideProgress = function() {
swal.close();
};
SweetAlert has close method if you check the docs at http://t4t5.github.io/sweetalert/
You can use SweetAlert.close() to close the sweetalert in angular.
If you use swal2 you can close it using Swal.close() from anywhere inside your code for closing it when ajax is complete I think the code below is an easy way:
$(document).ajaxComplete(function () {
Swal.close();
});
swal does not work with sync function (ex. get), you need make call get async
swal({
type: 'warning',
text: 'Please wait.',
showCancelButton: false,
confirmButtonText: "ok",
allowOutsideClick: false,
allowEscapeKey: false
}).then(function (result) {
if (result) {
setTimeout(function () {
$http.get(url)
}, 500);
}
});
if you are using the AngularJS library known as angular-sweetalert then use swal.close(); to close the alert window.
angular-sweetalert is a wrapper on the core sweetalert library package.
Cache the swal() to trigger it later.
function GetDataFromServer(url) {
let swalAlert = SweetAlert.swal; // cache your swal
swalAlert({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swalAlert.close(); // this is what actually allows the close() to work
return response.data;
}
function exception(ex) {
return (ex);
}
}

How do i edit a Javascript / Bootbox/ Bootstrap confirm window?

I have a simple bootbox / javascript confirm window at:
https://www.guard-gate.com/test2/index.html
How do I make the Success button link to google, the Danger button link to yahoo.com and the Click Me button close the box?
How do I change the position of the window to get it in the middle of the page?
You could try something like this for setting the modal in the middle:
var windowHeightCalc = $(window).height() / 2,
modalHeightCalc = $('.modal-content').height();
$('.modal').css({ 'margin-top': [windowHeightCalc - modalHeightCalc, 'px'].join('') });
You don't really need Bootbox for making the modal just use the default Bootstrap modal - http://getbootstrap.com/javascript/#modals
You can modify it and change the links as you wish. To open it simply run:
$('#myModal').modal('show');
and to hide it:
$('#myModal').modal('hide');
In Bootbox you could try using that what the documentation advise you:
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
In the callbacks you could do everything. For JS-redirects you can do:
window.location.href = "http://whatever.com";

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

Ext Js running a function for a Yes No Msg box

This could be a very stupid and obvious answer but I couldn't find any answer to this( a particular example by a user on Sencha Docs also didn't work ,the one in the comments section).
I want to create a popup which will take in yes no or cancel using Ext Js. In ExtJs 3, it is written as
Ext.onReady(function() {
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);
}
});
});
I want to do the same thing in Ext 4.2 but its not working
Ext.onReady(function() {
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.ERROR,
fn: function(btn) {
Ext.Msg.alert('You clicked',btn);
}
});
});
The function doesn't work at all. I tried them on Jsbin and Jsfiddle using SDN but they don't work. Here is the link to the JSBin code if it helps.
It works even with "btn". There is no problem if the local variable for the function "fn" is "btn" or "rec". There may be some other problem in you code. May be missing comma.

Replace javascript confirm by jquery confirm

I use the following code to use default javascript confirm by jquery ui dialogue.
jQuery.extend({
confirm: function(message, title, okAction) {
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
}
});
jQuery.confirm(
"LogOut",
"Do you want to log out",
function() {
});
Now I need to use this same code in a log out action. So that I can replace the javascript confirm in the code.
<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>
The problem I am facing now is, when I replace the confirm with another function and wait for its return value to make the decision, the dialogue box doesn't return the value to a variable. These two functions are executed simultaniously(its showing the alert, but it also get directed to the href target). Is there any way that the method can return a true or false value and hence proceed to the href target.
reference: jQuery Extend,jQuery UI Replacement for alert
related question : js override confirm
I don't know if you could actually do that as the jQuery.dialog function is asynchronous.
You could use a promise library to setup the button click events. But then you cannot simply specify a method in the onclick attribute and have to do it through code
var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise
jsFiddle
jQuery.extend({
confirm: function(message, title, okAction) {
var d = jQuery.Deferred();
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
d.resolve(true);
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
d.resolve(false);
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
return d.promise();
}
});
For more info about jQuery promise library see jQuery reference
Edit: Another way to to set it up: jsFiddle
The problem is that default confirm dialog is synchronus and block the whole browser UI. JQuery dialog is asynchronous and does not block UI (because it needs it to render).
So the answer to your problem is following. You need to change:
buttons: {
"Ok": function() {
window.location = "/future/myhome/head?$event=logout"
},
and
<a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>
Personally, I use confirm more for conditional execution of a function or posting a form...
So, using your example, I'd have made the following small changes:
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
okAction();
},
And then called the Confirm as follows:
onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>

Categories