Results 1 to 5 of 5

Thread: jQuery selector undefined for dynamic table elements with custom ID

  1. #1

    Thread Starter
    Member
    Join Date
    Feb 2010
    Location
    DC Metro area
    Posts
    53

    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. All help will be greatly appreciated. Thanks.

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: jQuery selector undefined for dynamic table elements with custom ID

    You have 3 equal signs in validations. I am not sure if this appends well (===), you need 2 equal signs.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: jQuery selector undefined for dynamic table elements with custom ID

    Quote Originally Posted by sapator View Post
    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
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  4. #4
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: jQuery selector undefined for dynamic table elements with custom ID

    Ok didn't know that. I'll engulp it to my mind in 3,2,1. Engulped!
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  5. #5
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: jQuery selector undefined for dynamic table elements with custom ID

    Quote Originally Posted by sapator View Post
    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width