Develop Reference

How do I trigger click event on dynamically created input type 'file'?

I am attempting to add an input of type 'file' to a form dynamically. Actually the end user can add as many files as they would like to a form, so an array concept is needed. I can inject dynamic elements, but I can't figure out how to dynamically invoke the click of the input element just injected. Also, need to remove the dynamic element if the user chooses cancel on the input element.
I have created a jsfiddle showing the injection but the click event never fires when the trigger is run.
How do I trigger the 'click' event after injecting this element?
jsFiddle Html
<input id='button1' type='button' value='button1'>
<div class='container'>
</div>
jsFiddle JavaScript
$(document).ready(function () {
$('#button1').on('click', function(event) {
Button1_Click(event);
});
});
function Button1_Click(event) {
var container = $('.container');
var containerChildren = $(container).children();
var containerChildrenCount = $(containerChildren).length;
var inputId = 'fileInput[' + containerChildrenCount + ']';
$('.container').append('<input id="' + inputId + '" type="file" />');
$('#' + inputId).trigger('click');
}

Try removing the [] from the inputId variable.
I got it to work in your fiddle by changing it to this
var inputId = 'fileInput-' + containerChildrenCount

Radio button select on cell click

I would like to have a radio button become checked when clicking on the cell in which it resides. Also the background color of the cell should change.
I have managed to get the cell to change background color when it is clicked but I want it to also select the radio button in addition to changing the background color.
I am new to javascript and i have got the jsfiddle working below based on other examples but cannot figure out the rest (tried a lot of different things)
http://jsfiddle.net/Lude352m/1/
Javascript:
$('.custom-matrix tr').click(function (e) {
console.log("Inside #out code");
var cell = $(e.target).get(0); // This is the TD you clicked
//if (cell.nodeName != 'TD') cell = $(cell).closest('td').get(0);
// Remove the background color for all cells
var c = $(cell).parents('tr').children('td');
$(c).each(function () {
$(c).removeClass('info');
});
// Add the background color for the clicked cell
$(cell).addClass("info")//.parent().siblings("tr").find("td.info").removeClass("info");
var rad = $(cell).children('input');
console.log("Radio: " + rad);
//for(var key in rad) {
// console.log('key: ' + key + '\n' + 'value: ' + rad[key]);
//}
$(rad).prop("checked", true)
// Output code to help (but will be removed once working)
// Empty the div '#out' (clear its contents)
$('#out').empty();
var tr = $(this); // This is the TR (row) you clicked
// Loop through the TD's within the TR ?? i think?
// The 'i' is used as a counter but not sure how it increases each loop
$('td', tr).each(function (i, td) {
$('#out').html(
//Cumulatively add the result of each TR (row) to the '#out' div's contents
$('#out').html() + '<br>' + i + ': ' + $(td).text() + (td === cell ? ' [clicked]' : '')
);
});

Your radio inputs are not a direct child of your <td>, but a child of the <label> inside the <td>, so
var rad = $(cell).children('input');
need to be changed to either
var rad = $(cell).children().children('input');
OR using .find()
var rad = $(cell).find('input');

Try this code
$(cell).find("input").attr('checked', true);
or
$(cell).find("input").prop('checked', true);
Here is a working Fiddle

how to remove particular li from ul using javascript/jquery?

HTML string:
var ul = document.getElementById("list");
$("#list").append(
"<li class='margbottom'>" +
"<label id='id_'><img src='images/icon-approved1.png' class='imgspace' align='absmiddle'/><span id='categoriesName'>" + categoryName + "</span>: <span id='categoriesValue'>" + value + "</span></label>" +
"<div class='menuicon'>" +
"<ul>" +
"<li><a href='#url' onclick='removeCategory();'><img src='images/icon_minus.png'></a></li>" +
"<li><a href='#url'><img src='images/icon-searchby-s.png'></a></li>" +
"</ul>" +
"</div>" +
"</li>"
);
JS:
function removeCategory(){
alert("Inside removeCategory");
var elem = document.getElementById('list');
elem.parentNode.removeChild(elem);
}
I have created dynamically li list and I need to remove it dynamically. bt by calling removeCategory it is removing all element instead of particular one.
Anyone can help?
Thanks in Advance.

In this specific situation, you should pass this to the removeCategory function and use it as the element.
So, basically -
<a href='#url' onclick='removeCategory();'
Should be -
<a href='#url' onclick='removeCategory(this);'
And the function should be -
function removeCategory(elem){
alert("Inside removeCategory");
elem.parentNode.removeChild(elem);
}
However, adding HTML within the JavaScript like this is discouraged. If you must, at least do not use inline event listeners, but add them using jQuery instead ($("#list a").on("click", removeCategory); and then just use this within the updated function instead of elem).
Also, your code was indeed removing the entire list, because you are always removing the parent element of the element that has the list ID.

In jQuery you can do like this:
Add class 'removeLink' to your tag. No need for onClick() action.
jQuery code to remove:
$('removeLink').click(function(){
var iconDiv = $(this).closest('.menuicon');
var li = iconDiv.closest('<li>');
li.remove();
});

$("ul").find("[particular li selector]").remove();
The above is just a starting point. It all depends on how easy access you have to the particular li in question. You can either access it directly (by id) or via the parent in some way.
If possible do this
$("#particularLI").remove();

Html TD back to DOM

the issue: I have an appending json data to html table
here's how:
In a Loop->
var image = document.createElement('img');
image.src = data.data[i].picture.data.url;
var td=document.createElement('td');
var input=document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('onclick', 'testCheckBox()');
input.setAttribute('id','testid' + i)
td.setAttribute('onclick','tdClick()')
td.setAttribute('title',data.data[i].name );
td.setAttribute('id',''+ i );
td.appendChild(input);
td.appendChild(image);
tr.appendChild(td) ;
mytable.appendChild(tr);
}
$('#maincontent').append(mytable);
After that I got the data I need in attributes,
now I want to understand how can I get the TD= ID , and any other kind of attributes after that kind of click or another, from each td... that is different
Edit:
Function fixed to this :
function testCheckBox()
{
$(':checkbox').change(function(){
var i = $(this).closest('input').attr('id');
var id = $(this).closest('td').attr('id');
var fbname = $(this).closest('td').attr('title');
console.log(id + ' : ' + this.checked);
console.log(fbname + ' : ' + this.checked);
console.log(i + ' : ' + this.checked);
friend_name[i]=fbname;
friend_id[i]=id;
});
}
console.log(friend_name);
Working just GREAT!
the new Issue is that.. if I uncheck this checkbox.. I dont know how to remove it from Array!
and another Q: can I make 1 Array and not 2 Like here? that the 'I' will have 2 Elements Inside?

You are not javascripting the right question, i mean, you ask for the .html() and not the ID value.
HTML()
Get the HTML contents of the first element in the set of matched
elements or set the HTML contents of every matched element.
Try this :
console.log($(this).attr('id'));
attr()
Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element.

write dynamic html with jquery

Given this fiddle, what is preventing the HTML from being rendered?
JavaScript
$(document).ready(function(){
function loadDiv( divId ) {
$('#' + divId).html('<table><tr><td class="editable" id="' + divId + '">Edit Me</td></tr></table>');
}
$('td.editable').click(function() {
var cellId = $('td.editable').attr('id');
alert(cellId);
});
loadDiv( div1 );
loadDiv( div2 );
});
My intention is to change the clicked cell into an input field and later post from it, but I'm not sure why it's not rendering.

You need to add quotes around your div ids.
loadDiv( "div1" );
loadDiv( "div2" );
http://jsfiddle.net/pp6nv/1/
Since the tables are added after the page loads, you'll have to use .on().
$('body').on("click", "td.editable", function() {
var cellId = $(this).prop('id');
alert(cellId);
});
http://jsfiddle.net/pp6nv/3/