I want to override javascript confirm() with jquery UI custom dialog so i can use it like this:
<form action="http://google.com">
<input onClick="return confirm('go Google?')" id="nupp" value="nupp"/>
</form>
I have already overrode it but the thing is that i cant get it functioning like original one. I know i cant make it 100% work like original, but whats the closest thing i can make?
They say that i might be able to do it with deferred objects or with callback.
Right now i have managed to make it functioning only with submit button and one form on page. If i got two forms or something else it wont work. I might be able to make it recognize buttons and what form goes with what submit button. Code is here:
window.confirm = function(c) {
$(this).submit(function(e){
e.preventDefault()
});
$('#overrideAlert').text(c).dialog({
resizable:false,
autoOpen:true,
modal:true,
dialogClass: "alert",
title:'Teade',
draggable:false,
closeOnEscape:false,
buttons: {
"Ok" : {
id: "okay",
text: "Ok",
click: function(){
}
},
"Cancle" : {
id: "cancle",
text: "Cancle",
click: function(){
$(this).dialog('close');
}
}
}
});
};
But now im thinking that i must to something like this (it is broken, just trying to look into it):
window.confirm = function(c) {
var dfd = $.Deferred();
$('#overrideAlert').text(c).dialog({
resizable:false,
autoOpen:true,
modal:true,
dialogClass: "alert",
title:'Teade',
draggable:false,
closeOnEscape:false,
buttons: {
"Ok" : {
id: "okay",
text: "Ok",
click: function(d){
$(this).dialog('close');
var a = 1;
console.log(a);
dfd.resolve();
}
},
"Cancle" : {
id: "cancle",
text: "Cancle",
click: function(){
$(this).dialog('close');
var a = 0;
console.log(a);
dfd.reject();
}
}
}
});
console.log(dfd);
return dfd.promise();
};
$.when( confirm('hey') ).then(
function() {
console.log("true")
},
function(d) {
console.log("false")
});
Related
This is my code. I am trying to stop the clicked tab from loading until i get a response from the dialog box. Also if i click cancel, i wan to return to the previously selected tab. currently the way i have it setup it creates a loop (which i broke with my lame code).
As seen in my jsfiddle example the code does stop. However, you will notice in the backround that the tab does change to the clicked one, so if you click cancel the backround will flash. i am trying to avoid that.
Thanks.
My Fiddle
//
var runOnceDammit;
$(document).ready(function() {
$(".hideT").button();
$("#tabs").tabs();
$("#tabs").tabs("disable", "#tabs-4");
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(event, ui) {
if (runOnceDammit == true) {
runOnceDammit = false;
return;
}
var active = $("#tabs").tabs("option", "active");
var dialResults = $.when(showDialog());
dialResults.done(function(data) {
if (data) {
$('.ms-formtable').appendTo(ui.newPanel);
if (ui.newPanel.is("#tabs-2")) {
//do stuff
} else if (ui.newPanel.is("#tabs-3")) {
//do stuff
} else if (ui.newPanel.is("#tabs-1")) {
//do stuff
}
return;
} else {
ui.newTab.blur(); //trying to remove higlight from tab
runOnceDammit = true
$("#tabs").tabs({
active: active
}); //activate previous tab
return;
}
});
//return;
});
}); //End DocReady!
//
//
function showDialog() {
var dfd = $.Deferred();
var results;
$('#dialog').dialog({
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [{
text: 'Confirm',
icons: {
primary: "ui-icon-check"
},
click: function() {
results = true;
$(this).dialog('close');
}
}, {
text: 'Cancel',
icons: {
primary: "ui-icon-cancel"
},
click: function() {
results = false;
$(this).dialog('close');
}
}],
close: function(event, ui) {
dfd.resolve(results);
}
});
return dfd.promise()
}
Consider the following:
<div class="section" id="section-1">
Tab 1
</div>
<div class="section" id="section-2">
<a name="myTab-1"></a>
</div>
<script>
$("#myTab-1").click(function(event){
event.preventDefault();
// Do a thing
return true;
});
</script>
This jQuery code will bind an anonymous function to the click event. The function takes a JavaScript Event Object as an attribute. Events have some methods to them, such as, .preventDefault(). This allows you to interrupt the default event and execute your own code. Using return true will return the default behavior after your code has been run.
I answered a similar question: confirm form submit with jquery UI
I found it better to resolve with the result. It seems that .resove() will work out better this way when it comes to the .done() code.
Working example: https://jsfiddle.net/Twisty/e2djqx08/
The key, I think, was to assign the active tab properly in your cancellation code.
JavaScript
function showDialog() {
var dfd = $.Deferred();
var results;
$('#dialog').dialog({
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [{
text: 'Confirm',
icons: {
primary: "ui-icon-check"
},
click: function() {
$(this).dialog('close');
dfd.resolve(true);
}
}, {
text: 'Cancel',
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
dfd.resolve(false);
}
}]
});
return dfd.promise();
}
$(function() {
$("#tabs").tabs().tabs("disable", 3);
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(e, ui) {
e.preventDefault();
console.log("EVENT: Prevent Default");
var self = $(this);
var revertToTab = ui.oldTab;
var revertToPanel = ui.oldPanel;
var sendTo = ui.newTab;
var sendToPanel = ui.newPanel;
console.log("EVENT: When Dialog is closed.");
$.when(showDialog()).done(function(data) {
if (data) {
console.log("INFO: Dialog Confirmed.");
$('.ms-formtable').appendTo(ui.newPanel);
if (self.is("#tabs-2")) {
//do stuff
} else if (self.is("#tabs-3")) {
//do stuff
} else if (self.is("#tabs-1")) {
//do stuff
}
return;
} else {
console.log("INFO: Dialog Cancelled");
self.blur();
$("#tabs").tabs("option", "active", revertToTab);
return false;
}
});
});
});
In my tests, I continued to find the active tab panel loading while the dialog was active. This did not happen when I used $("#tabs").tabs("option", "active", revertToTab);.
Hope that helps.
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
Hi I have a popup window control what I'm trying todo is get it to continue the click event if the user chooses the yes button. How do you continue the click event for the 'yes' button, I'm trying to make it return true but it doesn't continue for the click it just return false.
<script type="text/javascript">
$(document).ready(function() {
$('.delete-question').click(function(e) {
ret = false;
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
this.close();
ret = true;
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return ret;
})
});
</script>
You can't do it directly, but you can emit the click event once it is needed, e.g. something like this (not tested):
<script type="text/javascript">
// global flag to track the popup state
var popupReturn = false;
$(document).ready(function() {
$('.delete-question').click(function(e) {
// when true (after Yes click only) go on returning true
if (popupReturn) {
popupReturn = false;
return true;
}
else {
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
// set global flag to true
popupReturn = true;
// emit click event where it knows that popupReturn is true
$(_this).click();
this.close();
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return false;
}
})
});
</script>
You can't return from asynchronous event like in your case, because your "modal" is not really modal in sense that it doesn't pause code execution until use clicks a button.
This is where callback come handy. I would wrap the modal code into helper plugin and use it like this:
$.fn.confirmable = function(options) {
options = $.extend({
close: $.noop,
dismiss: $.noop
}, options);
this.each(function() {
$(this).popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function() {
this.close();
options.close();
}
}, {
text: "No",
click: function() {
this.close();
options.dismiss();
}
}]
});
});
};
$('.delete-question').confirmable({
close: function() {
// ok pressed do something
},
dismiss: function() {
// cancel pressed
}
});
It means that your workflow needs to transform to asynchronous callback/promise-based.
I´m trying to do an replacement for the javascript confirm(). I have found the jquery dialog() function that can be fully customized. The problem is that i cant make it return true or false.
Here is my code:
$('#delBox').dialog(
{ autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro',
buttons: {
"Ok": function () {
return true;
}, "Cancelar": function () {
$(this).dialog("close");
return false;
}
},
open: function () {
var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')");
buttonsSet.attr("class", "ui-button ui-state-default");
$('.ui-dialog-titlebar-close span').empty();
$('.ui-dialog-buttonset').find("button:contains('Ok')").button({
text: false,
icons: {
primary: 'ui-icon-ok'
}
});
$('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({
text: false,
icons: {
primary: 'ui-icon-cancel'
}
});
}
});
This only return an object before any option selected:
function deletar() {
alert($('#delBox').dialog('open'));
}
jQueryUI dialog boxes can't return a true or false as they're shown on top of other content but without blocking execution.
The best you can do is:
make the box modal so that it hides the other content
supply callbacks to be used depending on which option is chosen.
For extra bonus points, you could create a $.Deferred() promise object and return that when you show the dialog. You can then resolve or reject that promise in the button event handlers.
This would give you clean separation between showing the dialog box, and performing the actions subsequently triggered by it:
function showDialog() {
var def = $.Deferred();
// create and/or show the dialog box here
// but in "OK" do 'def.resolve()'
// and in "cancel" do 'def.reject()'
return def.promise();
}
showDialog().done(function() {
// they pressed OK
}).fail(function() {
// the pressed Cancel
});
// NB: execution will continue here immediately - you shouldn't do
// anything else now - any subsequent operations need to be
// started in the above callbacks.
The first answer is fine - I thought I'd just add a bit of code showing how you can return the button that was clicked:
function ShowYesNoMessage(title, message) {
var def = $.Deferred();
$("#infoMessage").html(message);
$("#dialog_infoMessage").dialog({
modal: true,
title: title,
buttons: {
Yes: function () {
$("#infoMessage").html("");
$(this).dialog("close");
def.resolve("Yes");
},
No: function () {
$("#infoMessage").html("");
$(this).dialog("close");
def.resolve("No");
}
}
});
return def.promise();
}
$.when(ShowYesNoMessage("Are you sure", message)).then(
function(status) {
if (status == "Yes") {
//do the next step
}
}
);
Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D
I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.
$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});
jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});
You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.