I have a working multiplication of textbox, however, when I added a new textbox, the function will not performed. Only the first textboxes is being executed of the js function that I made. Sorry for asking this but I am pretty new to jsquery/javascript.
here's my working script: JS FIDDLE
What it does is, I have a table and 2 TR on it. it multiply the cost(3rd td) and the quantity(fourth td) and send the results to the line total (fifth td). Then I have a button, that will add another set of tr to the existing table, however, the multiplication wont work on the newly added tr.
Can you help me here?
TIA,
Nimitz
Just add these two lines as two last lines of your .click(...) handler:
$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);
Here is updated JSFiddle
The reason for that is - you have to re-register event listeners for the line newly created.
You can use same selectors, but then you have to "off" previous event listeners.
Update
Another approach, is you can bind events only on newly created row:
Here is another JSFiddle for that
You have to put contents of newly created row into some variable:
$('#myinvoice tr:last').after($newRow = $('<tr><td>...'));
And then add events for the selectors inside this $newRow only:
$(".qty :input",$newRow).keyup(byPrice);
$(".price :input",$newRow).keyup(byQty);
I'd use second
Related
I have an html table stuffed with data that is sorted by the awesome plugin datatables. Now I wan't each row to be clickable, so I added the following piece of jquery:
$( document).ready( function() {
$('.clickable').click(function () {
$(location).attr('href', $(this).data("href"));
})
}
);
This only works however, for the piece of the table that is initially shown (so the first 10 rows). If I extend the number of entries that are show with the default button: , my new entries are not clickable. How do I load the javascript in such a way, that also new entries are clickable?
please try to use the handler for table row click as written below :
$('body').on('click', '.clickable tbody tr', function () {
As #Michael pointed out always try use separate function for Event Handling as its easy maintain and modify.
The JavaScript that makes rows clickable is run once when the page first loads. It would be better to make it a separate function that gets called immediately after any new rows from the table load.
As #Prakash Thete pointed out, using .on('click') instead of click should add the effect to dynamically added elements, even when called once.
I am trying to add new rows on cell click using DataTables API.
Currently, I am able to add the row for the first time. But from second time on-wards, it is acting a bit weird. I was able to create this example for any of you to give it a shot.
After much work throughout the day, this is what I could accomplish.
EXAMPLE TO WORK UPON
Doing indexing manually is not the best idea considering that Datatables does this internally anyway.
Here's the official how-to for the index column: https://datatables.net/examples/api/counter_columns.html
The only problem here is that row.add() can only append a row (i.e. can't insert into arbitrary position). To overcome this you can retrieve the internal table data, modify it and put it back again. E.g.
var newRowData = [
"",
'New Name',
'New Position',
'New Office',
26,
'New Date',
'New Salary'];
tableApi.row.add(newRowData);
var data = datatable.fnGetData(); // get data
datatable.fnClearTable(false); // erase the data in the table
data.splice(currentRowIndex + 1, 0, data.pop()); // move the row of interest into desired position
datatable.fnAddData(data); // put data back
Full example: JSFiddle
That code of yours is somewhat off a mess. Here are some of the problems:
The AddNewRows() function is called by an onclick event in the html of the td (but not for all rows?). This also means is does not work with the newly added rows.
In the AddNewRows() function you use alot of $('#example').DataTable() instead of (re-)using the variable table.
In each new call to AddNewRows() you add a jQuery click event to all rows of the table (before adding the new row, so the event is not bound for the new row). After the e.g. fifth call to the function all rows have five events bound and so there are two times five alerts ...
The AddNewRows function is called with an onclick event on the td and after the function finished the click event propagates to the tr and the newly bound event for the tr is immediately called (plus all the events from previous calls, see previous point). Why not just use one event? Also the newly added event on the tr also works for click on other tds then the one which original hat the call to AddNewRows().
Try to simplify your code, maybe even build it up from scratch so that it only does what it is supposed to do. After that, come back here if you have still problems left.
Hi,
I want to attach on click event on Text Box with value A in attachment and same with B.
I am using dojo toolkit with the following code:
window.onload = function () {
dojo.query('.test').onclick(function(){
alert('test');
});
};
I have a table control having two column name and value both columns contain textboxes.On column name textbox i have added a class with name 'test'.The table rows increase dynamically as shown in attachment.
Now my concern is these textboxes increase dynamically how can i attach event on these textbox.On signle textbox this is working fine but here table rows increase and how can i find particular textbox with same class?
Can anyone help me?
define the function separately.
var myFunc = function() {
alert('test');
};
Now, use it, to attach to text boxes (like you have already done)
dojo.query('.test').onclick(myFunc);
But, while adding new rows, it is your duty to attach this function to the newly added text boxes. You can refer it by the name "myFunc".
Note:-
Running the code piece again - "dojo.query('.test').onclick(myFunc);" will add duplicate handlers for existing textboxes.
If you are adding a large number of handlers or if the information on the screen is dynamic, you'll want to look at using delegated event handlers.
With delegation, you are only adding one handler, which is better for memory usage and you would be adding the handler to the container, not each specific item, which means that the items themselves can safely change without having to re-attach handlers to them.
For more details, I would point you towards this excellent answer: What is DOM Event delegation?
I have multiple rows with three select elements each. There are two such rows during initialization and further rows can be added dynamically. I added change events to all these elements when each row is added such that all the other elements in a particular row change when one of the drop downs in that row is changed. There is also another select element #foo that is not a part of any row (it is displayed on top of the page) which on change should change the contents of all the select elements on all rows.
I tried doing this by adding jQuery("#foo select").change(callback_function) while adding the change events for each row. But when I do this, changing #foo updates only the last inserted row and not the other rows. How do I make it work in such a way that changing #foo updates all rows?
Any solutions will be greatly appreciated.
It would be easier to answer if you provided some source code, but from what I understand (When the select element with an id of foo is changed, the other select elements are changed by a certain function) this might work for you:
$("#foo").on('change', function() {
$('select.other-selects').each( function (i) {
callback_function();
});
});
Where .other-selects is the class you designete you others select elements with.
I have an HTML table with various rows, each has a delete button with a class.
On the DocumentReady event I wire up all buttons with this class to handle the click event.
On the click event, it does a jQuery POST which deletes data from the database and returns the table with the removed row.
If I go to click another delete button it doesn't do anything as if the click event is not wired up. I have tried wiring it up in the OnSuccess event as well as DocumentReady but nothing.
Please do post your jQuery code responsible for that whole logic. Just as a shot in the dark I'd suggest you'll have to use:
$(".button").live("click",function(){...})
instead of
$(".button").click(...)
I would use the live binding function in jquery to be able to bind to all specified elements at any time of creation:
http://docs.jquery.com/Events/live
Sounds like you are removing the entire table (with the buttons that have events attached to them) and replacing it with a new table (with new buttons that don't have buttons attached).
You have a couple of options.
Just remove the row that you delete - don't replace the entire table
Use event delegation and put the event handler on the element containing the table
Rerun the code that attaches the events every time you rebuild the table