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()
Related
I have a Ext.toast and Ext.Msg to be displayed on button click. So on click of button the content of toast and messagebox should be read.
I have applied ariaLabel but its still not readable, tried setting focus and containsFocus as well but still no luck, when I set defaultFocus:1 on messagebox it works for the first time only. Any hints please.
Ext.toast({
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
ariaLabel: 'My Title Data Saved'
});
Ext.Msg.show({
title: 'Invalid search criteria',
msg: 'check',
ariaLabel:'Invalid search criteria check',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
Screen reader to be used - NVDA
Fiddle can be found here
The problem is that attribute aria-labelledby is always set automatically. (and has the higher precedence ariaLabelledBy). I did not find a way to avoid automatic substitution, so I created an override that does this for window instances
Ext.define('Ext.window.WindowAriaOverride', {
override: 'Ext.window.Window',
afterShow: function () {
this.el.dom.setAttribute('aria-labelledby', null)
this.el.dom.setAttribute('aria-label', this.ariaLabel)
}
});
Fiddle
If you will look at the documentation of the Ext.Msg.show, you will not find there any aria* config/param. This config is available only to Ext.window.MessageBox class.
I have changed your fiddle example to force it work, but unfortunately this aria features looks like to be buggy.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Button', {
text: 'toast',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.Toast', {
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
containsFocus: true,
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show();
}
});
Ext.create('Ext.Button', {
text: 'msgbox',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show({
title: 'Invalid search criteria',
cls: 'error-message',
msg: 'yooo',
containsFocus: true,
ariaLabel: 'msg yoo',
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
});
}
});
}
});
fiddle
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.
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 defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});
try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....
handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}
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