I have a collapsible table, where the rows can be expanded to show more information. I am trying to write a script that can dynamically add new rows to the table as the result of an API call. When I insert the rows directly inside the HTML script, there is no problem, however when i render these rows dynamically using JQuery JS, the table loses it's collapsibility and stays permanently extended. here is the JSFiddle that visualizes this problem: https://jsfiddle.net/cgsLueyr/16/
I believe that the problem lies with the following function, but I have no Idea how to remedy this.
(function ($) {
$(function () {
$('.table-expandable').each(function () {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
table.children('tbody').children('tr').filter(':even').click(function () {
var element = $(this);
element.next('tr').toggle('slow');
element.find(".table-expandable-arrow").toggleClass("up");
});
table.children('tbody').children('tr').filter(':even').each(function () {
var element = $(this);
element.append('<td><div class="table-expandable-arrow"></div></td>');
});
});
});
})(jQuery);
Notice how the table rows that render BEFORE the "startup()" function runs have collapsibility, while the table rows that are added as a result of "startup()" do not share the collapsibility.
I have a table for loading data and i wrote a code which assigns each table an href with javascript since the serverside enabled i can't assign each td a href. Therefore, each time page changes or search query invoked i need to assign href to client side table rows.
Here is what i put so far:
function assign_href_to_tables() {
console.log("Run assign_href_to_tables");
// access all td variables when serverside enabled.
$('#table').on( 'order.dt', function () {
var table_rows = $('#table').find('tbody tr');
console.log(table_rows)
// scan through table rows and assign onclick event to each row.
table_rows.each(function(index, element) {
$(this).click(function() {
var id = $(this).find('td:nth-child(1)').text();
// reidrect to the edit page with the id of the clicked row
window.document.location = '/detail/' + id;
});
});
} );
}
I invoke the assign_href_to_tables function in initComplete e.g.:
"initComplete": function( settings, json ) {
assign_href_to_tables();
},
If i call the function on document ready it will affect only the first page. When page changes or search request queried href stops working.
I tried to follow this link but i did not understand it nor i could implement it.
As long as i understand, the problem arise initComplete does not wait for the table data to load. I don't know what is missing in my work. Thank you.
I am using Datatables JQuery plugin in order to show data on a table.
In one of the columns I have added also a button to edit the rows.
What I am trying to do is when I click one of the buttons, to deactivate all the others.
Here is my current code together with a screenshot:
$(document.body).on("click", "._edit_save_btn",function(e){
var id = this.id; // get id of selected btn
// disable all other buttons but selected
$("._edit_save_btn").not("#"+id).prop('disabled', true);
)};
Although this works fine for the first page of data (paginated presentation), when I change page, it seems like that the property disabled is not applied.
Thus I can click any other button in order to add the property disabled.
I thought by using the on click event things would work. What am I missing here?
EDIT
The table is created automatically using DataTables jquery plugin and jquery functionality.
On page load my html structure looks like this:
<table id="example">
<thead id="table_head">
</thead>
</table>
Then the table is populated with data coming from Django. The button element looks like this:
edit_btn = '<button id="' + row_id + '" class="btn btn-info btn-sm _edit_save_btn" style="background-color:#a7a3a3;border-color:#a7a3a3">Edit</button>'
EDIT_2
This screenshot explains better what I mean with pagination and changing pages. Please check the lower right corner to see the pagination. When I go to another page (e.g. from 1 to 2) then I see that the disabled property wasnot applied for the buttons on that page:
EDIT
With the help of #Sherin Jose I have managed to reach to this point:
var disable_buttons = function(class_exists){
if (class_exists){
alert("dfdf")
$("._edit_save_btn").not(this).prop('disabled', true);
}
};
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array
}).on( 'page.dt', function () {
class_exists = $("button").hasClass("clicked");
//alert(class_exists)
disable_buttons(class_exists)
});
Whenever a user clicks a button, then the button gets a class called clicked.
Then in the disable_buttons function, I check if this class exists (the 'clicked' class). If it exists I want to disable the other buttons on page change event.
The issue I am facing now is that the
on( 'page.dt', function () {
is executed before the datatable is loaded!
Try this one,
//define the disable feature as a function
var disable_buttons = function(){
$("._edit_save_btn").unbind("click").click(function(e){
// disable all other buttons but selected
$("._edit_save_btn").not(this).prop('disabled', true);
});
};
//call the above function on dataTable init and page change events like:
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array,
"fnDrawCallback":function () {
disable_buttons();
}
});
So I have 2 html pages. 1 that functions as container and 1 that functions as content.
When I load the content page with a table I'm able to use drag and drop.
But when I go to my container page and load the content page into a div with ajax, the drag and drop stops working. All other javascript functionalities inside the content page still work. How can I bind the jquery dnd plugin to the table loaded with ajax?
I'm using drag & drop with this as tutorial http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
my code looks like this:
$(window).load(function()
{ if(temp == 0)
{
DP("eerste keer")
load_table();
temp = 1;
}
} );
function load_table()
{
DP('load_table');
$.ajax({
//async: false,
type: "POST",
url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
success: function (data) {
$("#diagnoses_zelf").html(''); //<== clears current content of div
$("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
},
error: function(){
alert('error');
}
}).done(function() {
update_table();
initialize_table(); // <== calls jquery plug in
});
return false;
}
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
alert(tableid);
$(tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
alert(tette);
},
dragHandle: ".dragHandle"
});
}
How is this possible and what can I do about it?
Can anyone help me with this please.
Very short:
I want access to the ID of the table I load into my container page with ajax and use the jquery drag and drop plug in on it.
EDIT
Findings:
Somehow my table in the container page got renamed to pSqlaTable instead of the id I gave to it in the controller page which is.
<table id="tableDiagnose" class="table table-hover">
Thats why the code couldn't find the table annymore Got fixed by this code thanks to Fábio Batista:
$('#diagnoses_zelf table').tableDnD( ... );
, but how can I use the dnd plugin now ?
It finds the table now, but I'm still not able to bind the dnd plugin to it, Am I able to bind a jquery plug in to ajax loaded tables ?
EDIT
//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id');
alert(tableid);
$('#' + tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
alert('issemer?');
},
dragHandle: ".dragHandle"
});
}
This is the code i'm still stuck with. tableid is correct but the initialisation of the jquery isn't. I can't drag the drows in the table. Is my syntax wrong ?
EDIT
Could it be that I can't bind the jquery to the table because I dynamicaly generate the table on the other page with ZPT (or javascript) ?
The issue with plugins.
You're mixing lots of external libraries and code. This results in possible mis-matches between versions, and a lot of black boxes in your code.
As a developer, this should make you feel very uneasy. Having code you do not fully understand in your code base can get really frustrating really fast.
The alternative.
Often, these sort of plugins provide functionality we, as JavaScript developers can accomplish just as easily without them. This development process, in simple enough scenarios, lets us create code we understand and have an easier time maintaining. Not only do we learn from this process, but we also create smaller bits of specific code. Community driven solutions are very good in general, but it's important to remember they're not a silver bullet. Often you're stuck using a not-so-active project which has a bug for your specific case and you have to dig through a large, unfamiliar code base.
Your code
So what does this drag and drop plugin do?
Well, I'd break it down as the following:
Listens to the mousedown event on table rows
When such an event fires, start moving the table row to match the mouse position
When mouseup occurs, detect that, and finalize the position.
Let us see how we can do something similar.
Let's assume the table's HTML is something like:
<table>
<tbody>
<tr>
<td> Hello 1</td>
</tr><tr>
<td> Hello 2</td>
</tr>
</tbody>
</table>
Here is a fiddle with the table with some basic styling applied
Next, we'll listen to the selection events. We'll add an event to the table rows for selection and to the document to when the mouse is up. jQuery has event listeners for such events. Since we want these events to stick even after AJAX, we'll use .on which lets us use delegated events. .on means that even if we add content to the table later, it won't matter.
var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
$("#textDiv").text(this.textContent);
selected = this;
});
$(document).on("mouseup",function(){
$("#textDiv").text("Left "+selected.textContent);
selected = null;
});
Here is a working fiddle of such code.
Now, we'll want to actually change the drag&drop to work when, that is, update the current position to the one reflecting the mouse position. We can listen to mousemove events, and detect the element we're currently on. Something like
$(document).on("mousemove",function(e){
$("#textDiv").text($(e.target).html());
});
You can see a working fiddle here
That's nice, but we want to actually change the element position. So we'll need to change the table structure to allow that. We can remove the element, and append it at the correct position. We'll check if we have a selected element, and if we do, we can track it compared to the current element in the mousemove event. We can for starters detect if we should drag with something like:
$(document).on("mousemove",function(e){
if(selected !=null){// got an element selected
if($("#MySpecialTable").has(e.target).length > 0){ //in the table
$("#mousePos").text("DRAGGING");
}
}else{
$("#mousePos").text("NOT SELECTED");
}
});
(Fiddle)
Now, we'll add actual selection, we'll replace the elements when the target is not our element and we're in the table. Our full code should be something like:
var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
e.preventDefault();//stop the text selection;
$("#textDiv").text(this.textContent);
selected = $(this);
selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
$("#textDiv").text("Left "+selected.text());
selected.find("td").css("background-color","");
selected = null;
});
$(document).on("mousemove",function(e){
if(selected !=null){// got an element selected
if($("#MySpecialTable").has(e.target).length > 0){ //in the table
var el = $(e.target).closest("tr");//the tr element we're on
el.before(selected);// replace the elements
}
}else{
$("#mousePos").text("NOT SELECTED");
}
});
$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table
(Fiddle)
Now, so far we only have a few lines of code, which is nice since we know exactly what's going on and didn't need to use lots of lines of external code we don't fully understand.
But will it AJAX?
Let's load the data into the table with AJAX and see! We'll simulate an AJAX response using a setTimeout which would allow us to simulate an asynchronous request. We'll use
setTimeout(function(){
$("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);
This means, update the HTML of #MySpecialTable after one second. Let's see if it works shall we?
So why does it work? well, we used delegated events which means we don't care if the elements we're loading are in the screen right now or not. We had the insight to do this since we built our code ourselves and knew what our final goal was. The only thing left to do is clean the code a little.
We'll wrap our code in the following, to prevent $ from being an issue in non-conflict mode (that is, $ is already taken in the page:
(function($){
})(jQuery);
Next we'll add a binding for our table event:
$.GertVDragTable = function(elementSelector){ // rest of code.
Eventually, our code might look something like this.
Using it, would be a simple $.GertVDragTable("#MySpecialTable"); alternatively, we can put it on $.fn and allow every function to call it. Which is a matter of taste.
No copy-pasta please :) I'd appreciate it if you stop on every stage and think why the next step was taken.
You don't need to use the ID as a selector, you can use any expression that can find your table.
If there's only one table on the resulting $.ajax call, you can search for "a table inside the container", using the container ID, which won't change:
$('#diagnoses_zelf table').tableDnD( ... );
If there's more than one table, use a different kind of selector, instead of the ID. A CSS class works fine:
$('table.table-diagnose').tableDnD( ... );
So does a data- attribute:
$("table[data-diagnose]").tableDnD( ... );
Try adding a title to your table, like so:
<table id = "tableDiagnose" class = "table table-hover" title = "table-content">
Then use the jQuery attribute selector to find this table instead of finding it by id.
$('table[title="table-content"]').tableDnD({
// the rest of your code
If your id is changing you should not use an ID then:
<table class="tableDiagnose table table-hover">
Plugin
function initialize_table()
{
$('.tableDiagnose.table').tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
dragHandle: ".dragHandle"
});
DP('nee');
}
EDIT: ajax is asynchronous :
function load_table()
{
DP('load_table');
$.ajax({
//async: false,
type: "POST",
url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
success: function (data) {
$("#diagnoses_zelf").html(''); //<== clears current content of div
$("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
update_table();
initialize_table(); // <== calls jquery plug in
},
error: function(){
alert('error');
}
});
//removed .done as you already have a success option in ajax
return false;
}
EDIT: found your bug........
you retrieve the table id then select it in $(tableid) but you missed the #
function initialize_table()
{
/*
var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
alert(tableid);
// but you really should limit the use of variables when you don't need them*/
//$('#'+tableid).tableDnD({
//like this directly
$('#diagnoses_zelf table').tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
//alert(tette);
},
dragHandle: ".dragHandle"
});
}
See the demo here
EDIT
Do you include the script file in the container page or in the content page? I guess you might want to try to load it when calling the dnd plugin with getScript:
...
$.getScript('pathTotableDnDlib').done(function(){
$(tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
alert(tette);
},
dragHandle: ".dragHandle"
});});
...
more on getscript: here
#BenjaminGruenbaum Hi thx a lot for the tutorial, i modified a bit the code to block the drag n'drop on table headers and to improve the drag fluidity tracking the mouse direction.
var old_y = 0;
(function ($) {
$.GertVDragTable = function (tableName) {
var selected;
$(document).on("mousedown", tableName+" tr",function (e) {
e.preventDefault(); //stop the text selection;
if (($(this).find('th').length)== 0){ //prevent dragging on tr containing th
selected = $(this);
selected.find("td").css("background-color", "black");
selected.find("td").css("color", "white");
}
});
$(document).on("mouseup", function () {
selected.find("td").css("background-color", "");
selected.find("td").css("color", "");
selected = null;
});
$(document).on("mousemove", function (e) {
if (selected != null ) { // got an element selected
if ($(tableName).has(e.target).length > 0) { //in the table
var el = $(e.target).closest("tr"); //the tr element we're on
if (el.find('th').length==0){ //prevent dropping on headers row
if (e.pageY > old_y){ //**
el.after(selected);}else{ //**-->more fluid dragging based on mouse direction
el.before(selected); //**
}
}
}
old_y = e.pageY;
}
});
$(tableName).on('selectstart', false); //Don't let the user select the table
}
})(jQuery);
here's the fiddle http://jsfiddle.net/59rdq/
I hope it will be useful for someone.
I'm developing a tablet application with the jquery.mobile-1.0rc3 version. Previoulsy, I used the jquery.mobile-1.0a4.1 version on another application, and it was possible to refresh a listview by doing myListview.listview( "refresh" ).
I'm having some problems doing the same with the new jquery.mobile-1.0rc3 version. Is it possible to do that with the new jquery.mobile-1.0rc3 version?
Thank you very much.
Here's a bit of the code:
var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );
lists.empty();
/* Fill the lists with jquery template */
lists.listview( "refresh" );
Error:
uncaught exception: cannot call methods on listview prior to
initialization; attempted to call method 'refresh'
Depending on when your code runs it may be running before the jQuery Mobile initialization process. jsFiddle by default runs code after the load event fires so the DOM is all setup and jQuery Mobile has done its initialization. If you change #Phill Pafford's jsFiddle (http://jsfiddle.net/qSmJq/3/) to run on "no wrap (body)" rather than "onLoad" then you get the same error you are reporting. So I recommend either removing the lists.listview('refresh'); line or putting your code inside either a document.ready or a pageshow/pagecreate event handler:
var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );
lists.empty();
/* Fill the lists with jquery template */
//lists.listview( "refresh" );
Here's a jsfiddle for running the code as soon as it is parsed by the browser: http://jsfiddle.net/jasper/qSmJq/5/
Or:
$(function () {
var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );
lists.empty();
/* Fill the lists with jquery template */
lists.listview( "refresh" );
}
Here is a jsfiddle for wrapping your code in a document.ready event handler: http://jsfiddle.net/jasper/qSmJq/4/
Or:
$('#my-page-id').on('pagecreate', function () {
var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );
lists.empty();
/* Fill the lists with jquery template */
//lists.listview( "refresh" );
}
Here is a jsfiddle for using the pageshow event: http://jsfiddle.net/jasper/qSmJq/6/
And here is a jsfiddle for using the pagecreate event: http://jsfiddle.net/jasper/qSmJq/7/
On a side note: if you want to detect whether or not jQuery Mobile has initialized a certain element you can check for the jQuery Mobile specific classes on the element:
$(function () {
//cache lists
var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );
//iterate through the lists
lists.each(function (index, value) {
//cache this specific list
var $value = $(value);
/*add rows to this listview here*/
//check if the listview has been initialized by jQuery Mobile by checking for the existence of the `ui-listview` class
if ($value.hasClass('ui-listview')) {
//since the class was found, refresh the already initialized element
$value.listview('refresh');
} else {
//the class was not found, so initialize the widget
$value.trigger('create');
}
});
});