| Page 1 of 1 | [ 2 posts ] |
|
I am trying to create a list containing a combination of normal input
boxes and autocomplete combo boxes. I have been able to create the input and autocomplete input boxes no problem, but i'm having trouble assigning event handlers to the buttons required for the combobox. I can see that the problem lies within the _toggle function in the for loop from the code sample below, but I don't know how too fix..... Code: for (var i = 0; i < objRes.length; i++) { var _property = objRes[i]; // Create the html elements var _li = document.createElement('li'); _li.className = 'property-list-item'; var _label = document.createElement('label'); _label.setAttribute('for', 'property_item_' + i); _label.appendChild(document.createTextNode(_property.DisplayName + ':')); var _input = document.createElement('input'); _input.setAttribute('type', 'text'); _input.id = 'property_item_' + i; _input.name = _property.Name; _input.value = _property.List.DefaultValue; if (_property.Units != '') { var _units = document.createElement('span'); _units.className = 'property-units'; _units.appendChild(document.createTextNode(_property.Units)); }; if (_property.IsList) { var _button = document.createElement('span'); _button.id = 'property_button_' + i; _button.className = 'autocomplete-toggle'; var _div = document.createElement('div'); _div.id = 'property_container_' + i; _div.className = 'yui-ac-container'; }; if (_property.Example != '') { var _example = document.createElement('span'); _example.className = 'property-example'; _example.appendChild(document.createTextNode(_property.Example)); }; // add elements to the dom _li.appendChild(_label); _li.appendChild(_input); if (_property.Units != '') _li.appendChild(_units); if (_property.IsList) { _li.appendChild(_button); _li.appendChild(_div); }; //if (_property.Example != '') _li.appendChild(_example); _self.properties_list.appendChild(_li); // Instantiate datasource and autocomplete if (_property.IsList) { var _tmpDS = new YAHOO.util.LocalDataSource(_property.List.ListItems); var _tmpAC = new YAHOO.widget.AutoComplete(_input, _div, _tmpDS, _self.config.acConfig( _property.List.IsLocked ? true : false, _property.List.ListItems.length )); _tmpAC._bItemSelected = _tmpAC._elTextbox.value!=''; // fix for leaving initial values intact when using forceSelection=true property try { // try to add toggle buttons to autocomplete controls var _toggleButton = new YAHOO.widget.Button({container:_button}); var _toggle = function(ev) { var tar = Event.getTarget(ev); console.log(tar.id); if(!Dom.hasClass(_button, "open")) { Dom.addClass(_button, "open") }; if(_tmpAC.isContainerOpen()) { // Is open _tmpAC.collapseContainer(); } else { // Is closed _tmpAC.getInputEl().focus(); // Needed to keep widget active setTimeout(function() { // For IE _tmpAC.sendQuery(""); },0); }; }; _toggleButton.on("click", _toggle); _tmpAC.containerCollapseEvent.subscribe(function(){Dom.removeClass(_button, "open")}); } catch(ex) { // Do Nothing }; }; }; |
|
Hi Stuart,
JavaScript has function scope, not block scope, so you are assigning the handler _toggle to the button click event, while _toggle keeps being redefined (including the value held by _button). Try refactoring that handler function to live outside the for loop. Cheers, Jenny |
| Page 1 of 1 | [ 2 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group