Dojo: dijit.form.select won't fire "onClick" event the first time clicked - forms

I've been through the Dojo docs as well as the API and tried Google but can't find a solution to my problem, I hope anybody here can help me out.
I'm trying to create a dijit.form.select programmatically (using Dojo 1.4) and connect to the "onClick"-event of the widget.
Here's a part of my code:
var dataSelect = new dijit.form.Select({
id : "myselect",
name : "myselect",
labelAttr: "label",
labelType: "html"
},
"selectid");
dataSelect.addOption({value: "value", label: "first item label"});
dojo.connect(dataSelect, "onClick", function() {
alert("clicked!");
});
What it does: A select-box is created replacing an input-field with the ID "selectid", an option "first item label" is created. Everythings all right until here.
Then I connect to the "onClick"-event of the select, which is supposed to load more options via AJAX (but will just display an alert for testing purposes in this example).
The problem: When I click on the little arrow next to the dropdown, the event is fired (OK). But when I click on the select box itself (the area containing the option), the event is NOT fired the first time I click it (unless I clicked on the arrow before).
When I click the select box a second time (and every time after that), the event will fire!
I've tried to use "onFocus" instead of "onClick" which does work, but then the dropdown will not open when first clicked, even if I use the "openDropDown"-function (which does work when connecting to "onClick"!).
Is it me, did I run into a Dojo bug or is it a strange feature I just don't get?
Any help is appreciated.
Greetings,
Select0r

Here is a cross-browser solution:
var sizeSelect = new dijit.form.Select({
id: "sizeSelect",
name: "state",
options: size,
onChange: function(val) {
dojo.style(dojo.byId("textInput"), {"fontSize":val});
}
}, "sizeSelect");

Try to connect not to the widget itself but to it's dom node:
dojo.connect(dataSelect.domNode, "onclick", function() {
alert("clicked!");
});

Select (which extends _HasDropDown) has fancy code to handle:
mouse down on select widget
mouse move to one of the options
mouse up
Maybe that's canceling the click event.
Maybe you can connect to _loadChildren() instead.

The root cause for this issue is that the _onDropDownMouseDown method of dijit._HasDropDown will manipulate the dom node, which cause the e.target of onmousedown and onmouseup changes for the first initialization.
As we know, the onclick event will be triggered only when the target of onmousedown and onmouseup are the same target.
So in this case, the onclick event is not triggered.
It seems that in Dojo 1.5, the problem still remains.

Related

Unity UI : How to reenable a dropdown after its panel was deactivated and then reactivated?

I am new to Unity, so this is probably a dumb question but here goes:
I have a Unity app; it has several scenes. One of those scenes has a Canvas upon which there are several overlapping Panels. On one of the Panels (PanelA), there is a Dropdown. When the app first runs PanelA is active and on top by default and the dropdown works fine. But after I deactivate PanelA with a C# call to
panelA.SetActive(false);// hides the panel
and then later reactivate it like so:
panelA.SetActive(true); // redisplays the panel
The dropdown no longer displays its list of option when clicked on. The dropdown is still there and still shows its first option "None" and when clicked on the drop-down changes color to indicate that it was touched, but the dropdown does not drop down its list of options.
What am I missing? Why doesn't the dropdown show the list of options?
Thanks
Windows 10 Pro v1709, unity 2017.1.1f1 Personal
My hierarchy is like so, PanelB is the panel that gets set active after PanelA is inactivated:
The script called when the dropdowns option is selected is called like so in Start():
PickDropDown.onValueChanged.AddListener(delegate {
myDropdownValueChangedHandler(PickDropDown);
});
and the called function is:
private void myDropdownValueChangedHandler(Dropdown target) {
Debug.Log("selected: "+target.value);
stage = 0;
currentval = PickDropDown.options [PickDropDown.value].text;
advice.text = "";
title.text = currentval;
if (currentval != NONE) {
advice.text = "You chose to do "+currentval;
nextVal();
}
}
void newVal(){
Debug.Log("newVal " );
PanelA.SetActive (true);
PanelB.SetActive (false);
Debug.Log("options count="+ PickDropDown.options.Count );
}
void nextVal(){
Debug.Log("nextSet " );
PanelB.SetActive (true);
/*** next line shows the answer to my problem - from killer_mech **/
Destroy(PickDropDown.transform.Find("Dropdown List").gameObject);
/***************************************************************/
PanelA.SetActive (false);
}
Yes, this is a bug in unity. I can reproduce this now. This is happening because Unity is creating a game Object called "Dropdown List" inside dropdown which should get destroyed after the closing. But I have noticed a slight delay is happening while destroying(I used editor debug mode for this). When you set the game object active flag as false, it somehow stops the destroy object and results in object Dropdown List staying there so next time when you try to interact with it the object will still present. You will also notice a white box below the Dropdown list after this which indicates the dropdown list still is present.
For the solution what I did was just before I was about to turn my gameobject off I used
Destroy(PickDropDown.transform.Find("Dropdown List").gameObject);
Destroying this object solves the problem. I know this is not a good way to do it, but I checked whether any references to options are destroyed while destroying this which resulted in no error for me. And Dropdown creates new "Dropdown List" gameobject. So it is safe to assume that destroying is OK. Well not sure if any other good solution for this is out there but for now you can use this.
Note: I have tested this bug with Panel, Empty Gameobject as parent and finally with Dropdown
This shows what is happening inside the drop-down. 1) During No popup 2) During Open 3)After setactive off before the child is destroyed.

Fullcalendar add static events using modal duplicates rendered entries

