Losing mCustomScrollbar effect when performing an ajax call - javascript

I'm using mCustomScrollbar to replace the default scrollbars in a div tag containing a table that I draw using javascript to help me reload it when performing ajax calls, here is my HTML code :
<!-- the div that will contain the table-->
<div id="countriesTable" class="customScroll" data-mcs-theme="dark">
</div>
Here is the code of the function that loads the data in the table and draws it inside the div
function reloadTable(data, id) {
var str = '<table class="table"><thead>' +
'<tr><th> Column1 </th>' +
'<th> Column2 </th>' +
'<th> Column3 </th>' +
'<th> Column4 </th></tr></thead><tbody>';
for (var property in data) {
if (data.hasOwnProperty(property)) {
str += '<tr>'
str += '<td>' + data[property][0] + '</td>' +
'<td>' + data[property][1] + '</td>' +
'<td>' + data[property][2] + '</td>' +
'<td>' + data[property][3] + '</td></tr>';
}
}
str += '</tbody></table>';
$(id).html(str);
}
And of course the call of the function to load data and also the function that applies the custom scroll bar effect :
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();
When the page is loaded the div gets the custom scrollbar successfully, but when I perfom an ajax call to reload data into my table, and I draw it another time using reloadTable function I lose the scrollbar effect.
I've tried to recall the mCustomScrollbar inside the ajax success function but in vain.

I think you need to remove current mCustomScrollbar like this:
$('.customScroll').mCustomScrollbar("destroy")
$('#countriesTable').html("")
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();

Related

I want to sort my table column on input value AFTER setting value

