I've with me the feature of adding new rows to an existing table via the "Add Row" button using plain old javascript. This code was written by someone else and now I'm required to add something more to the existing functionality.
For that reason I need to be able to target the dynamically added rows too but for some reason whenever I do (after adding 2-3 new rows and clicking "Submit" button)
console.log($('table#tableid tbody tr').length);
it is only retuning the number of rows which were loaded during the page load and skipping the new rows that were added dynamically.
Here's the Fiddle to get you started. It's baffling really because I thought I knew jQuery well enough to be stumped by this....
You add new row to tfoot.
Try this:
var tbl = document.getElementById('tblSample').getElementsByTagName('tbody')[0];
At page Load you are having rows in tbody.while the rows you are adding dynamically are adding in .while on button click you are selecting only those rows that are coming in tbody section.
Related
I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});
I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});
I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.
You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.
In this fiddle
There are two rows and each row have 2 bootstrap icons edit and delete.When edit icon is clicked then a bootstrap dialog box appears showing the existing column values,User can change the values and after clicking the save button the old values are replaced by the new one.I tried using
$Updaterow.remove();
$Updaterow.append('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
but this is not working.I have also tried with this
$Updaterow.replaceWith('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
In this way also the new row is not getting replaced.Can any body please tell me how to do this?
You are trying to replace TR with a TD. Try this
$Updaterow.replaceWith('<tr><td>'+ $('#editName').val()+'</td>'
+'<td>'+ $('#editEmail').val()+'</td>'
+'<td>'+ $('#editmobile').val()+'</td></tr>');
And the first one wont work since you are appending TD to a TR which is not in DOM any more.
I have a web app which uses jQuery to append rows onto the end of a table. Each row has a textarea to make notes, and an edit button which pops up a window so more information can be entered. The code to do so looks something like this: http://jsfiddle.net/H3m4z/
That is a trimmed down version of the actual code because the real code it involves an AJAX call to save data from each table row into a database when it is added. rowID is unique in the proper script so I can refer to the textareas of each row by 'notes[rowID]'.
This is what I do when users enter more info on the edit popup window. Any new notes entered are saved into the database but to make the web app feel more 'live' and responsive the new notes are copied across from the edit window to their corresponding notes field in the parent table like so:
window.opener.$('#notes[' + rowID + ']').text(newnotes);
This works absolutely fine for rows which already existed when the parent page was loaded, like the first table row in my example. However it does not work for table rows which were dynamically added by jQuery. I'd guess the answer involves live(); somehow but I'm not exactly sure where or how.
To make use of event delegation with on() (which replaces live()):
$('#table').on('click', 'td button', function(e){
});
Or you could just wrap your html in a jQuery function and bind the events right away (simplified example):
var $tr = $('<tr><td>foo</td></tr>').on('click', function(e){
});
$tr.appendTo('#table');
This would obviously bind the event to the actual <tr>, but you get the idea.