Question

Possible Duplicate:
jQuery variable claiming it's undefined when it has been defined

The problem is that when opening it in firefox and typing a value for input 1 and selecting it, firebug says that the variable phone isn’t defined. I tried defining the variables at the start but it still ceased to work.

This is the jQuery:

$(document).ready(function() {

var phone;  //fix scoping
var phoneid;
var firmware;
var firmwareid;

$("#input1").autocompleteArray(["iPhone 2G","iPhone 3G","iPhone 3GS","iPhone 4","iPhone 4s"],
{   minChars:1,
    matchSubset:1,
    onItemSelect:selectPhone,
    onFindValue:findPhone,
    autoFill:true,
    maxItemsToShow:10,
    selectFirst:true,
});

$("#input2").autocompleteArray(["1.1","1.2","1.3","1.4","1.5"],
{   minChars:1,
    matchSubset:1,
    onItemSelect:selectFirmware,
    onFindValue:findFirmware,
    autoFill:true,
    maxItemsToShow:10,
    selectFirst:true,
    });



function findPhone(li) {
    if( li == null ) return alert("No match!");
    phone = li.selectPhone;
    phoneid = phone.replace("iPhone ","iphone").toLowerCase();
};

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    firmware = li.selectFirmware;
    firmwareid = phone.replace(".","");
    $(".info").hide
    $(phoneid+firmware).show
};

function selectPhone(li) {
    findPhone(li);
}

function selectFirmware(li) {
    findFirmware(li);
}
    });

And this is the HTML:

<div id="formcontainer">
        <input id="input1"/>
        <input id="input2"/>
</div>
<div id="iphone2g11" class="info" style="display:none">iPhone 2G</div>
<div id="iphone2g12" class="info" style="display:none">iPhone 3G</div>
<div id="iphone2g13" class="info" style="display:none">iPhone 3GS</div>
<div id="iphone2g14" class="info" style="display:none">iPhone 4</div>
<div id="iphone2g15" class="info" style="display:none">iPhone 4S</div>

I’m using this plugin for autocomplete http://www.pengoworks.com/workshop/jquery/autocomplete.htm

Answer 1

The problem is in your findFirmware() function, change it to

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    firmware = li.selectFirmware;
    firmwareid = phone.replace(".","");
    $(".info").hide();
    $('#' + phoneid + firmwareid).show(); // This line was messed up
};

There two problems with this line $(phoneid+firmware).show, well four if you count the missing parenthesis and semicolon but…

1. The div your trying to show has an ID, you don’t have # in your selector to select the element by ID
2. firmware contains the unparsed string with the period so phoneid + firmware becomes iphone2g1.2 when your div ID is iphone2g12 thus you needed to use firmwareid in which you parsed it out of.

Fiddle Demo: http://jsfiddle.net/AaNWM/