Develop Reference

How to go through array with dynamically added elements with jquery?

I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});

Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.

Passing the row id on select to the JavaScript file in java

http://holt59.github.io/datatable/
I have used the this link for filtration and pagination of my table. Earlier i was using the
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
JavaScript code for selecting the row and getting the id , now its not working when i included the js file. please help me to get the dynamic selection of rows.

It is probably destroying and re-adding the rows which removes your event handler. Use event delegation.
$(document).on("click", 'tr[data-href]', function() {
document.location = $(this).data('href');
});
You can move the listening location closer to the row
$("#tableId").on("click", "tr...

Yii Cgridview $.fn.yiiGridView.getSelection function doesn't work right away

I have a cgridview on a yii application, and I have selectableRows set to only 1.
I have the following javascript to catch the click event and copy the id of the row into a texfield on the same view file (the id can't be shown on the gridview itself that's why I'm using getSelection).
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $.fn.yiiGridView.getSelection('doctors-grid');
$('#doctorIDTextfield').val(doctorID);
});
The problem is that the id value is never copied into the textfield on the first click but instead you have to click a second time. Not to mention that when I start clicking many different rows the id values get wrong some times.
Can anyone help? Thank you for your time.

Idk why it doesn't work, but you can do it another way:
....
'rowHtmlOptionsExpression'=>'array("data-id"=>$data->id)',
....
in your grid options,then with js:
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $(this).attr("data-id");
$('#doctorIDTextfield').val(doctorID);
});
This will work.

Jquery lag on click function

I've got a table with different columns identified with different classes.
I've also a checkbox binded to every column.
I created a function which is called on the click of any checkbox. In this function I hide/show the column which is linked to this.
It doesn't have any javascript error, and the code is the following:
$(document).ready(function(){
$('ul input').click(function(){
//alert('yooo');
if ($(this).is(':checked')) {
//alert('checked');
$("td."+replaceAll(" ","_",$(this).val())).show();
$("th."+replaceAll(" ","_",$(this).val())).show();
//alert($("td").length);
}
else{
//alert('unselected');
$("td."+replaceAll(" ","_",$(this).val())).hide();
$("th."+replaceAll(" ","_",$(this).val())).hide();
}
});
});
However, after every click, the action has a lag (after many clicks it becomes tooooooo slow, many seconds).
I tried also with .css instead of hide-show, but it doesn't make any change.

I understood that the problem was linked only to checkbox, not on callback or on jquery function. I solved the problem simply by working with radio input, adding a "true" and a "false" radio input for every checkbox that was in the page.

Instead of running the jQuery selector on every click like below:
$("td."+replaceAll(" ","_",$(this).val()))
You could set up some sort of caching like:
var cache = {} //<-- declare this outside your click handler
//add the code below inside your click handler
className = replaceAll(" ","_",$(this).val())
if(!cache[className])
cache[className ] = $("td."+className + ", th."+className); //select all the elements once and store in the cache object
$el = cache[className];
if ($(this).is(':checked'))
$el.show();
else
$el.hide();

Paging and double click with jQuery datatable

After lots of reading posts and fiddling, I thought this was working to attach a doubleclick 'handler' to each row of my jQuery datatable:
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
Unfortunately, this only seems to work for rows on the first page. I tried doing something like this as a workaround (basically do the same thing when paging):
$('#myTable').on('page', function () {
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
} );
However, when it fires there are no tr's found so nothing happens. I assume the event is firing before the datatable has new rows?
Does anyone know how I can get this to work?
Here is a JS Fiddle example, Nikola. Thanks for your time. Double click a row and get an alert, click next and double click a row and get no alert.
JS Fiddle example
This is what you can add in for the workaround that doesn't work:
$('#example').on('page', function () {
$('#example').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
alert(ref);
});
} );

You could find answer here.
So, for dynamically created elements you should use:
$(document).on("dblclick", "#myTable tr", function () {
//code here
});