Here is the fiddle that I am working on, I referred this example.
require(["dijit/form/ToggleButton", "dojo/domReady!"], function(ToggleButton){
new ToggleButton({
showLabel: true,
checked: false,
onChange: function(val){
this.set('label',val);
alert("function 1");
},
label: "Start"
}, "programmatic");
});
Here, I did not understand where val is passed from.
How can I toggle the label as "Start" and "Stop"?
How can I do alert('function 1') when Start button is clicked and
alert('function 2') when Stop is clicked? I plan to have different functionalities.
Your onChange event handler returns a boolean if the togglebutton is checked/toggled or not. So you could easily write an if like this:
onChange: function(val) {
if (val) {
this.set('label', 'Stop');
alert('function 1');
} else {
this.set('label', 'Start');
alert('function 2');
}
}
If you want to seperate both in other functions you could override the onChange event handler each time, but I think it's easier if you just do something like this:
onChange: function(val) {
if (val) {
this.function1();
} else {
this.function2();
}
},
function1: function() {
this.set('label', 'Stop');
alert("function1");
},
function2: function() {
this.set('label', 'Start');
alert("function2");
},
I also updated your JSFiddle.
Related
I am using the jquery-resizable plugin, and I need to inject some code as soon as users stop dragging the splitter. As soon as I add the onDragEnd event, I am not able to drag the handles anymore! I am using the onDragEnd function as listed on Git. Any idea why I am not able to catch that event?
onDragEnd: function () {
alert();
return false;
});
Fiddle: https://jsfiddle.net/mvg0vdm8/2/
Plugin: https://github.com/RickStrahl/jquery-resizable
You have a syntax error, try this:
onDragEnd: function () {
alert();
return false;
}
Complete script (from your fiddle):
$(document).ready(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
onDragEnd: function () {
alert();
return false;
}
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false,
onDragEnd: function () {
alert();
return false;
}
});
});
I want to do Lock/Unlock icon button by using Renderer. If clicking the button, it will show message box yes/no to confirm. If click Yes, it should call SubmitValue function. The problem is it cannot call javascript SubmitValue function. How do I call function when click Yes confirm box?
Renderer.js
var renderLock = function (value, p, record) {
if (JSON.parse(value))
{
return '<img src="Images/icon/lock.png" >';
}
else
{
return '<img src="Images/icon/unlock.png" >';
}
}
Common.js
var GetGrid_LockButton = function (Active, FieldId, FieldName, Grid_Name, URL) {
return {
menuDisabled: true
, sortable: false
, hidden: Permit_No_Del
, text: 'Lock'
, renderer: renderLock
, align: 'center'
, xtype: 'actioncolumn'
, dataIndex: 'IS_LOCK'
, width: 45
, listeners: {
click: function () {
Ext.MessageBox.confirm('confirm?', function (btn) {
if (btn == "yes") {
SubmitValue(URL, { id: rec.get(FieldId) }, "Ext.getCmp('" + Grid_Name + "').getStore().load();", "Yes");
}
});
}
}
};
}
Thank you in advance.
I think you are possibly having problems with scope, notice the 'this' keyword added as the last param in the modified version of your confirm call below
Ext.MessageBox.confirm('confirm?', function (btn) {
if (btn == "yes") {
SubmitValue(URL, { id: rec.get(FieldId) }, "Ext.getCmp('" + Grid_Name + "').getStore().load();", "Yes");
}
},this);
By default, the scope in a confirm call is defaulted to the browser window object and so I imagine at that level your SubmitValue function is not accessible.
I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the dialog
$('#theDialog').dialog({
width: 400,
height: "auto",
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#theDialog').remove();
$('body').find('#theDialog').destroy();
},
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
},
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
});
return false;
}
And here's a snippet showing how I'm calling it:
if(CheckFormDataChanged() {
var changeTitle = "Data has been changed";
var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
var changeContinue = "Yes, continue without saving";
var changeCancel = "No, let me save";
if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
if (obj) obj.click();
return true;
}
}
What's wrong with my function (or the call)?
UPDATE: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
var def = new $.Deferred();
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the button array for the dialog
var buttonArray = [];
buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
if (!suppressCancel) {
buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
}
//create the dialog
$('#theDialog').dialog({
... dialog options ...
close: function (event, ui) { $('body').find('#theDialog').remove(); },
buttons: buttonArray
});
return def.promise();
}
And the usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
.done(function () { if (obj) obj.click(); return true; })
.fail(function () { return false; });
Just to give you some context, obj is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the fail() function.
Your curly braces are off:
[{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
}
}, {
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
As you have it, you only have one object in your buttons array.
I can't tell yet why the button doesn't display EDIT, ah, yes I can, there's a missing curly brace.
What I can tell you that your return lines simply won't work.
The dialog box gets displayed, your function returns immediately, and processing continues, so the click callback return values are completely ignored.
What you can do instead is return a promise:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
var def = $.Deferred();
...
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
def.resolve();
}
},
{ // ah - here's your button bug - a missing brace
text: cancelText,
click: function () {
$(this).dialog('close');
def.reject();
}
}
...
return def.promise();
}
with usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
.done(function() {
// continue was clicked
}).fail(function() {
// cancel was clicked
});
I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?
I have a JavaScript function that I'm passing an argument to, that opens a jQueryUI Dialog. I want the dialog to have either one or two buttons, based on the value of the argument. How should I do this?
So far I've tried:
function foo(hasFile) {
$('#dialog').dialog({
buttons: {
Close: function() { $(this).dialog('close'); },
if (hasFile)
"Download": // do something
}
});
}
and
function foo(hasFile) {
$('#dialog').dialog({
buttons:
if (hasFile)
{
"Download": // do something
Close: function() { $(this).dialog('close'); }
}
else
{
Close: function() { $(this).dialog('close'); }
}
});
}
both of which have thoroughly broken my page.
buttons is a JavaScript literal object. You could do something like this:
function foo(hasFile) {
var buttons = {
Close: function() { $(this).dialog('close'); }
};
if (hasFile) {
buttons.Download = function(){
// Do something.
};
}
$('#dialog').dialog({
buttons: buttons
});
}
A general way to do that is like this:
foo.dialog({
// ...
buttons: (function() {
function CloseHandler() {
// close ...
};
function DownloadHandler() {
// download ...
};
return condition ?
{ "Download": DownloadHandler, "Close": CloseHandler } :
{ "Close": CloseHandler };
})(),
// ...
});
The idea is that you create a function where you can make decisions, and then return the result you decide upon.