jQuery selector undefined for dynamic table elements with custom ID

My app uses UploadiFive to provide a means for users to select files for uploading. Each file selection fires the following routine which creates a table row and appends it to a table on the selected tab.

Code:

---

function AddFile(file){

    // Get the active tab's id
    var activeTab = $("#Div").tabs("option", "active");

    var tbl = "";

    // Determine which table to append to
    if (activeTab === 1) {

        // Get the table of on tab
        tbl = $("#SE_table");

    } else if (activeTab === 2) {

        tbl = $("#SC_table");

    } else if (activeTab === 3) {

        tbl = $("#SI_table");

    } else {

        tbl = $("#RI_table");
    }

    // Create Table row element
    var tblrow = document.createElement('tr');

    // Set table row attributes
    tblrow.setAttribute('id', file + '-row');

    // Create cell for file name input
    var tblcellInput = document.createElement('td');

    // Create textbox for input
    var tblInput = document.createElement('input');

    // Set attributes for the input textbox
    tblInput.setAttribute('type', 'text');
    tblInput.setAttribute('id', file + '-textbox');
    tblInput.setAttribute('value', file);

    // Append textbox to cell
    tblcellInput.appendChild(tblInput);

    // Create cell for select box control for Autofill
    var tblcellSelect = document.createElement('td');

    // Create Select box control for Autofill
    var tblselect = document.createElement('select');

    // Set select box attributes
    tblselect.setAttribute('id', file + '-selectbox');
    tblselect.setAttribute('class', 'autocomplete');

    // Append the select box control to it's cell
    tblcellSelect.appendChild(tblselect);

    // Add cells to the table row. Do not add the calendar field if the active tab is SendWire
    if (activeWireTab === 1) {

        // Append the input and select box control to it's cell
        tblrow.appendChild(tblcellInput);
        tblrow.appendChild(tblcellSelect);

    } else {

        // Append the input and select box control to it's cell
        tblrow.appendChild(tblcellInput);
        tblrow.appendChild(tblcellSelect);

        // Create the date cell
        var tblcellDate = document.createElement('td');

        // Create date control
        var tblDate = document.createElement('input');

        // Set date attributes
        tblDate.setAttribute('type', 'text');
        tblDate.setAttribute('id', file + '-date');
        tblDate.setAttribute('class', 'date-pick');
        tblDate.setAttribute('name', file + '-date');

        // Add date control to it's cell
        tblcellDate.appendChild(tblDate);

        // Append the Date cell to the row
        tblrow.appendChild(tblcellDate);

    }

    // create radio and delete button cell
    var tblcellradioDel = document.createElement('td');

    // Create radio input control
    var tblradio = document.createElement('input');

    // Set radio attributes
    tblradio.setAttribute('type', 'radio');
    tblradio.setAttribute('id', file + '-radio');

    // Create image control
    var tbldeleteimg = document.createElement('img');

    // Set delete image attributes
    tbldeleteimg.setAttribute('src', 'images/delete.png');
    tbldeleteimg.setAttribute('class', 'btnDelete');

    // Append both radio and Delete button image to thier cell
    tblcellradioDel.appendChild(tblradio);
    tblcellradioDel.appendChild(tbldeleteimg);

    // Append cells to the table row
    tblrow.appendChild(tblcellInput);

    var curFile = file + "-selectbox";

    alert("The current file is " + curFile);

    // Get the current selectbox's ID
    //        var selectboxID = $('#' + curFile).attr("id");
    //        var selectboxID = $("<select>").attr("id",curFile);
    //        var selectboxID = $("[id='" + curFile + "']");
    var selectboxID = $('#' + curFile);

    alert("The selectboxID is " + selectboxID);

    selectboxID = document.getElementById('#' + curFile);

    alert("Document.getElementById produces " + selectboxID);

    // Apply autofill to the selectbox
    $('.autocomplete', selectboxID).combobox();


    // Turn autocomplete on
    $('.autocomplete').attr('autocomplete','on');


    // Manually select the current file
    $(selectboxID > 'select').attr("value", file);


    $('.date-pick').datepicker(); // or
    $('.date-pick').datepicker("refresh");

    // Append save and delete buttons for the row
    $('.btnDelete').bind('click', DeleteFile);

};

---

Nothing shows in the browser when using the above method to create table rows. However, when I use the following method to create rows they do appear but still cannot be found by jQuery.

Code:

---

var newtr = $("<tr id='" + file + "-row' class='uploadifive-queue'>" +
        "<td><input id='" + file + "-textbox' type='text' value='" + file + "'/></td>" +
        "<td><select id='" + file + "-selectbox' name='" + file + "-selectbox' class='autocomplete'><select/></td>" +
        "<td><input type='text' class='date-pick' name='" + file + "-date' id='" + file + "-date'></td>" +
        "<td><input type='radio' id='" + file + "-radio'/><img src='images/delete.png' class='btnDelete'/></td>" +
        "</tr>");

    tbl.append(newtr);

---

The ID's of the row and input controls in the cells return undefined, length = 0, etc. when attempting to find them using jQuery, $(). For example, $('#' + theFileName). Each select box element must have it's own id as well, since I am referencing it for .autocomplete functionality. I tried the following method which is also returning undefined:

Code:

---

var AutofillboxSelector = $('#' + AutofillboxID).attr("id");

---

I'm using the following js files:

Code:

---

<link href="js/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="js/ui/1.9.1/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script src="js/ui/1.10.3/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/ui/1.10.3/jquery.ui.position.js" type="text/javascript"></script>
    <script src="js/ui/1.10.3/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/ui/1.10.3/jquery.ui.autocomplete.js" type="text/javascript"></script>

---

I believe there's an issue with loading the objects into the DOM even though the elements are visible in Firebug. I have been working on this for a while and Goggling with no solution in sight. :confused: All help will be greatly appreciated. Thanks.

You have 3 equal signs in validations. I am not sure if this appends well (===), you need 2 equal signs.

Quote:

---

Originally Posted by sapator

You have 3 equal signs in validations. I am not sure if this appends well (===), you need 2 equal signs.

---

Nothing wrong with that.

Code:

---

typeof $("#Div").tabs("option", "active");

---

will return "number", so it's correct to be using === to compare the result with integer values.

http://api.jqueryui.com/tabs/#option-active

Ok didn't know that. I'll engulp it to my mind in 3,2,1. Engulped!

Quote:

---

Originally Posted by sapator

Ok didn't know that. I'll engulp it to my mind in 3,2,1. Engulped!

---

http://dochub.io/#javascript/comparison%20operators

The '===' and '!==' comparison operators do strict checking without type conversion. i.e. "1" == 1, but "1" !== 1.