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
Related
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 do use datatable where i've been declared some buttons to trigger action based which button user press:
var dpcroles = $('#example_roles').DataTable( {
dom: 'Bfrtip',
"columnDefs": [
{
"targets": [0],
"visible": false
}
],
buttons: [
{
text: 'Add',
id: 'btn_add',
"data-action":'add',
action: function ( e, dt, node, config ) {
$('#modal_action').modal();
}
},
{
id: 'btn_edit',
text: 'Edit',
action: function ( e, dt, node, config ) {
var id = $(e.relatedTarget).data('id');
console.log(id);
$('#model_action').modal(id);
},
enabled: true
},
],
However, how to pass arguments javascript which handles modal opening ?
$('#model_action').on('show.bs.modal', function(e) {
// if button 'edit', do something
.
.
// else if button 'add' do other thing
.
.
.
})
You can set data- attribute for a modal before calling modal() method. For example:
$('#modal_action').data('mode', 'edit');
$('#modal_action').modal();
Then in your event handler, you can retrieve the data. For example:
$('#modal_action').on('show.bs.modal', function(e) {
var $modal = $(this);
var mode = $modal.data('mode');
// if button 'edit', do something
if(mode === 'edit'){
// else if button 'add' do other thing
} else {
}
});
Another solution would be to use two different modals, one for each action.
Please note that you've probably misspelled the name of the modal in your example, it should be either modal_action or model_action.
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'},
});
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.
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.