Develop Reference

Jquery Mobile dynamic created range change event not firing

I'm creating a Jquery Mobile range dynamic with this code:
$('<input data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Now I want to add a change event with this code:
$(".brightness").change(function() {
alert("changed");
});
I have no idea why it's not working, I tried to refresh the range after defining the event, I tried to bind the event to the range, nothing works. The function that contains the first code snippet, is getting called first, and the function that contains the second snipped is getting called second.
Does someone of you know what I'm doing wrong, or what I'm overlooking?

Two things you need to do
1. add css class brightness to your range input
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Add event handler using on
$(document).on("change",".brightness",function() {
alert("changed");
});
EDIT - for id selector use # instead of .(dot) like below
$(document).on("change","#brightness",function() {
alert("changed");
});
Check jQuery Selector

Use on method for your dynamically created elements
$(".brightness").on('change',function() {
alert("changed");
});

I think you are giving id brightness and Calling Onchange Event by Class using dot(.).
if the name of the id is brightness then
you should use #
$("#brightness").on('change',function() {
alert("changed");
});
but if you want call onchange event by class only then you need to add class to your input and use dot(.)
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
$(".brightness").on('change',function() {
alert("changed");
});

How to pass `this` as an argument in javascript function?

I am using javascript in my project.
I have on HTML table <table id='idDocList'> and I am doing append some html on this table as below code.
But I want to hide respective <tr> when user click on Delete anchor tag.
$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a onclick=deleteDocument(this,'" + file.name + "')> Delete</a></td></tr>");
How can i do this using Jquery?
The following example does not work
function deleteDocument(CurAnchorTag, fileName) {
$(CurAnchorTag).closest('tr').hide();
}
I don't want to use ID for <a> tag as I have many Documents.

As a quick fix, you can use like this,
$(CurAnchorTag).closest('tr').hide();
Replaced <tr> with tr
You can remove the inline function call with jquery like this way,
$("#idDocList").on("click", "td a", function() {
$(this).closest("tr").hide();
var filename = $(this).closest("td").prev().text();
});

I would suggest you to change your code to:
var newRow = $("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a href='#'> Delete</a></td></tr>").appendTo("#idDocList");
newRow.find( 'a' ).click( function( e ) {
e.preventDefault();
$( this ).closest('<tr>').hide();
});

You would better use event delegation and get rid of inline onclick handlers all together:
$('#idDocList').on('click', '.btn-delete', function() {
$(this).closest('tr').hide();
// read filename: $(this).data('filename')
});
And use it with HTML (the sting you append):
"<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class="btn-delete" data-filename='" + file.name + "'>Delete</a></td></tr>"
Note the part:
<a class="btn-delete" data-filename="filename">Delete</a>

you can just use
$(".delete_link").click(function(){$(this).closest('tr').hide();}
Jquery will use the this of which ever element called it. There will be no need for the onclick on the html file.

You recommend you to use event for a class using the jquery
$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class='delete_link'> Delete</a></td></tr>");
The code below will add the event and need to execute always after add a "tr", unless you use a delegate to this
$(".delete_link").click(function(){ $(this).closest("tr").hide() });
If you don't want to use a class you can use this
$("#idDocList td > a").click(function(){ $(this).closest("tr").hide() });

Create a cloned div that works separately in the same page

I have a div in my page which contains a table with inputs (with ids), I have some conditions and functions on the inputs written in the Javascript code. What I'm trying to do is to make a button (add new) that clones exactly the same div in the page but with same conditions and functions on the new elements and the submit button to work for each separately.
I tried this :
$('#button-add').bind({
click: function()
{
$("#repeat").clone().appendTo("#add");
}
});
the problem is that I get the same appearance for the div but the functions are not working (because the inputs have the same id) and i cannot submit only that block (new div).
Is there a simpler way to achieve that?

Just in case if you ignore making clones.
The way of doing it using a dynamic id.
Say if appending div with different id for every element using random function in javascript.
$('#add-item').on('click', function (e) {
var num = Math.floor(Math.random() * 90000) + 10000;
var numtd = Math.floor(Math.random() * 50000) + 10000;
$('<tr id="trowdynamic_' + num + '">' +
'<td>' +
'<div class="input-group">' +
'<input type="hidden" id="selected_item_' + numtd + '" name="selected_name" />' +
'<input type="text" name="Inv_Itemsdetail" value="" class="Itemsdetail-typeahead_' + numtd + ' input-search" autocomplete="off" data-provide="typeahead" />' +
'<input type="hidden" id="Inv_Itemsdetail_' + numtd + '" class="auto-complete" name="Itemxx[]" />' +
'<span class="input-group-btn">' +
'<i class="fa fa-plus"></i>' +
'</span>' +
'</div>' +
'</td>' +'</tr>').appendTo('#yourcontainer_id');
});
Now using jQuery call for same id elements-
Now Note this way I have every element starting with same id name plus a random number.
$('input[id^="selected_item_"]')

Since you're going to duplicate the div, you should not use IDs, because their uniqueness would be compromised. But you can use css class names ($('.className')) or custom data attributes ($('[data-my-id=xxx]')) to address your inputs because they do not need to be unique.
Second, you need to clone your div so that the events attached to your inputs are cloned as well. Check out the jQuery doc for .clone([withDataAndEvents] [,deepWithDataAndEvents]) (http://api.jquery.com/clone/).

Since the new div is created in new space ie, in #add, select the new div as
#add #repeat
{
} // in css
in jquery use next or siblings or children etc to select the new div
For example
see the FIDDLE

Calling a function from StringBuilder(vb.net)

How can I call a function in javascript from the stringBuilder in VB.Net?
Code:
oSB.Append("<table id= '" + table_id + "' class='sortable' ><thead><tr><th class=border onclick='sort()'>" + "Name" + "</th><th class=border>" + "Duration" + "</th><th class=border>" + "State" + "</th><th class=border>" + "Party" + "</th><th class=border>" + "Year" + "</th></tr></thead>")
Is this a correct method?

Instead of using the outdated onclick attribute, you should assign you handlers via javascript/jQuery. This makes for a better separation of concerns.
First of all remove the onclick="sort()" from your code, and add this jQuery code to the page:
$(".sortable th:first").click(function() {
// do something...
});

you can remove the inline onclick event.. and use jquery click event instead
$(".sortable th:first").click(function() {
// do your stuff
});

Attach event handlers to multiple textboxes (with similar patterned id)?

I have several textboxes that are generated dynamically based on some results I get from another source. I want to add some event handlers to these textboxes to catch any keypress, and ensure that anything entered is numeric.
I generate these textboxes based on the length of an array within a JSON response, like so:
for(i=0;i<data.routesout.length;i++)
{
content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>';
content += '<input type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent>';
}
How can I attach a single event handler to all of these potential inputs?

You've tagged the question with jQuery, so I wonder why you're not using the library to build your content:
var content = [];
for (var i = 0; i < data.routesout.length; ++i) {
content.push($('<label/>', { 'for': 'route' + i, text: data.routesout[i].name }));
content.push($('<input/>', { change: yourEventHandler, type: 'text', name: 'route' + i, id: 'route' + i, value: date.routesout[i].percent, change: yourEventHandler }));
}
By doing it that way, you can bind the handler element by element as you construct them. (I used "change" as an example, but you could bind handlers for whatever event you want in the same way.)
At the end, you can append all the created elements however you want, or you could append them as you go instead of building an array.

You can use the starts with selector
$('input[id^="route"]').keyup(function(){...
Note that if you're creating these on the fly, you might need to attach the event using live:
$('input[id^="route"]').live('keyup', function(){...

What about this?
for(i=0;i<data.routesout.length;i++){
content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>';
content += '<input onkeypress="doSomething(this)" type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent + '>';
}
function doSomething(element){
/* this function will be called when user presess key inside a textbox */
}