I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.
If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.
if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
var _row = "<tr id='queue_row_" + items_in_queue + "'>";
_row += "<td>";
_row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
_row += "</td>";
_row += "<td>";
_row += _item;
_row += "</td>";
_row += "</tr>";
document.getElementById("upload_queue").innerHTML += _row;
document.getElementById("upload_image_" + items_in_queue).style.display = "none";
items_in_queue++;
document.getElementById("uploader_holder").innerHTML +=
'<input id="upload_image_' + items_in_queue +
'" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' +
'onchange="add_to_upload_queue()" style="display: inline;" />';
}
Yeah... you're going to want to use appendChild instead of modifying the inner HTML:
var myInput = document.createElement("INPUT");
// do stuff to my input
var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);
That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.
Related
I have to show dynamically checkboxes in a HTML page and get their value from database.
The trick I used is to create the whole table HTML in java and then using AJAX I do this
var div = document.getElementByID("div").innerHTML = htmlCode;
but issue is
in htmlCode variable, the html is like
<table width="100%">
<tr>
<td width="50%">......
but when I check div.innerHTML it shows like
<TABLE width="100%">
<TBODY>
<TR>
<TD width="50%">
<?xml:namespace prefix = ....
Why they become uppercase and why is xml:namaesapce prefix added ?
This causes issue as table is not properly displayed.
Is there any other better way to do this without using innerHTML ?
The code for generation of table is
String html = "<table width=\"100%\">";
for (Iterator it = lookupList.iterator (); it.hasNext ();)
{
HashTree lookupElement = (HashTree) it.next ();
String code = lookupElement.getChildTagValue ("CODE");
String text = lookupElement.getChildTagValue ("TEXT");
String labelText = "";
if(indexLookupElement == 0)
labelText = "First Checkbox label";
html = html + "<tr><td width=\"50%\" >" +
+
"<input type=\"checkbox\" id=\"item" + code + "\" />" +
"<html:label " +
"id=\"_Description\"" +
"name=\"_Description\"" +
">" + text +
"</html:label>" +
"<td width=\"50%\" >" +
"</td></tr>";
indexLookupElement += 1;
}
html = html + "</table>";
Thanks,
Aiden
It's not a best practice to create the HTML code server-side. If you are sure you'll have the table in your document it's better to make it part of the structure of the document and feed only the variables from your Java code. Even if the table is conditional you may consider hide/unhide it with a variable. I believe this approach will solve your problem if the HTML code of your webpage is correct.
Update
Test it like this:
html = html + "<tr><td width=\"50%\"><input type=\"checkbox\" id=\"item" + code + "\" /><label id=\"_Description\" name=\"_Description\">" + text + "</label></td><td width=\"50%\"></td></tr>";
In your code you have missing TD closing tag and I made some changes. See if this will fix your problem.
I have a table that is added dynamically to the dom row by row. every row has a button in the last'' of the row. With the option to remove.
I am having problems getting the id of the button or any attribute. However the styles are applied.
function makeLeague(){
var tableStart = "<table style='min-width:100%;' id='league-table-custom' class='league-table ui-responsive' data-mode='reflow'><th>TEAM</th><th>PLD</th><th>W</th><th>D</th><th>L</th><th>GF</th><th>GA</th><th>GD</th><TH>PTS</TH><th></th>";
var tableEnd = "</table>";
var tableMid = '' ;
var secondtab = $('#demo1');
leagueSize = league.length;
for(k=0; k<league.length; k++){
tableMid += "<tr>";
for(i=0; i< 9; i++){
tableMid += "<td> " + league[k][i] + "</td>";
}
tableMid += "<td><input type='button' class='remove' value='"+k+"' id="+k+"></td></tr>";
}
secondtab.html(tableStart + tableMid + tableEnd).trigger('create');
$('#demo1').trigger('create'); //tried many combinations/and on own
$('.remove').button();
$('.remove').trigger('create');
}
$('.remove').on('click',function(){
console.log ($(this).attr.id);});
Does anyone have any suggestions where I am going wrong here. I read the jquery mobile docs and they state that the styled button get wrapped in a div. Would this effect my access? Or can I construct the function in a better way that will eliminate any issues.
I got this working I had to traverse the dom a little bit more. When getting the value I typed $('#pageone').on('click', 'table .remove',function(){ console.log ($(this).attr('id')); }); and it works. Not sure that is normal behavior and hope it works on all browsers. thanks for any input.
Instead of $('.remove').on('click',function(){
console.log ($(this).attr.id);});
I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>
It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.
I'm trying to follow the prof's example of creating an editable table on double clicking an entry in a HTML table. So my data method looks like this:
function formatData(message) {
var str = "<table border=1>";
for (var i = 0; i < message.length; i++) {
str += "<tr>" + "<td class='editable'>" + message[i].id + "</td>" +
"<td>" + message[i].name + "</td>" +
"<td class='editable'>" + message[i].url + "</td>" +
"<td class='editable'>" + message[i].desc + "</td>" +
"<td>" + "<a href='#' onclick='deleteRequest(this); return false' id='" + message[i].id + "'>delete</a>" + "</td>" +
" + "</td>" + "</tr>";
}
str += "</table>";
return str;
}
I bind a function edit() to the tags whose attributes are of class 'editable.' Then my edit function does:
function edit(elm) {
/* check to see if we are already editing */
if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT")
return;
/* save original content */
var orig = elm.innerHTML;
/* create edit field */
var input = document.createElement("input");
input.type = "text";
input.value = elm.innerHTML;
input.size = 20;
/* convert content to editable */
elm.innerHTML = '';
elm.appendChild(input);
/* position cursor and focus */
if (input.selectionStart)
input.selectionStart = input.selectionEnd = 0;
else
{
var range = input.createTextRange();
range.move("character", 0);
range.select();
}
input.focus();
/* set save trigger callback */
input.onblur = function(){save(elm, input,orig);};
}
I'm confused on how I would save the information and pass it to the web server to update. I need the id, url, and desc to update the web server. Since they double click on a table entry, that just gives me the element at that value, but I don't have the id. Do I change two lines in my formatData to:
"<td class='editable' id='" + message[i].id + "'>" + message[i].url + "</td>" +
"<td class='editable' id='" + message[i].id +"'>" + message[i].desc + "</td>" +
So that way I can ask the webserver for the url and desc with that id value? That seems like a bad way to do it since now two have the same id, but I'm not sure since I'm relatively new to AJAX, HTML, Javascript. Thanks.
Eh, I'll push a bit of help your way.
Basically, from what I gather you're binding a function to each td tag with editable. Well, you can determine the id inside that function.
B/c you can select the parentNode of the current node being edited, and then select the firstChild of that parentNode, so parentNode.firstChild which should be the first td, since remember on each row each of your td's will have a single parent tr. Then you select the firstChild of that td node, which is the text node it contains, and then grab its value, the id. So parentNode.firstChild.firstChild.nodeValue
This might not follow exactly with your code, as you only show parts of it... but this is the gist of the idea. Basically selecting nodes through the DOM and pulling the right one based on the current context.
I'd suggest playing around with it till you get it.
Here's a little bit of sample code for you to think about if you get stuck still. It's meant to be brief.
Basically, each middle column is tagged with the test function on the onfocus event (clicking inside the input). So it's on the input itself, and it pulls the parentNode td, then the next parentNode tr, then the firstChild of tr which is the first td then the firstChild of the first td which is the input on that row, then finally that input's value attribute.
<script>
function test(elem) {
alert( elem.parentNode.parentNode.firstChild.firstChild.value );
}
</script>
<table>
<tr><td><input value="1"/></td><td><input value="stuff" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="2"/></td><td><input value="stuff3" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="3"/></td><td><input value="stuff2" onfocus="test(this)"/></td><td>other stuff</td></tr>
</table>
This question comes after solving my last question, I'd like to get some values out of the hidden forms but when I try to retrieve them only empty strings come by, I've considered just using arrays to store the information as it is introduced but I'd like to know if it's possible just to retrieve it afterwards and how.
Also, There is a table that is generated on the fly with some javascript:
function createTable(){
if ( document.getElementById("invoiceFormat").rowNumber.value != ""){
rows = document.getElementById("invoiceFormat").rowNumber.value;
}
var contents = "<table id='mt'><tr>";
if ( document.getElementById("invoiceFormat").cb1[0].checked ){
contents = contents + "<td class='htd'>Quantity</td>";
}if (document.getElementById("invoiceFormat").cb1[1].checked ){
contents = contents + "<td class='htd'>Description</td>";
}if (document.getElementById("invoiceFormat").cb1[2].checked ){
contents = contents + "<td class='htd'>Unitary Price</td>";
}if (document.getElementById("invoiceFormat").cb1[3].checked ){
contents = contents + "<td class='htd'>Subtotal</td>";
}
for (i=4; i<=k; i++){
if (document.getElementById("invoiceFormat").cb1[i].checked ){
contents = contents + "<td>" + document.getElementById("invoiceFormat").cb1[i].value + "</td>";
}
}
contents = contents + "</tr>";
for (j=1; j<=rows; j++){
contents = contents + "<tr>";
for (l=0; l<=k; l++){
if (document.getElementById("invoiceFormat").cb1[l].checked ){
hotfix = l +1;
contents = contents + "<td> <input id='cell" + j + "_" + hotfix + "' name='cell' type='text' size='15' /> </td>";
}
}
contents = contents + "</tr>";
}
contents = contents + "</table>";
var createdTable = document.getElementById("mainTable");
createdTable.innerHTML = contents;
}
After it's created I've tried to access it but without luck so far, I just can't get what the user inputs in the input fields that are created. How can I do this?
I'm using raw javascript with jQuery so answers with or without the library are welcomed :)
document.getElementById("invoiceFormat").cb1[3].checked
First of all I do not know what ".cb1[3]" means here so I will ignore it and will tell you how I would solve this problem: (I assume that "invoiceFormat" is id of your form.)
1) in your form set name property of every field you have. that way you can reach them like document.getElementById("invoiceFormat").fieldName.value
if you will use this method make sure that put your form in a local variable. it will be a lot faster
var form = document.getElementById("invoiceFormat");
form.fieldName.value;
2) give every field you have a unique id and just use getElementById directly on fields not on form.
I am not sue if this method is better, but I am useing second one all the time. I just get used to it I guess.
3) there is one more way but it might be an overkill. when you create your form fields, you can put them in an object(not values but the elements themselves) and even hide it in a closure. That way you can call something like
formElements.formFieldOne.value;