first I'm going to explain the situation and then the problem.
I'm designing a table with some data and I developed some functions for ordering this data when the "th" tag of the column is clicked.
$('#table_id > thead > tr > th').click(function() ...
//ordering algorithm
In addition, I created 2 "select" tags for filtering the data of the tables. The method I'm using for filter data is to search for the text that matches the select text and use remove() method for deleting the row.
document.getElementById("select_id").addEventListener("change", function() {
//remove rows
When the data is filtered (by the select) and I try to click the "th" tag of the column the "click" method is not working and I have no error messages in the console, so I don't know how to solve it.
Any one knows is "click" method changes it's functionallity when the page content changes?
Thanks for reading.
If more code is needded for understanding the problem I will paste it.
If you are changing the DOM after page renders try using .on()
$(document).on('click', '#table_id > thead > tr > th', function() { ... });
This seems to be an issue with dynamically loaded elements.
It is a duplicate question and has been answered here:
Event handler not working on dynamic content
If the original th is removed from the DOM and then instead new th has inserted, the click event is no more assigned to it, so you need to re assign it.
another approach would be like what Nick Surmanidze suggested.
Related
I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.
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 have a button in each row, when pressed that row is removed from one table, and added to another table:
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
and at first it appears to work perfectly, the row is removed from one table and added to another, but when I force a re-draw (by changing the sorting of one of the columns, for example) all the rows are back as they were, and the buttons no longer work. This is the case for both the removed rows, and the rows added to the other table.
Is this because I'm using a .jsp table as a data-source? Would this work correctly if I dynamically added all the rows to the table using JavaScript at load-time, or if I used a modelMap collection as a data-source?
Thanks a lot for any advice.
Solution for future googlers - I have no idea how my google-Fu did not find the answer, I had all the right keywords!
In short:
I was doing this to add:
$('.my-other-table-class').append(row);
And this to remove:
var row = $(this).closest("tr").remove().clone()
but I should've been doing this add:
$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);
And this to remove:
$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);
With more detail:
What I am really doing here is modifying the DOM with JQuery (well duh, but I'm really new at this, remember...) - I figured the DOM was the data-source for my table, so that made sense? The table is redrawn, it rereads the DOM and updates? Well not really.
In order to be dynamic, if you use DOM (in other words HTML, or in my case .jsp rendered as HTML) as your data-source, upon initialization, datatables will copy all that information into a JavaScript array.... so rather then my original thought:
"The DOM is not updating correctly, and that issues is propogating up in to my table... because HTML is static...or something?"
it turns out the actual problem was:
"I was updating the DOM, but the real data source was a JavaScript array I wasn't seeing. So upon redraw, this array was overwriting the DOM and my changes were being lost."
TL;DR: Use the Data-tables API and don't modify the data-source directly, unless you need to.
If the event handlers are one of the issues, it may help to set up your event handler like this:
$("#myTable").on("click", "button.moveMe", function(e) {
e.preventDefault();
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
});
This will set a handler on the table that has id="myTable". The handler will look for click events on buttons with the "moveMe" class. It will catch the event on rows that are added later, as well as the rows that exist when this hook is created.
Reference: http://api.jquery.com/on/
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.
I'm trying to create a Live Table Edit with Jquery but I'm having trouble with getting it to fire on my td's rather then the tr
Here is my code.
http://jsfiddle.net/y7Zck/1/
This works almost as intended. What I would like to change is so that the function doesn't fire if you hit the frameTot with value 150 in this example. You should only be able to click on the first two fields and get the edit boxes to show. How would I go about doing this?
My attempt to change
$(".edit_tr").click(function()
to
$(".edit_td").click(function()
Doesn't seem to help at all.
It's not working because, of this line var ID = $(this).attr('id'); It's right when you are using tr and it's returns the tr ID. When you change it to TD click, the ID changes. You need to get TR id to make it work properly.
Change it to
var ID = $(this).parent().attr('id');
Check Here, http://jsfiddle.net/muthkum/y7Zck/2/
Your script is accessing $(this).attr('id') which (of course) isn't the same for your td as it is for your tr.
You need to update both listeners to use something like $(this).closest('tr').attr('id') or parseInt($(this).attr('id'), 10) (grabbing just the number-part from your td's ID).