Newb here...I have a table I created using the jQuery DataTables plugin. Everything is working as expected BUT I added a column that is an input. I'd like for users to be able to sort this column after putting in their values. It is a ranking system that is using quite a long list of items so they need to be able to sort after entering values so that they can keep track of what numbers they've used up to that point. I am setting my variable to be the input value on keyup but after I set the value, I can't sort the column by clicking on the header. It works for the other columns (from jQuery DataTable plugin). Also, if i hard code some text before if the td (before '+sortRank+') it also works as expected. Why is it not recognizing the values for sorting after I set them with jQuery? Thanks for you help!
$(document).ready(function() {
function GenerateTableFromJson(objArray,objArrayTwo,objArrayThree) {
var tableContent = '<table summary="GFSTechIntake" id="AllRequestsTable" style="width:100%"><thead><tr><th>Submit Priority</th><th>Your Prev Rank</th><th>Current Overall</th><th>Category</th>' + '<th>Status</th>' +' <th>Request Name</th>' + '<th>Problem Statement</th>' + '<th>Business Benefits</th><th>Dept(s)</th></tr></thead><tbody>';
var sortRank = "";
$('input.title').on('keyup',function(){
sortRank = $(this).val();
});
tableContent += '<tr class="allItemsTr">';
if(rank != ''){
tableContent += '<td class="allItemsPriority">'+sortRank+'<input class="title" placeholder=' + rank + ' value='+rank+'></td>';
} else {
tableContent += '<td class="allItemsPriority"><input class="title" placeholder=' + rank + '></td>';
}
tableContent += '<td class="prevRank">N/A</td>';
tableContent += '<td class="currentRank">N/A</td>';
}
return tableContent;
}

Make link during dynamically populating the table using Jquery

I want to make the link from during dynamic populating the table using Jquery. I am populating the table data as
trHTML +=
'<tr><td>'+ value['value1'] +
'</td> <td>' + value['value2'] +
'</td> <td>' + value['value3'] +
'</td><td>'.html('' + "Link" + '')+
'</td></tr>';
But it gives error
Uncaught TypeError: "</td><td>".html is not a function
You don't need to use .html() continue string concatenation.
'</td><td>' + '' + "Link" + ''+
However, I would recommend you to create HTML using jQuery( html, attributes ) method for cleaner approach.
var tr = $("<tr>")
var anchor = $("<a>", {
"href" : "http://www.google.com/" + value['valueLink'],
"text" : "Link"
});
var td = $("<td>");
td.append(anchor);
tr.append(td);

How to Prevent TD from ending up on a new line?

I am dynamically creating a table through Javascript and I DO want the table to continue off the right side of the page. Doing this manually lets the table continue off, but once I feed this into a for loop the <td>s wrap into a second line in the rendered HTML, creating two or more table rows when they reach the end of the page.
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0">
<tr></tr>
</table>
</div>
This is inside a table of its own (no style formatting). Then the Javascript:
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>"
for(i=0; i<numpanels; i=i+1)
{
panelindex.innerHTML = panelindex.innerHTML + "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + zeroFill(i,2) + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>\n";
}
panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"
You may notice that there is a <div> in the <td> and that is so I can apply a border marking the panel. Without the <div> it seems I cannot do that, and there are some other undesired effects. Any ideas what I can do so that all the <td>s end up on one line rather than split to a new line?
Example of what I want: http://edwardleuf.org/comics/jwb/009-conmet
What is happening: https://jsfiddle.net/w4uh0a3j/7/
Click the Show link.
innerHTML does not hold the string value you assign to it.
It parses the value as HTML, creates a DOM from it, inserts it into the document and then, when you read it back, it converts that DOM back into HTML.
This means that the string you assign is subject to error recovery and normalisation. In particular, the end tags you omitted are fixed.
panelindex.innerHTML = "<table border='0'><tr>"
console.log(panelindex.innerHTML);
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0"><tr>
</tr></table>
</div>
So when you start appending more data to it:
panelindex.innerHTML = panelindex.innerHTML + "<td>etc etc
You end up with:
<table border="0"><tbody><tr></tr></tbody></table><td>etc etc
Store your data in a regular variable. Only assign it to .innerHTML once you have the complete HTML finished.
A better approach then that would be to forget about trying to build HTML by mashing strings together (which is error prone, especially once you start dealing with characters that need escaping in HTML) and use DOM (createElement, appendChild, etc) instead.
OK,here is fixed html and js code. It seems like innerHTML fixes missing closing when updating html before all the code is building the rest of innerHTML. This code works :
<div id="panelindex" style="overflow:scroll;text-align:center;">
</div>
and js code :
var numpanels = 100;
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>";
var html = "<table border='0'><tr>";
for(i=0; i<numpanels; i=i+1) {
html += "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>";
}
html += "</tr></table>";
document.getElementById("panelindex").innerHTML = html;

jQuery selector unable to find table row class

Given an array of strings returned from an sql query, I am appending the data as rows into my html table via javascript:
loadUsers: function()
{ .
.
.
function displayUsersOnTable(response)
{
for(var i = 0; i < response.results.length; i++)
{
var contact = response.results[i];
var $newRow = $('<tr class="user-row">' +
'<td>' + contact.full_name + '</td>' +
'<td>' + contact.email + '</td>' +
'</tr>')
.data('user', contact);
$userTableBody.append($newRow);
}
}
}
Inside a different function that is called after loadUsers is called, I have this:
$('.user-row').click( function() {
window.alert("CLICKED");
});
When I run my site it won't register the click event. If I select the classes from my table row or table header it runs fine. I suspect the problem involves the fact that the table rows are dynamically generated. When I inspect element everything is in place. What am I missing?
try:
$(document).on('click', '.user-row', function() {
window.alert("CLICKED");
});

How to use dojo.query() and dojo.place() together?

I'm trying to create a dynamic table which will have rows added and removed throughout its use. I do not want to have to put id's on every container that I later want to reference.
For instance, I want to add a hidden input to the last cell of a dynamically added row. The row has an id, how can I use dojo.place() when I do not have an id on the last cell?
var pmrCount = dojo.query("#pmhTable >tbody >tr").length;
var rowID = 'pmr_' + pmrCount;
var newPmrRow =
'<tr id="' + rowID + '">' +
'<td>' + pmh + '</td>' +
'<td>' + String(pmr.severity).charAt(0) + '</td>' +
'<td>' + pmr.customerName + '</td>' +
'<td>' + pmr.deviceType + '</td>' +
'<td>' + pmr.deviceModel + '</td>' +
'<td>' + pmr.deviceSerial + '</td>' +
'<td align="center"><a class="cancel-link"></a></td>' +
'</tr>';
//dojo.place(newPmrRow, dojo.query("#pmhTable >tbody"));
var newPmrHiddenInput =
'<input type="hidden" name="pmrs" value="'+ JSON.stringify(pmr)+ '">';
//dojo.query("#" + rowID + " td:last").place(newPmrHiddenInput);
The two commented lines of code are the ones that I am trying to replace with functional code. These do not work, they don't surface any warnings in the error console like other syntax errors. Not sure where to go from here.
I know that dojo.query() returns a NodeList and place() is expecting an DOM node or an id. What's the correct way to do this?
You want to look at the dojo/NodeList-dom extension to Nodelist. It allows you to place each element in a NodeList into an element based on query selector . In AMD Style it looks like:
require(['dojo/dom-construct', 'dojo/NodeList', 'dojo/NodeList-dom', 'dojo/domReady!'], function (domConstruct, NodeList) {
var nodes = new NodeList([domConstruct.toDom('<div>someContent</div>')]);
nodes.place('#x');
});
Looking at the docs I was kind of surprised there wasn't an easier way to do this, so maybe there is a better way than this.
Well, I found two lines of code that seem to work, but I don't know if referencing NodeLists in an Array style is technically correct for this. This is what I did.
dojo.place(newPmrRow, dojo.query("#pmhTable >tbody")[0]);
dojo.place(newPmrHiddenInput, dojo.query("#" + rowID + "> td:last-child")[0]);

Categories