jQuery variable claiming it's undefined when it has been defined

Question

I'm trying to have two autofilling textboxes, one for a phone model - input1 and one for firmware - input2 on the same page. When both filled I want a div to be shown with the ID input1input2, but when entering a value in input1 it claims the variable for phone is undefined, and when filling in the second it claims phoneid is undefined. Here's the HTML

<div id="formcontainer">
<input id="input1"/>
<input id="input2"/>
</div>
<div id="iphone2g1.1" class="info" style="display:none">iPhone 2G</div>
<div id="iphone2g1.2" class="info" style="display:none">iPhone 3G</div>
<div id="iphone2g1.3" class="info" style="display:none">iPhone 3GS</div>
<div id="iphone2g1.4" class="info" style="display:none">iPhone 4</div>
<div id="iphone2g1.5" class="info" style="display:none">iPhone 4S</div>

jQuery

$("#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!");
    var phone = li.selectPhone;
    var phoneid = phone.replace("iPhone ","iphone").toLowerCase();
};

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

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

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

I'm using this for the autocomplete plugin. The page can be viewed here.

Thanks.

EDIT1 This is now what the jQuery looks like, but it still throws up the same error.

    var phone;
    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);
}

The problem is in the `.` character in id. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — Wojciech Bednarski, Nov 20 '11 at 00:12

score 0 · Answer 1 · answered Nov 20 '11 at 00:13

0

It's probably a scoping problem. Try adding this to the top of your script:

var phone;
var phoneid;

The subsequently omit the var

phone = li.selectPhone;

answered Nov 20 '11 at 00:13

Alex Peattie

26,633
5
50
52

I have added what you've said to the start and also added firmwareid = phone.replace(".",""); and removed the dots from the IDs but it's still claiming its undefined. – Supertod Nov 20 '11 at 00:20

score 0 · Answer 2 · answered Nov 20 '11 at 00:13

0

It's not defined anywhere that's accessible to the findFirmware() function--it's defined as a var in findPhone(), hence local to that function.

Not sure what is intended by things like li.selectFirmware etc. but those will also break.

answered Nov 20 '11 at 00:13

Dave Newton

158,873
26
254
302

@Supertod You can either make it a global, as Alex suggested, or use one of the JavaScript module patterns to isolate it into a namespace. – Dave Newton Nov 20 '11 at 00:16

score 0 · Answer 3 · edited May 23 '17 at 10:24

The problem is in the . character in id.

Basically1, a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers. There is a catch: if the first character is a dash, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.

Which characters are valid in CSS class names/selectors?

score 0 · Accepted Answer · answered Nov 22 '11 at 20:35

The problem is the periods in your div's ID attributes and 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...

The div your trying to show has an ID, you don't have # in your selector to select the element by ID
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/

jQuery variable claiming it's undefined when it has been defined

4 Answers4

Linked

Related