Dynamically refresh a div without a straightful DOM manipulation - node.js

I have to update for example a table, a list if some values. I can insert new values and try to reload a entire page to show table or list values again.
If I give a try on Ajax updates I have to manipulate DOM, creating a bunch of new tags, concatenate and inject the new HTML on old one. This not a painful way, you even must re-type the code created before to exhibit new entries.
E.g: this is a fictitious example and illustrates what I mean:
$.ajax({
url: '/post/addComment/',
type: 'POST',
data: 'comment=' + comment,
beforeSend : function() {
//waiting message
$('#some_information_div').html('<strong>Updating...</strong>');
}
}).done(function(data) {
//new data comes here (by JSON, plain text, whatever...)
if (data.status == 'OK') {
//OHHH MAN WE HAVE TO POPULATE MANUALLY IT AGAIN
var c = '';
c = '<table>'
data.content.forEach(function(e) {
c += '<tr><td>' + e.name + '</td></tr>';
});
c += '</table>'
//update with new values
$('#some_information_div').html('');
$('#destination_table').html(c);
}
});
Unfortunately I have to do all the time with my lists and tables and somehow I have to re-type codes and manipulate it all by the javascript. I figured out something might be useful like does jQuery.load(), maybe it can fit what I want to, I have not tried it.
Some other languages and frameworks like JSF do it easily with "render technique", you directly update content without have to create and manipulate DOM in manually way.
Please, any kind of suggestion, any clue to this approach will be very helpful.
P.S.: The code sample tag doesn't work well here.

This can be done by using .load() jquery function. I have illustrated for some page 1.php and some table having id mytable
$('table#mytable').load('./1.php #mytable');
for constant refreshing --
setInterval(function() {
$('tablev#mytable').load('./1.php #mytable');
}, 5000);

Related

Mutator runs on update but cell data unchanged

I want to create a new field reservationAction and put into my table as a column Reservation defined as:
{title: "Reservation", field: "reservationAction", mutator: reservationMutator},
with reservationMutator as:
var reservationMutator = function(value, data, type, params, component) {
console.log(data);
if (!data.checkoutable) return null;
if (data.is_reserved) {
return "Free";
}
return "Get";
}
is_reserved and checkoutable are pre-existing fields of my data.
When the page initially loads, and table is created using ajax, the cell shows the correct string for Reservation. When is_reserved is changed server-side, I call table.updateOrAddData([newData]) (as part of websocket event-handler).
The problem:
When table.updateOrAddData([newData]) run, I can see the custom mutator get triggered
and from the console.log() line, see that the reservationAction is correctly set in the log. But the table itself is showing the old value. Other (non-mutating) columns are updated on the table as expected. Am I missing something or is this a bug?
If instead I use table.replaceData(), then both console, and table show correct value. But I would want to avoid doing this on each websocket event for performance reasons.
Version: I've tried all 5+.
Any help would be appreciated!
jsfiddle
Don't know if this is a workaround or how I'm actually supposed to do it in the first place but, doing row.reformat() seems to do what I expect. Oh well.
table.updateOrAddData([row_obj])
.then(function(rows){
rows.forEach(row => {
row.reformat();
});
});

DataTables reload table with different pageLength param

Based on this question.
I initialize my datatables.js table with the following code:
var table_entity = $('#myTable').DataTable({
"pageLength":getParameterByName('pageLength'),//getting param from query string
fixedHeader: true,
"ajax": {
"url": myUrl,
"data": function(d) {
d.type = $('#mytype').val();
}
}
});
So I know how to reload my datatable with different ajax params. Now I need to reload it with different pageLength param which does not belong to ajax section and is recorded during datatables init stage. I tried to pass it directly during reloading with the following code:
table_entity.ajax.reload({
"pageLength":77 //some new param different from the initial one
});
But it did not work, the table is reloaded with initial pageLength value. Any ideas how to fix it would be welcome. Thank you.
UPD_1
managed to do that with
1st: complete destruction of a table:
$('#MyTable').DataTable().destroy();
$('#MyTable tbody').empty();//note tbody here
2nd: reinit the table with updated params:
table_data.displayStart = Number(getParameterByName('displayStart'));
table_data.pageLength = Number(getParameterByName('pageLength'));
table_data.iDisplayStart = Number(getParameterByName('displayStart'));
table_data.iDisplayLength = Number(getParameterByName('pageLength'));
$('#MyTable').DataTable(table_data);
Note 2 params - iDisplayStart and iDisplayLength here
Is it possible to do the same without destruction of the table, but during ajax.reload phase? Thank you.
Is it possible to do the same without destruction of the table, but
during ajax.reload phase?
You can hook into the xhr.dt event and update page.len() from there. Example :
$('#example').on('xhr.dt', function(e, settings, json, xhr) {
table.page.len(json.data.length).draw()
})
Will dynamically set the page length to maximum i.e length of data. Demo -> http://jsfiddle.net/d72zbyus/
So you could use table.page.len(77).draw() or whatever. xhr.dt is triggered after each AJAX request.
It is not clear to me where your new pageLength come from exactly. If it is part of the returned JSON (as I suspect) you could do table.page.len(json.pageLength).draw().

