-
Jul 9th, 2013, 10:52 AM
#1
Thread Starter
Member
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.
-
Jul 24th, 2013, 05:59 PM
#2
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 24th, 2013, 06:59 PM
#3
Re: jQuery selector undefined for dynamic table elements with custom ID
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
-
Jul 25th, 2013, 03:41 PM
#4
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!
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 26th, 2013, 12:47 AM
#5
Re: jQuery selector undefined for dynamic table elements with custom ID
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.
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|