Develop Reference

textarea clears when using innerhtml [duplicate]

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.

How to construct <input> in javascript with custom placeholder

Custom placeholders can be constructed along with text areas in Javascript like this:
var custom_placeholder = "hello";
html = '<textarea class="form-control">' + custom_placeholder + '</textarea>';
However, I cannot figure out how to do this for input tags. Below does not work. The custom placeholder appears outside the input box. So how can this be done?
html += '<input type="text"/>' + custom_placeholder;
The following syntax is not allowed as well.
html += '<input type="text">' + custom_placeholder + '</input>';

Vanilla JS
var txt = 'Hello',
input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', txt);
document.body.appendChild(input);
jQuery
var txt = 'Hello';
$('body').append('<input type="text">');
$('input').attr('placeholder', txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

All you need is to concatenate the placeholderattribute within your String, like this:
html += '<input type="text" placeholder="' + custom_placeholder + '"/>';
Demo:
This is a working snippet:
var html = "";
var custom_placeholder = "A Text input";
html += '<input type="text" placeholder="' + custom_placeholder + '"/>';
document.body.innerHTML = html;
Note:
You better create the elements dynamically and append their
attributes using JavaScript.
You don't need </input> for inputs in HTML, just add a / before closing your input tag.
Also make sure the custom_placeholder variable doesn't contain special characters such as " or '.

Just use html input's placeholder attribute to set placeholder text:
let html,customPlaceholder;
html += '<input type="text" placeholder="' + customPlaceholder + '" />'
Or, if what you are looking for is actually a preset value (that the user will have to delete to enter their own input), use html's value attribute:
let html,customPlaceholder;
html += '<input type="text" value="' + customPlaceholder + '" />'

jQuery Mobile dynamic content -cannot select tag

I'm working with jQuery Mobile in a google web app and just having some issues selecting a tag. More specifically, I have content that is loaded from an external source so need to have a loading page initially. Once the external source is available I then update the page with the content using jQuery. Included in this content is an input tag. The issue is when I update the page, I cannot then cannot find the value of this input tag.
Here is my code below:
(intial html - Before content is loaded)
<div class="ui-body ui-body-a">
<div id="googleList" >
<fieldset data-role="controlgroup" data-mini="true" >
<input type="checkbox" name="checkbox-v-6a" id="checkbox-1-a">
<label for="checkbox-v-6a">Loading . . . </label>
</fieldset>
</div>
</div>
Here is my jQuery to update the code above when the new content comes in:
function showTaskList(tasks)
{
//Generate HTML
var htmlToInsert = "<fieldset data-role=\"controlgroup\" data-mini=\"true\" >";
for(var i = 0; i < tasks.length; i++)
{
htmlToInsert += "<input type=\"checkbox\" data-id=\"" + tasks[i][1] + "\" name=\"checkbox-" + i + "-a\" id=\"checkbox-" + i + "-a\" class=\"custom taskCheckBox\" ";
if(tasks[i][2] != undefined)
htmlToInsert += "checked=\"checked\"";
htmlToInsert += " />";
htmlToInsert += "<input id=\"currency-controlgroup1\" data-id=\"" + tasks[i][1] + "\" type=\"text\" value=\"" + tasks[i][0] + "\" data-wrapper-class=\"controlgroup-textinput ui-btn\" class=\"taskinputBox\">";
}
//Insert HTML into site
$("#googleList").html(htmlToInsert + "</fieldset>");
//Refresh List
$("#googleList").trigger("create");
}
Here is my code to get the input tag value
$(document).ready(function(){
function processTaskList()
{
console.log("Test");
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("data-id");
console.log("CheckBox:" + checkBoxId );
});
}
});
CheckBoxId keeps coming back undefined when I click on one of the checkboxes. I want to be able to read the data-id value. I'm not sure how to fix this? Any help is appreciated.

I tested the code below again, and it works - Thanks for your help
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("id");
console.log("CheckBox:" + checkBoxId );
});

Finding a specific child div via jquery

I am trying to find and append some text in a dynamically created parent div
but its not working.
Here is what I have tried.
var mainDiv = "" +
"<div>" +
"<div></div>" +
"<div>" +
"<div class='image-here'></div>" +
"</div>" +
"</div>"; // proper script is in Fiddle
var imageDiv = $(mainDiv).children(".image-here");
$(imageDiv).html("text allocated");
$(mainDiv).dialog();
Here is the Fiddle: http://jsfiddle.net/xBB5x/10166/

Change this:
var imageDiv = $(mainDiv).children(".image-here");
$(imageDiv).html("text allocated");
$(mainDiv).dialog()
to this:
$(mainDiv).dialog().find(".image-here").html("text allocated");
Here is the JSFiddle demo

Custom Confirm Dialog

function deleteRecordDialog() {
var returnThis;
var numRecordss = recs.length;
var html = ""
/*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">';
html= html + '<div id="popupInner">';
html= html + '<div id="popupFrame">';
html= html + '<div class="margin15px dialog-messages">';*/
html= html + '<table>';
html= html + '<tr>';
html= html + '<td class="warning-icon-cell"></td>';
html= html + '<td style="padding-left: 5px;">';
if (numAddresses == 1) {
html = html + '<p>You have chosen to delete a contact.</p>';
}
else {
html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>';
}
html= html + '<p>Are you sure you wish to proceed?</p>';
html= html + '</td>';
html= html + '</tr>';
html = html + '</table>';
if (numAddresses == 1) {
html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
else {
html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
OpenDialog(html, 350, 180, false, "Delete Contact")
return returnThis;
}
Now usually I'd use JQuery and set modal to true to enable the false/true to be assigned but I don't have the luxury of jquery with this. Is there a way to use this custom dialog?
Is there a way to do the following without JQuery?
$("#dialogInfo").dialog({
modal: true
});

The jQuery-ui-dialog just runs a bunch of JavaScript code behind the scenes to give the appearance of a dialog box.
You can accomplish much of the same functionality using CSS.
I'm not going to tell you exactly what to do here, but I'll point you in the general direction.
For starters, you can create a div that will contain your dialog box content. Give it id dialog.
Then, in CSS, give it position:fixed and display:none and z-index:9999 along with the width and height you desire. Knowing exactly what its size is, you can write JavaScript code to center it on the screen. When you want to display the dialog, set its display property to block. Also, be sure to give it a background color and a border. That will allow you to give part of your document the appearance of being like a dialog box.
If you want to have a 'mask' behind the dialog box so that the user can't click on anything else on the page, create another div with id mask. Give it these CSS properties: position:fixed, top:0px, left:0px,height:100%, width:100%, display:nonebackground-color:black,z-index:9998,opacity:0.8. When you want to display the dialog as modal, set this div'sdisplayproperty toblock` as well.
Finally, jQuery-ui-dialog also captures [Tab] key presses to keep the keyboard focus inside the modal dialog. Feel free to do this as well, if you like.
Happy Coding!