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.
Related
I am using Ajax Load More to load some tables on my WordPress website. I added a sorting function to the table using a plugin called sortable.
Before loading with ajax, I can sort out the table by simply adding data-sortable to the table tag like this <table class="uk-table uk-table-large" data-sortable>.
But it stopped working once I started using ajax to load the tables.
So I tried to initialize the sorting on each table loaded via ajax using the code below:
jQuery(document).on('click', '.floor .uk-table', function() {
Sortable.init()
});
The code seems to work but I had to click each tables' headers twice for each column to be sorted out. I am not an expert with javascript so I am not sure why this is happening.
Instead of adding a click event listener to the document you can just add it directly to the class itself.
Example:
jQuery('.uk-table').click(function() {
Sortable.init()
});
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.
I used twitter bootstrap for my system. For displaying all of my data from the database, I used dataTables for it. I've added a new column as "Action" that contains 2 buttons, edit and delete. But when the record reaches more than 10 for the first pagination, all of the rows which contains my buttons on the second pagination and next pagination does not execute my jQuery code that handles the delete and edit function.
Can anyone help why is this happening? What are the possible solution for this problem? Really need it. Thanks.
Supposing you bind your delete and edit function on $(document).ready() then the explanation is simple: at that point only the first page is available in the DOM and only the buttons on the first page will bind.
What you need to do is to rebind your events every time you change the page. For this, you need to call your binding jQuery code (let's say you have a method named BindEvents() that does that) on the fnDrawCallback event of your DataTable:
var dataTable = $("#YourTable").dataTable({
// additional data table params,
"fnDrawCallback": function () {
BindEvents();
};
See http://legacy.datatables.net/usage/callbacks#fnDrawCallback for more details.
I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
Hi I have several buttons the first one is a show/hide and it works correctly when it is first clicked on. The second one is next table and when next table is clicked on it should be hiding table 1 and only displaying table 2. Then if the hide button is clicked it should hide both table1 and table2 and currently table 2 still shows when the hide button is clicked. Here is an example of my problem and code: http://jsfiddle.net/zfnx6/27/
I updated your code to behave like you described, the biggest change was to define the outer table as a container for table1 and table2. That way clicking on the top button (Show/Hide) affects both tables at once rather than having to mess with if statements for both tables.
There were some parameters changed with the buttons in the HTML, and the second button became a toggle for both tables. If you will use more than two tables, the current approach won't be too effective.
Demo http://jsfiddle.net/zfnx6/41/
$(document).ready(function(){
$("#hide").click(function(){ //#hide use your element id
$("p").hide(); // use your element to hide
});
$("#show").click(function(){ //#show use your element id
$("p").show(); // use your element to show
});
});
This is just basic way
Take a look at jquery ui accordian.
If you want only one table showing at a time, you may want to consider using this.
In your fiddle, you are not using jquery. Showing and hiding elements in jquery is very easy, and reduces your code quite a bit.
If you're interested in using jQuery it would clean up your code a lot. Here's an example: http://jsfiddle.net/zfnx6/43/
My own variation: http://jsfiddle.net/zb9Tt/
I made a couple changes to your HTML, but mostly this is about the javascript. The following is some pretty light jQuery that will do what you want for an unlimited group of toggleable objects on the page. The active class is used to show the currently selected "tab".
(function ($) {
$(document).ready(function () {
$("#togglebutton").bind("click", function () {
$(".active, #nextbt").toggle();
});
$("#nextbt").bind("click", function () {
var current = $(".active");
var next = $(".active + .toggleable");
if (next.length) {
current.removeClass("active").hide();
next.addClass("active").show();
}
});
});
})(jQuery);