I made a jQuery plugin where one of the properties needing to be passed is a multi-dimensional object, each requiring three properties. Problem is, I don't know how to send more than two. I have provided an example to show the current effect and the needed effect:
What I currently do:
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: {
"Yes": function() { /*some operation*/ }
}
});
What I need to do:
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: {
"Yes": function() { /*some operation*/ } : true
}
});
In order to show it's a special type of button (internally, the plugin would do something with the third value).
How is this achievable?
In this case, "Yes" is not a property ... it is a key and the function is the value. You need to add another key/value pair. Try ...
buttons: {
"Yes": function() { /*some operation*/ },
"Special" : true
}
Then you can check to see if Special exists and has the value of true.
You can put whatever operations before the closes.
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: [{
"Yes": function () {
$(this).dialog("close");
}
}, {
"No": function () {
$(this).dialog("close");
}
}, {
"Maybe": function () {
$(this).dialog("close");
}
}]
});
Related
I have a method to ask the user to edit the text,
swal({
text: "Edit your Task",
content: {
element: "input",
attributes: {
value: data,
}
},
buttons:{
cancel: {
text: 'Cancel',
value: 'cancel'
},
edit:{
text: 'Edit',
value: 'edit'
}
}
}).then((value)=>{
console.log(value);
})
This is my code, now how to get the updated input text when the user clicks the Ok button
take a look at the Doc , https://sweetalert.js.org/guides/ at ajax requests, you need to search before ask here
I want to hide the destructiveText property conditionally, is that possible? So, say there is a variable called showDelete. I want to show destructiveText to show only when showDelete = true. Is it possible to conditionally exclude it from the json?
$ionicActionSheet.show({
buttons: [
{ text: 'Share' },
{ text: 'Report'},
],
destructiveText: 'Delete', //I want to hide this delete element when showDelete is false
titleText: 'Actions',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
...
Define your config object outside of the function call, then you can modify properties using conditionals as well as use methods like angular.extend()
var opts = {
buttons: [
{ text: 'Share' },
{ text: 'Report'},
],
titleText: 'Actions',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
}
}
if(showDelete){
opts.destructiveText = 'Delete';
}
$ionicActionSheet.show(opts);
I have a jquery dialog box that I wish to add an additional button to dynamically when a condition is met.
I set the dialog box on page load as follows
$("#confirmT").dialog({
autoOpen: false,
open: function() {
pullResources(cat, id);
},
autoResize:true,
width: 800,
modal: true,
title: 'Select Resources',
buttons: {
Cancel: function() {$(this).dialog( "close" );}},
close: function() {
}
});
Then when a condition is true I want it to add another button to allow the user to add something to the database. This is what I have so far (from the jQuery ui website but nothing happens. No errors are produced, just nothing.
if ($sub == 1)
{
?>
<script type = 'javascript'>
function addbuttons()
{
// Setter
$( "#confirmT" ).dialog( "option", "buttons",
[
{
text: "Ok",
click: function() {
//do something
}
}
]
);
}
addbuttons();</script>
<?php
}
Any help would be greatly appreciated.
Thanks
Try this out:- http://jsfiddle.net/uvep1fnc/
Add the button initially and based on the condition just call out the javascript function to hide the button.
JS:-
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
width: 500,
modal: true,
buttons: [{
text: "Delete all items",
class: "aditya",
click: function () {
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
function foo() {
$("#dialog-confirm").closest(".ui-dialog").find(".aditya").hide();
}
foo();
});
I Try to get data from jquery dialog box. I got it at first time. but next time data is same
this is my code
window.$('<div align="center" style="width:100%;height:100%;"><iframe id="ictdg" src="item_new_cat.php?itty='+itty+'" width="100%" height="100%" frameborder="0"></iframe></div>')
.dialog({
modal: true,
width: 400,
height: 250,
title: 'New Category Registration',
buttons: [{
text: "Save and Close",
click: function(){
var nwcg=$('#ictdg').contents().find('#nwct').val();
alert(nwcg); // This Data Not Refress ???
$(this).dialog("close");
}
}]
});
Try putting the functionality in your button click to an outside function, instead of:
buttons: [{
text: "Save and Close",
click: function(){
var nwcg=$('#ictdg').contents().find('#nwct').val();
alert(nwcg); // This Data Not Refress ???
$(this).dialog("close");
}
}]
try:
function getValue(){
var nwcg=$('#ictdg').contents().find('#nwct').val();
alert(nwcg); // This Data Not Refress ???
$(this).dialog("close");
}
and
buttons: [{
text: "Save and Close",
click: getValue
}]
I think what happens is when you initialise the dialog with the inline function it runs once and always retruns the same value.
How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.
I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?
code:
function DisplayCommonDialog(url, title, height, width) {
HideDialogs();
var dialogButtons = [{
text: "Save",
click: function () {
...
}
}
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
if (title.indexOf("Delete") >= 0) {
dialogButtons = [{
text: "OK",
click: function () {
...
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
}
if (popUpDialog != null) {
$("#").dialog("option", {
width: width,
height: height,
title: title,
open: function () {
...
},
close: function () {
...
},
buttons: dialogButtons
});
...
}
else {
popUpDialog = $("#").dialog({
width: width,
height: height,
autoResize: true,
modal: true,
title: title,
open: function () {
...
},
close: function () {
...
},
overlay:
{
opacity: 0.5,
background: "black"
},
position: ['center', 'center'],
buttons: dialogButtons
});
}
}
to add css class in dialog buttons, just use the button button property "class" :
$("#").dialog({
buttons: [{
"text":'your button name',
"click": $.noop,
"class": 'your-css-class1 your-css-class2'
}]
})
the property "class" in each declared button will be inserted when creating dialog.
Hope this help.
similare question about button style in dialog available here
http://jqueryui.com/themeroller/
or
How to style different hover colors for jquery dialog buttons
or how to change jquery dialog buttons
findout the CSS class being applied to the button using firebug and then override it in your css