Develop Reference

Creating a Jquery UI dialog box with disabled buttons

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!

Ext.Net Link Button on Client Side

I have created window on sever side with LinkButton on bottom
<ext:Window runat="server" ID="winIndex" Title="Test">
<AutoLoad Url="index.html" Mode="IFrame" />
<Buttons>
<ext:LinkButton runat="server" ID="btn" Text="Test Button">
<Listeners>
<Click Handler="Ext.msg.alert('Alert','test');" />
</Listeners>
</ext:LinkButton>
</Buttons>
</ext:Window>
i wanted to create this window on client side using javascript this is what i tried
var CreateWindow = function () {
var windowConfig = {
id: "winIndex",
hidden: false,
closeAction: "hide",
title: "Test",
buttons: [
{
id: "btn",
text: "Test Button",
listeners:
{
click:
{
fn: function (el, e) {
Ext.msg.alert('Alert','test');
}
}
}
}
],
autoLoad: {
url: "index.html",
nocache: true,
mode: "iframe",
showMask: true,
triggerEvent: "show",
reloadOnEvent: true
}
}
new Ext.Window(windowConfig)
}
Window rendered perfectly using javascript too except LinkButton. it draws normal button rather than LinkButton but i need link button just like server side ext control. Any help will be appreciated.

From your code snippet I am assuming you are referring to Ext.NET 1.x and Ext JS 3.x.
If so, by default, when using the buttons configuration option for a new Ext.Window, the default component used will be Ext.Buttons.
LinkButtons are a useful extension from Ext.NET, and they have their xtype as netlinkbutton so you would have to explicitly set that, for example:
new Ext.Window({
title: "Test",
height: 300,
width: 300,
buttons: [{
id: "btn",
xtype: 'netlinkbutton',
text: "Test Button",
listeners: {
click: {
fn: function (el, e) {
Ext.Msg.alert('Alert', 'test');
}
}
}
}]
}).show();
Notice the key thing is xtype: netlinkbutton
Hope that helps!
P.S. Note that in Ext.NET 3, the LinkButton is renamed to HyperLinkButton and its xtype is now nethyperlinkbutton.

use netlinkbutton as xtype in ExtJs. netlinkbutton is exactly what LinkButton is in Ext.net

Adding addition buttons to jquery dialog box

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();
});

Passing more than two properties in object

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");
}
}]
});

how to close plugin dialog with tinymce 4.0b3

I'd like to close the dialog within the onclick function of the first button, I've tried running the close() function that I've found on the windowManager object through console.log but it doesn't work.
when I do:
console.log(editor.windowManager);
I see the following output:
Object {windows: Array[1], open: function, alert: function, confirm: function, close: function}
and then I call that close function you see in the output above like so
editor.windowManager.close();
and then I get:
Uncaught TypeError: Cannot call method 'close' of undefined
here is my code
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}]
})
}
});

You can close the popup like so:
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: editor.windowManager.close()
}]
})
}
});
Looking at the provided plugins, the more common way it to assign editor.dom to a var and call close on that, like so:
var win = editor.dom
...
win.close()