How to display arbitrary, schemaless data in HTML with node.js / mongodb

I'm using mongodb to store application error logs as json documents. I want to be able to format the error logs as HTML rather than returning the plain json to the browser. The logs are properly schemaless - they could change at any time, so it's no use trying to do this (in Jade):
- var items = jsonResults
- each item in items
h3 Server alias: #{item.ServerAlias}
p UUID: #{item.UUID}
p Stack trace: #{item.StackTrace}
h3 Session: #{item.Session}
p URL token: #{item.Session.UrlToken}
p Session messages: #{item.Session.SessionMessages}
as I don't know what's actually going to be in the JSON structure ahead of time. What I want is surely possible, though? Everything I'm reading says that the schema isn't enforced by the database but that your view code will outline your schema anyway - but we've got hundreds of possible fields that could be removed or added at any time so managing the views in this way is fairly unmanageable.
What am I missing? Am I making the wrong assumptions about the technology? Going at this the wrong way?
Edited with extra info following comments:
The json docs look something like this
{
"ServerAlias":"GBIZ-WEB",
"Session":{
"urltoken":"CFID=10989&CFTOKEN=f07fe950-53926E3B-F33A-093D-3FCEFB&jsessionid=84303d29a229d1",
"captcha":{
},
"sessionmessages":{
},
"sessionid":"84197a667053f63433672873j377e7d379101"
},
"UUID":"53934LBB-DB8F-79T6-C03937JD84HB864A338",
"Template":"\/home\/vagrant\/dev\/websites\/g-bis\/code\/webroot\/page\/home\/home.cfm, line 3",
"Error":{
"GeneratedContent":"",
"Mailto":"",
"RootCause":{
"Message":"Unknown tag: cfincflude.",
"tagName":"cfincflude",
"TagContext":[
{
"RAW_TRACE":"\tat cfhome2ecfm1296628853.runPage(\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/home\/home.cfm:3)",
"ID":"CFINCLUDE",
"TEMPLATE":"\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/home\/home.cfm",
"LINE":3,
"TYPE":"CFML",
"COLUMN":0
},
{
"RAW_TRACE":"\tat cfdisplay2ecfm1093821753.runPage(\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/display.cfm:6)",
"ID":"CFINCLUDE",
"TEMPLATE":"\/home\/vagrant\/dev\/websites\/nig-bis\/code\/webroot\/page\/display.cfm",
"LINE":6,
"TYPE":"CFML",
"COLUMN":0
}
]
}
}
... etc, but is likely to change depending on what the individual project that generates the log is configured to trigger.
What I want to end up with is a formatted HTML page with headers for each parent and the children listed below, iterating right through the data structure. The Jade sample above is effectively what we need to output, but without hard-coding that in the view.
Mike's analysis in the comments of the problem being that of creating a table-like structure from a bunch of collections that haven't really got a lot in common is bang-on. The data is relational, but only within individual documents - so hard-coding the schema into anything is virtually impossible as it requires you to know what the data structure looks like first.
The basic idea is what #Gates VP described. I use underscore.js to iterate through the arrays/objects.
function formatLog(obj){
var log = "";
_.each(obj, function(val, key){
if(typeof(val) === "object" || typeof(val) === "array"){
// if we have a new list
log += "<ul>";
log += formatLog(val);
log += "</ul>";
}
else{
// if we are at an endpoint
log += "<li>";
log += (key + ": " + val);
log += "</li>";
}
});
return log;
}
If you call formatLog()on the example data you gave it returns
ServerAlias: GBIZ-WEBurltoken: CFID=10989&CFTOKEN=f07fe950-53926E3B-F33A-093D-3FCEFB&jsessionid=84303d29a229d1sessionid: 84197a667053f63433672873j377e7d379101UUID: 53934LBB-DB8F-79T6-C03937JD84HB864A338Template: /home/vagrant/dev/websites/g-bis/code/webroot/page/home/home.cfm, line 3GeneratedContent: Mailto: Message: Unknown tag: cfincflude.tagName: cfincfludeRAW_TRACE: at cfhome2ecfm1296628853.runPage(/home/vagrant/dev/websites/nig-bis/code/webroot/page/home/home.cfm:3)ID: CFINCLUDETEMPLATE: /home/vagrant/dev/websites/nig-bis/code/webroot/page/home/home.cfmLINE: 3TYPE: CFMLCOLUMN: 0RAW_TRACE: at cfdisplay2ecfm1093821753.runPage(/home/vagrant/dev/websites/nig-bis/code/webroot/page/display.cfm:6)ID: CFINCLUDETEMPLATE: /home/vagrant/dev/websites/nig-bis/code/webroot/page/display.cfmLINE: 6TYPE: CFMLCOLUMN: 0
How to format it then is up to you.
This is basically a recursive for loop.
To do this with Jade you will need to use mixins so that you can print nested objects by calling the mixin with a deeper level of indentation.
Note that this whole thing is a little ugly as you won't get guaranteed ordering of fields and you may have to implement some logic to differentiate looping on arrays vs. looping on JSON objects.
You can try util.inspect. In your template:
pre
= util.inspect(jsonResults)

modified innerHTML does not show on page

I am writing a Google extension. Here my content script modifies a page based on a list of keywords requested from background. But the new innerHTML does not show up on the screen. I've kluged it with an alert so I can see the keywords before deciding to actually send a message, but it is not how the routine should work. Here's the code:
// MESSAGE.JS //
//alert("Message Page");
var keyWordList= new Array();
var firstMessage="Hello!";
var contentMessage=document.getElementById("message");
contentMessage.value=firstMessage;
var msgComments=document.getElementsByClassName("comment");
msgComments[1].value="Hello Worlds!";//marker to see what happens
chrome.extension.sendRequest({cmd: "sendKeyWords"}, function(response) {
keyWordList=response.keyWordsFound;
//alert(keyWordList.length+" key words.");//did we get any keywords back?
var keyWords="";
for (var i = 0; i<keyWordList.length; ++i)
{
keyWords=keyWords+" "+keyWordList[i];
}
//alert (keyWords);//let's see what we got
document.getElementsByClassName("comment")[1].firstChild.innerHTML=keyWords;
alert (document.getElementsByClassName("comment")[1].firstChild.innerHTML);// this is a band aid - keyWords does not show up in tab
});
document.onclick= function(event) {
//only one button to click in page
document.onload=self.close();
};
What do I have to do so that the text area that is modified actually appears in the tab?
(Answering my own question) This problem really has two parts. The simplest part is that I was trying to modify a text node by setting its value like this:
msgComments1.value="Hello Worlds!"; //marker to see what happens
To make it work, simply set the innerHTML to a string value like this:
msgComment1.innerHTML="Hello Worlds!"; //now it works.
The second part of the problem is that the asynchronous call to chrome.extension.sendRequest requires a callback to update the innerHTML when the reply is received. I posted a question in this regard earlier and have answered it myself after finding a solution in an previous post by #serg.

When no data is returned from database

I am intiating a loading panel in init method and hiding it in ReturnDataPayload event.This is working perfectly when data Table has got some values in it.But when there is no data returned from database , the control is not going to returnDataPayLoad event.Please help me in finding an event which will be fired even when the response doesn't have any data or tell me a way to hide the loading panel.
If you want a custom behavior, use DataSource's sendRequest method of the dataTable's dataSource
(function() {
var YdataTable = YAHOO.widget.DataTable,
YdataSource = YAHOO.util.DataSource;
var settings = {
container:"<DATATABLE_CONTAINER_GOES_HERE>",
source:"<URL_TO_RETRIEVE_YOUR_DATA>",
columnSettings:[
{key:"id", label:"Id"}
],
dataSourceSettings:{
responseType:YdataSource.TYPE_JSON,
responseSchema:{
resultsList:"rs",
fields:[
{key:"id"}
]
}
},
dataTableSettings:{
initialLoad:false
}
}
var dataTable = new YdataTable(
settings.container,
settings.columnSettings,
new YdataSource(
settings.source,
settings.dataSourceSettings),
settings.dataTableSettings);
})();
keep in mind No matter which source is your data: XML, JSON, JavaScript object, TEXT, you always will get your data in a unified way through DataSource's sendRequest method. So when you want to retrieve your data and, at the same time, add custom behavior, use it
dataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
if(response.results.length == 0) {
// No data returned
// Do what you want right here
// You can, for instance, hide the dataTable by calling this.setStyle("display", "none");
} else {
// Some data returned
// If you want to use default the DataTable behavior, just call
this.onDataReturnInitializeTable(request, response, payload);
}
},
scope:dataTable,
argument:dataTable.getState()
});
The properties of the response are
results (Array): Your source of data in a unified way. For each object in the results Array, There is a property according to responseSchema's fields property. Notice i use response.results.length to verify if some data has been returned
error (Boolean): Indicates data error
cached (Boolean): Indicates cached response
meta (Object): Schema-parsed meta data
On the YUI dataTable page, look for Loading data at runtime to see some built-in functions provided by YUI dataTable
I hope it can be useful and feel free to ask for help for anything else you want about YUI. See a demo page of nice features of YUI dataTable

Resources