I am trying to write a jQuery dialogue box, when I click on the 'OK' button the data will be sent every time I click on it.
So, I need it to work only once whether I click it many times or once on 'ok' button.
$.dialogue({
class: 'big',
body: html,
yes: {
text: 'ok',
func: function() {
//execute some codes
}, //end function
},
no: {text: 'Cancel'},
});
$.dialogue({
class: 'big',
body: html,
yes: {
text: 'ok',
func: (function() {
var executed = false;
return function () {
if (!executed) {
executed = true;
//execute some codes
}
};
})(), //end function
},
no: {text: 'Cancel'},
});
Related
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
//Page should not go back.
//This is where i want to write code,if the user clicks
No and the back button function should be disabled.
//Only when the user presses Yes,the page will go to
previous.
}
}
]
});
})
I dont know how to handle when the user presses no,i.e.Disable the back button function or event.
Finally i solved the issue.As the event emitted from the backButton is an promise.If I dont need to go back,i just reject that promise.
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
reject()
}
}
]
});
})
Try this way to prevent the back button
this.platform.backButton.subscribeWithPriority(9999, () => {
this.dismiss();
});
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!
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")
});
I have the following jQuery using the noty plugin and plum shopping cart jQuery. The first block of code correctly alerts a yes / no and empties the cart correctly.
The second block of code shows the yes / no message correctly using noty BUT it does not return the true / false so the cart isnt emptied.
Im really new to jQuery so I'm probably missing something obvious ! Any help would be appreciated:
//This works..
emptycart: function () {
if (!confirm('Are you sure you want to empty your cart?')) {
return false;
}
},
//This doesnt work..
emptycart: function () {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{type: 'button green', text: 'Ok', click: function() { return false; } },
{type: 'button pink', text: 'Cancel', click: function() { return true; } }
],
closable: false,
timeout: false
}),
true
);
return false;
},
Well, the plugin is receiving callbacks, so when you use callbacks you must think in a asynchronous way.
/**
* #param {function} onConfirm : Receives true or false as argument, depending on the user choice
*/
emptycart: function (onConfirm) {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{
type: 'button green',
text: 'Ok',
click: function() {
//Do other stuff if you want...
onConfirm(true);
}
},
{
type: 'button pink',
text: 'Cancel',
click: function() {
//Do other stuff if you want...
onConfirm(false);
}
}
],
closable: false,
timeout: false
}), true);
}
Above, you will send a callbackfunction "onConfirm" which will be called when the user clicks on either buttons. The function will receive one boolean argument telling if was a click on Ok or Cancel.
I am using jquery's editable and with submit and cancel I also want to 1 extra button for other functionality... can anyone help?
you have to extend the plugin... do the following changes in the source
onEdit: null,
onSubmit: null,
onPopup: null, //function to be called when you click your custom popup button
onCancel: null,
editClass: null,
submit: null,
popup: null, //your custom popup button
popupBy: 'blur', //blur, change, dbclick, click
cancel: null,
type: 'text',
after that you'll have to define the options like
// popup event
if (opts.popup) {
$('<button/>').appendTo($this)
.html(opts.popup)
.one('mouseup', function () { opts.toNonEditable($(this).parent(), true) });
} else
$this.one(opts.popupBy, function () { opts.toNonEditable($(this), true) })
.children()
.one(opts.popupBy, function () { opts.toNonEditable($(this).parent(), true) });
finally add the following to the source to call user defined functions
// Call User Function
var func = null;
if ($.isFunction(opts.onSubmit) && change == true)
func = opts.onSubmit;
else if ($.isFunction(opts.onCancel) && change == false)
func = opts.onCancel;
else if ($.isFunction(opts.onPopup) && change == true)
func = opts.onPopup;
if everything go fine you can use it as
$('selector').editable({
type: 'select',
options: { 'value1': 'Item 1', 2: 'Item 2', 'Item 3': 'Item 3' },
submit: 'save',
popup:'click to open popup',
cancel: 'cancel',
editClass: 'colored',
onEdit: editFuncion,
onPopup:popupFunction,
onSubmit: submitFuncion
});
function popupFunction() {
// your logic to open popup
}
Disclaimer
i have not tested it so i cannot confirm whether it'll work or not but you'll get the idea