I'm working on a modal window, and I want to make the function as reusable as possible. Said that, I want to set a few anchor tags with a class equals to "modal", and when a particular anchor tag is clicked, get its Id and pass it to a function that will execute another function based on the Id that was passed.
This is what I have so far:
// this gets an array with all the elements that have a class equals to "modal"
var anchorTrigger = document.getElementsByClassName('modal');
Then I tried to set the addEventListener for each item in the array by doing this:
var anchorTotal = anchorTrigger.length;
for(var i = 0; i < anchorTotal ; i++){
anchorTrigger.addEventListener('click', fireModal, false);
}
and then run the last function "fireModal" that will open the modal, like so:
function fireModal(){
//some more code here ...
}
My problem is that in the "for" loop, I get an error saying that anchorTrigger.addEvent ... is not a function.
I can tell that the error might be related to the fact that I'm trying to set up the "addEventListener" to an array as oppose to individual elements, but I don't know what I'm supposed to do.
Any help would be greatly appreciated.
anchorTrigger[i].addEventListener...
Related
I want to add a string control on a form during run time when a button is clicked.
What I have tried so far:
Created a form
Added run form method
Added runTimeControl_validate form method
Added button on the form
The button has the following code in its clicked method:
void clicked()
{
FormBuildDesign design = Form.design();
FormBuildGroupControl formBuildGroupControl;
FormStringControl c;
FormControlType fC;
;
// c = addGroup.addControl(FormControlType::String, 'RunTimeControl');
c = ButtonGroup.addControl(fC::String, 'test');
c.label("New control");
formBuildGroupControl = formBuildDesign.control(addGroup.id());
}
I am getting error in the line c = ButtonGroup.addControl(fC::String, 'test');
Error: Enumeration doesn't exist
Firstly, replace fC::String with FormControlType::String.
Secondly, string controls cannot be added to button groups (ButtonGroup control type) - add it to a normal Group instead.
Thirdly, to avoid such issues as missing labels, etc., it makes sense to add element.lock(); before adding the control and element.unlock(); after updating its label. - ignore this.
I have created xml file like below :
//cityState.xml
<Alloy>
<Window id="cityStateMgWin">
<TableView id="cityAndStatesTableView" >
<TableViewRow id="cityStatesRow" ></TableViewRow>
</TableView>
</Window>
//In cityState.js
I am trying to create state rows dynamically with the following code.
for (var i = 0; i < cityAndStatesListJSONData.length; i++) {
$.cityAndStatesTableView.appendRow(Alloy.createController('cityStatesRow', {title : cityAndStatesListJSONData[cityStates].cityState}).getView());
}
When i run the following error will coming please help me
message = "Object is not a constructor (evaluating 'new (require(\"alloy/controllers/\" + name))(args)')";
[ERROR] : stack = "createController\nonload";
is there any mistake to get the ui element from xml file to controller and create dynamic number of rows.
Thanks in advance.
A couple suggestions.
You have underscore available in Alloy
You cannot create a controller based on ID, it needs to be an actual controller.
So... looping through your data is easier this way:
_.each(cityAndStatesListJSONData, function(cityAndState){
});
Next, make a controller cityStatesRow for your row. Should look like this
JS File of this controller:
if ($.args.data.labelProp){
$.myLabel.text = $.args.title;
}
You can do this with as many items as you like, images, labels etc. Whatever you want in the row.
Within the _.each loop you will want to create the controller and pass the data to it:
var controller = Alloy.createController('cityStatesRow', {title : cityAndState.cityState});
And now append it to your TableView
$.cityAndStatesTableView.appendRow(controller.getView());
Here I am using p:autoComplete tag in PrimeFaces 5.1, but I can't remove first highlighted/selected item from the suggestions list. How I can remove this ?
Since your "problem" comes from this particular line,
firstItem.addClass('ui-state-highlight');
What happens here is when the suggestions are ready to show up the script highlights the first item of the list, so in your case you would just "unhighlight" that item.
I have created a small function that would do that on every AutoComplete you have, you can call it in your document.ready or where ever you see suitable:
function removeHighlightedFirstItem() {
var oldAutoCompleteShowSuggestions = PrimeFaces.widget.AutoComplete.prototype.showSuggestions;
PrimeFaces.widget.AutoComplete.prototype.showSuggestions = function(query) {
//calling original ShowSuggestions
oldAutoCompleteShowSuggestions.apply(this, [query]);
//after ShowSuggestions
//remove first item highlight
var firstItem = this.items.eq(0);
firstItem.removeClass('ui-state-highlight');
}
}
The result would look like this:
Note: The feature you are requesting is available for 5.1.5, 5.0.14 and 5.2 by adding the autoHighlight = "false" attribute to the component.
I want to be able to get a reference to the menu object that autocomplete builds, (so I can get the .attr("id") for example), but I'm not very familiar with jQuery/javascript. In the source, I found this:
https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L182
so there is an object flying around, I just can't seem to find how to get hold of it.
So, for example, if I've got an input with an autocomplete bound to it like this:
// input = reference to the input text box on the form
input.autocomplete({
select: function(event, ui) {
// how to get the reference here?
// some things I've tried
// return input.menu
// return input.data("menu")
// and a few others but they didn't work either
}
});
I tried looking at the data object itself, but there were so many options I could spend all day looking at it and still not find what I'm looking for.
You can get the widget's reference by looking into dataset assigned to its root element (input). Then fetching menu property (and its underlying element) is kinda trivial. )
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
... as this within select function refers to the <input> when this function called as an event handler.
A simpler way to do this:
$(this).autocomplete('widget');
It does the same as:
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
It gives the ul list
$(this).autocomplete('widget').attr('id');
I have created a grid in a doGet() function. This grid contains a dynamic number of rows choose by the user. In each rows i have some TextBox. I would like to be able to get all the data inserted by the user on the textboxes once the user clicked on the submit button.
So i give a dynamic ID to each textBox :
app.createTextBox().setName('gridText'+countRow);
countRow ++;
.........
My problem is that I dont know how to dynamicaly access to my TextBox on my submit function.
I tried something like this :
for( i = 0 ; i < countRow ; i++){
var buffer = e.parameter[e.parameter.gridText]+i;
.........
}
based on this : http://productforums.google.com/forum/#!category-topic/apps-script/services/nWN14AQ-9gQ
But it does'nt work... whereas this works :
var buffer = e.parameter.gridText3;
Any idea of what i'm doing wrong ?
Thanks for your help
Try
var buffer = e.parameter['gridText' + i.toString()];