Question

I am working on making a Sharepoint 2007 app look more modern. I am using jQuery actively for that and even though I am no expert, I have learnt enough to know my ways around. Untill I faced this issue today. Here are the bits:

  $(document).ready(function() {
    alert('doc ready');
    var textBox1 = $("#myTest");
    alert(textBox1);

    textBox1.keyup(function() {
        alert('key UP');
    });

    textBox1.live("keyup", function() {
        alert('keykeykey up live');
    });

});

Server-generated html:

    <input name="ctl00$Spwebpartmanager1$g_1f2d211c_a0c3_490d_8890_028afd098cac$ctl00$myTest" type="password" id="ctl00_Spwebpartmanager1_g_1f2d211c_a0c3_490d_8890_028afd098cac_ctl00_myTest" class="gh" />

So the document ready handler fires, the textbox1 variable is not null, but none of the eventhandlers to handle the keyup event ever fire? The mind reels…

Answer 1

I doesn’t work because the id attribute is actaully ctl00_Spwebpartmanager1_g_1f2d211c_a0c3_490d_8890_028afd098cac_ctl00_myTest

try

var textBox1 = $("input[id$='_myTest']");

Here were looking for a html input field with has an id attribute that ends with the string _myTest

In future for your debugging use

alert(textBox1.length)

So that you can whether the jQuery object is empty or not. If the selector doesn’t find anything it will return an empty jQuery object which isn’t null. You can test for whether the selector found anything by making sure that the .length property is positive.