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.
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.
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:
I'm using the following js files:
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.
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);
};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);Code:
var AutofillboxSelector = $('#' + AutofillboxID).attr("id");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>