I tried to put a textarea inside a dialog box and what I want is to get the value of that textarea if "ok" is click but I can't get the value. What might be the problem?
$(document).on('click', '#open', function () {
var txt = $('#txt').val();
$('#break-diag').dialog({
modal: true,
title: 'Dialog',
show: {
effect: "scale",
duration: 200
},
resizable: false,
buttons: [{
text: "ok",
click: function () {
console.log(txt);
}
}]
});
});
#break-diag{
display:none;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="open">Open Dialog</button>
<div id="break-diag">
<textarea id="txt"></textarea>
</div>
You are capturing the textarea value on click of open; which would be empty during this event.
The value should be captured on click of Ok
click: function () {
var txt = $('#txt').val();
console.log(txt);
}
You're trying to get the text when the dialogue opens. There's no text there, yet.
$(document).on('click', '#open', function () {
$('#break-diag').dialog({
modal: true,
title: 'Dialog',
show: {
effect: "scale",
duration: 200
},
resizable: false,
buttons: [{
text: "ok",
click: function () {
var txt = $('#txt').val();
console.log(txt);
}
}]
});
});
#break-diag{
display:none;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="open">Open Dialog</button>
<div id="break-diag">
<textarea id="txt"></textarea>
</div>
$(document).on('click', '#open', function () {
$('#break-diag').dialog({
modal: true,
title: 'Dialog',
show: {
effect: "scale",
duration: 200
},
resizable: false,
buttons: [{
text: "ok",
click: function () {
var text= $('#txt').val();
alert(text);
}
}]
});
});
You set the CSS style display:none with #break-diag DIV.
so how can you imagine that anything can be display.
so when you click on the button, display:none property should be removed from #break-diag DIV.
Related
I would like to know if there is a way I can open the dialog box with the buttons disabled (grayed out).
$("#battleWindow").dialog({//open battling window
title: "Battle!",
closeOnEscape: false,
modal: true,
width: 500,
buttons:[{
text: "Cast", //creates the button
click: function(){
$('#battleLog').text("You cast cure!");
}
},
{
text: "Item",//creates the botton
click: function(){
$('#battleLog').text("You use a potion!");
}
},
{
text: "Flee",//creates the botton
click: function(){
$(this).dialog("close");
}
}]
});
Yes you can disable buttons by adding disabled:true, to the button(s) properties as you can see from the example below.
$(function() {
$("#battleWindow").dialog({ //open battling window
title: "Battle!",
closeOnEscape: false,
modal: true,
width: 500,
buttons: [{
text: "Cast", //creates the button
disabled: true,
click: function() {
$('#battleLog').text("You cast cure!");
}
},
{
text: "Item", //creates the botton
click: function() {
$('#battleLog').text("You use a potion!");
}
},
{
text: "Flee", //creates the botton
click: function() {
$(this).dialog("close");
}
}
]
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="battleWindow"></div>
<hr/>
<div id="battleLog">Log</div>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:
window.confirm = function (message_confirm) {
$(document.createElement('div'))
.attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
.html(message_confirm)
.dialog({
buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: { effect: "fade", duration: 300 },
});
};
This works in that once this script is run, calling a regular confirm shows the jQueryUI dialog, however, the YES selection does not work. I have an ajax call like below:
if (confirm("Are you sure you want to delete this user?"))
{
alert("test");
//ajax call
}
return false;
And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?
Thank you.
you could add a callback parameter to the function
window.confirm = function (message_confirm, ok_callback)
fire it on YES
buttons: { YES: function () { ok_callback(); }}
and go on later like
confirm("message", function(){
alert('smth');
});
Because the dialog is asynchronous you can use a deferred approach:
window.confirm = function (message_confirm) {
var defer = $.Deferred();
$('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
.dialog({
buttons: {
YES: function () {
defer.resolve("yes");
$(this).attr('yesno', true);
$(this).dialog('close');
}, NO: function () {
defer.resolve("no");
$(this).attr('yesno', false);
$(this).dialog('close');
}
},
close: function () {
if ($(this).attr('yesno') === undefined) {
defer.resolve("no");
}
$(this).remove();
},
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: {effect: "fade", duration: 300}
});
return defer.promise();
};
$(function () {
confirm("Are you sure you want to delete this user?").then(function(yesno) {
console.log(yesno);
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Try something like below. It worked for me.
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete user": function() {
alert("test");
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
</head>
<body>
<div id="dialog-confirm" title="Please confirm">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>
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 have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.
I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.
Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.
Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
The problem is that the property name readOnly is case sentitive.
Code using prop instead of attr:
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: {
effect: 'fade',
duration: 400
},
buttons: [{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").prop("readOnly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
}, {
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}]
});
}
The problem was that I was making the actions before closing the dialog.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});