I am trying to add static "Training"-events using a button located in a modal.
So what should happen: Clicking on a day or a range of days in fullcalendar opens a modal. In this modal a button is available to "add a training event".
I am using this modal because it shall be possible to add other events in future. Not just trainings.
The modal opens fine and clicking the button adds a new entry in fullcalendar. Clicking on a further day opens the modal again. If now the "add a training button" is clicked again, the new event is rendered twice. One event is rendered on the day i have clicked in the first step, the second is rendered at the day i have clicked now.
Step1:
clicking a day opens the modal
Step2:
clicking the button in the modal adds a new entry
Step3: repeating step1 on another day
Step4:
clicking the button again renders the event twice
Image: Step1-4
This is my js-code. What i am doing wrong?
var calendar = $(calendar).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function (start, end) {
$('#fc_create').click(); // opens modal
$('.addTraining').on("click", function () { // clicking "add training button"
var eventData;
eventData = {
title: "Training",
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData);
$('.close').click();
})
},
editable: true,
eventLimit: true
});
Every time your "select" callback runs, you are adding another new "click" event handler to the "addTraining" element(s). So if "select" runs 3 times, then the "click" event will be declared 3 times, and when "addTraining" is clicked, 3 versions of the same code will run. Javascript allows multiple handlers for the same event to be attached to an element at once, so you are just building them up each time the "select" callback runs, without ever removing them.
To fix this you can either:
1) Declare the handler once - do it page load, outside your fullCalendar declaration. This will give you a problem in that you won't have direct access to the "start"/"end" values from the select callback. You can get round this by using global variables (yuck) or perhaps putting the values in hidden fields or data- attributes somewhere suitable, and then the click handler can find them each time it runs.
2) Using jQuery's "on" and "off" syntax to first remove the previous handler, and then add a new one, so only one handler is ever active at any one time. See http://api.jquery.com/off/ and http://api.jquery.com/on/ for more details and examples. I can provide a sample if necessary.

TinyMCE capture click button event

is it possible in TinyMCE to know which button was clicked? so I could place specific action on specific event of a specific button.
the buttons here are default control-buttons like bold/italic/select-font not a custom button one.
probably in the init, but I have no idea what to call. I could capture the editor's events but not the button's.
For example, let's say I want a messagebox popped-up everytime bold button is clicked. How to capture the click event of bold button? is creating custom button the only way?
No, you can define an own command and call this command (+ the defualt action) on buttonklick. I do not know if you want a generic way for all buttons. But it is easy to do it just for one or two buttons.
Example: We want to put an action on the bold button.
First we define an own command in one of our own plugins (in the "init : function(ed, url)" -section):
ed.addCommand('my_bold', this.my_bold, this); //calls the function my_bold
Then we overwrite the default action with an the command:
if (ed.controlManager.get('bold')){
ed.controlManager.get('bold').settings.cmd='my_bold_action';
};
Now, we only need to define the function my bold
my_bold: function() {
// exectution of regular command
this.editor.execCommand('Bold');
// now do whatever you like here
...
},
ed.controlManager must be called in "onInit" methode :
ed.onInit.add(function(editor) {
.......
........
if (editor.controlManager.get('bold')){
editor.controlManager.get('bold').settings.cmd='my_bold_action';
};
});

Get Value on a Window with GridPanel using ExtJS

I have a situation here: I have a form field with trigger xtype, what I want to happen on my trigger function is to open a window with a list or grid of data in it. I want to get the value of those data and assign it as the value of my form field with trigger. Can anyone help me solve this problem. Thank you very much.
You have multiple solutions for this.
You can make use Saki's simple message bus to do the communication between extjs components.
You can create an custom event for your trigger field. When user selects a record in your window, fire the event with the selected record.
Inside your onTriggerClick :
Display your window with grid / view for user selection
Inside your Window (on some submit button):
onSubmitClick: function(){
// Get the selected record & fire event
var selected = grid.getSelectionModel().getSelected();
triggerFieldObject.fireEvent('recordSelect',selected);
}
Inside your event processing (Will be on TriggerField):
onRecordSelect: function(record) {
// Now you have access to the selected record.. process it,
// Set the trigger field value etc
this.setValue('Your Value for Trigger Field');
}
Note: This is a skeleton code and not a complete solution. You will need to add your code according to your requirements.

JQgrid:Get the action from the pager

how can i get the action (what button was clicked) when a button is clicked in the pager?(edit, del, add...)
You probably means button of the navigation bar or navigator (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator).
You can implement what you want with at least three different ways:
You define your custom buttons which look like the original add/edit/del buttons (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons) and use {add:false, edit: false, del: off} parameter of navGrid to switch off standard buttons.
You can use addfunc, editfunc and delfunc if you want replace the default add/edit/del functions.
You can use onclickSubmit or afterSubmit or some another supported events (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events) of add/edit/del button to do some additional action on click the buttont or on submit.
You can chose the way which is the best for your requirements.
You can use the grid onPaging event:
This event fires after click on [page
button] and before populating the
data. Also works when the user enters
a new page number in the page input
box (and presses [Enter]) and when the
number of requested records is changed
via the select box. To this event we
pass only one parameter pgButton
(string) which can be -
first,last,prev,next in case of button
click, records in case when a number
of requested rows is changed and user
when the user change the number of the
requested page.requested page.
Also there are beforeRequest and LoadComplete events. Examples that worked for me are as follows:
beforeRequest: function () {
$.blockUI();
//alert("before request");
},
loadComplete: function () {
//alert("load complete");
$.unblockUI();
}