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




All help will be greatly appreciated. Thanks.
Reply With Quote
