[ 2 posts ]

StuPlum

  • Username: veearrsix
  • Joined: Wed Feb 11, 2009 1:51 am
  • Posts: 4
  • Offline
  • Profile

Dynamic Autocomplete ComboBox issue - possible scoping probl

Post Posted: Wed Feb 11, 2009 1:57 am
+0-
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
};
};
};

Jenny Donnelly

YUI Developer

  • Username: jenny
  • Joined: Tue Dec 09, 2008 5:00 pm
  • Posts: 58
  • GitHub: jenny
  • Gists: jenny
  • YUI Developer
  • Offline
  • Profile

Re: Dynamic Autocomplete ComboBox issue - possible scoping probl

Post Posted: Thu Feb 19, 2009 1:58 pm
+0-
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
  [ 2 posts ]
Display posts from previous:  Sort by  
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