Escaping HTML with datatables

rage10940

I have datatables set up like so :

[code]


<?php $options = array("" => "", 'start' => 'Start Session', 'stop' => 'Student Not Present', 'abandon' => 'End Session', );
foreach ($waiting as $row)
{
?>

<?php echo htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo anchor('studentqueue_controller/history/'.urlencode($row['anum']). '', htmlspecialchars($row['anum'], ENT_QUOTES, 'UTF-8'), 'target="_blank"'); ?>
<?php echo htmlspecialchars($row['first'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['last'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['SECOND'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['reason'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['studentcomments'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['aidyear'], ENT_QUOTES, 'UTF-8'); ?>
<?php echo htmlspecialchars($row['counselorcomments'], ENT_QUOTES, 'UTF-8'); ?>

<?php echo form_open('studentqueue_controller/counselorscreen/' .urlencode($row['id']). ''); ?>
<?php echo form_dropdown('options', $options, ""); ?>
<?php echo form_submit('submit', 'Submit'); ?>
<?php echo form_close(); ?>



<?php
} ?>

[/code]

To my understanding when using datatables ajax source like in this example :

http://www.datatables.net/examples/data_sources/ajax.html

you leave the space in between empty using the datatables to retrieve the data.

My problem is in the security aspect of this, and all in all how do I allow datatables to do the samething I am currently doing (look at code above) and then have it use ajax processing. I am kind of confused. I also have another question that I would ask but I will ask that after your response to this question.

Also Allen I am very grateful for all your doing. I know you get this a lot, but me and my College are loving the design of DataTables.

The application I am writing might be expanded to serve multiple college offices, and even different colleges. And on all my presentations I get "Those tables look awesome" "I love the search features" so I am very thankful for all you are doing. There are times I get pissed of datatables but thats probably my fault as I suck with client side scripting. I'm a php guy.

allan

I"m a bit confused as well :-). I don't understand what the security issue is? I also don't understand why you are being Ajax sourced data and DOM sourced data?

Allan

rage10940

Sorry for the confusion. I was just asking if DataTables did any sort of escaping of user inputted data.

I am however having troubles... or possibly a misunderstanding of the AJAX sourced data...

I have two different tables on the same page, and when I was working with the ajax sourced data, I was under the impression that doing it this way my tables would be updated with new data automatically either in the form of rows "disappearing" or "appearing"

Isn't what the AJax sourced data is there for?

[code]


$(document).ready(function()
{
$('#waiting').dataTable(
{
"sPaginationType":"full_numbers",
"bJQueryUI":true,
"iDisplayLength": 10,
"aLengthMenu": [5, 10],
"bProcessing": true,
"sAjaxDataProp": "waiting",
"sAjaxSource": 'https://www.finaidtest.com/index.php/studentqueue_controller/ajaxcall'
});
$('#beingseen').dataTable(
{
"sPaginationType":"full_numbers",
"bJQueryUI":true,
"iDisplayLength": 10,
"aLengthMenu": [5, 10],
"bProcessing": true,
"sAjaxDataProp": "beingseen",
"sAjaxSource": 'https://www.finaidtest.com/index.php/studentqueue_controller/ajaxcall'
});
});


[/code]

just to be more clear :

I have two tables, both of which relay on each other in the back end but show different views (that isn't important as the queries work and what not)...

what is important is :

1) Isn't Ajax loaded data supposed to update manually as in the table gets a new row or loses one row?

2) Is it possible to add hyper links and or options to the table?

An example would be : if I want a user ID to be a hyper link to another page that displays old orders?

and an example of options :

If i want to delete a user / update a user? so you could of the options as a button? I will google around for this information.

Any word from you would be much appreciated.

rage10940

1) using fnAjaxReload

2) using mRender

I need datatables to look like this :

http://www.freeimagehosting.net/lbbmq

In that example I hard coded my drop down and hyperlink into the datatables. Is it possible to do so with your API plugins?

allan

> 1) Isn't Ajax loaded data supposed to update manually as in the table gets a new row or loses one row?

Sure - just call fnReloadAjax on each table when an event occurs that you want to update the contents of each table (perhaps a 15 second poll?). It isn't called automatically at all - DataTables doesn't know when the data has changed - you need to call it when needed.

> 2) Is it possible to add hyper links and or options to the table?

It certainly is - use mRender .

> In that example I hard coded my drop down and hyperlink into the datatables. Is it possible to do so with your API plugins?

You could call fnUpdate to replace the cell's content if that is what your intention is.

Allan

rage10940

I understand mRender, but fnUpdate? I have just made a generic row that doesn't get data passed to it. So would I still need to use fnUpdate? Or could I just use mRender, and hard code the drop down menu like I would for hyper links?

allan

fnRender is rewriting the data, which is why you can't reuse the same data. This is a flaw in fnRender, and as I say one of the reasons it has been removed.

mRender gets passed the data from mData in the first parameter and the full data source object for the row in the third parameter.

Allan

rage10940

Hi Allan,

I have successfully created the hyperlinks in my Student ID column, but now I am having a very hard time finding anything remotely close on how to use fnUpdate for the drop down menu submission form? I keep running into Datatables Editor and a lot of "fnrender outdated - stuff"

I also figured out how to use fnreloadajax just yet to do it I been working on the hyperlinks and the drop down first.

(another question) :

Can I fnReloadajax() for two tables at the same time?

example :

[code]

var oTable = $("#waiting')................

and then just call a function like so ;

setInterval( function () {
oTable.fnReloadAjax();
}, 1000 );

then var oTable2 = $('#beingseen')................

setInterval( function () {
oTable2.fnReloadAjax();
}, 1000 );

[/code]

I also took a look at :

bDeferRender which would be feasible solution to the amount of data that I will be passing so it can help improve speeds. Do you recommend anything else for Ajax-sourced data on the client side?

As always many thanks.

allan

> but now I am having a very hard time finding anything remotely close on how to use fnUpdate for the drop down menu submission form?

I don't understand I'm afraid. What about fnUpdate isn't working for a drop down (by which I presume you mean a `` element)? A link to a test case showing the issue would be exceptionally useful.

> Can I fnReloadajax() for two tables at the same time?

No. You might be able to modify it to do so, but it currently doesn't.

> Do you recommend anything else for Ajax-sourced data on the client side?

Not particularly. bDeferRender is the most significant change you can make.

Allan

rage10940

Sorry I didn't ask my question correctly.

What I mean about fnUpdate is that I can not find any usage examples/notes of it other than the API pages itself. I am quite confused on how to actually use it to be honest with you.

All I need is a drop down for a basic that will then submit to my CodeIgniter controller.

Do you by any chance know of any forum posts?

Just to add on I don't need the Select option to have any data passed to it. I can "hard code" the data.

Also when you say fnReloadajax() cant be used on two tables do you mean in the same script? Or could I just change the names of the var = table.....

then use the fnReloadajax()?

Is it a limitation of DataTables that two tables can't send automatic ajax requests?

Thanks again Allan.

allan

fnReloadAjax can be used on as many different tables as you want on the page. It cannot be used on two tables "at the same time" (i.e. a single Ajax request for two table, both updating simultaneously). For that you would need to make your own Ajax call, or modify the plug-in.

Regarding fnUpdate - I'm still confused as I don't know what the intention is. Is there a click needed to call fnUpdate which will then populate a cell with the `select` list? If so, what is the code you are currently using for this. It should just be a call to fnUpdate for that target cell.

Allan

rage10940

Ah alright thank you for clarifying the fnReloadAjax.

As for the fnUpdate, I am still confused as how to use it? The drop down has to be on each row. So what I mean by this is that I need something similar to this :

http://www.freeimagehosting.net/lbbmq

What I don't understand though is :

How could fnUpdate be used to create a drop menu? (a select with options and different values) so yes a HTML drop down menu, per each row generated. with a submit button.

I can't seem to find anything on real world usage of fnUpdate.

And no, no click needed. I need it once the table is populated, I need a drop down menu with values that will be submitted to my controller.

Hopefully this clears it up for you.

Thanks Allan.

allan

I still don't understand why you would want to use fnUpdate for it? If it is going to be in array row, why not use mRender or similar?

For fnUpdate - simple example: http://live.datatables.net/uxemoz/edit#javascript,html . Feed it the row and the column you want to update with the data you want to update it with.

Allan

rage10940

Ah... I suspect I took your works out of context and for that I apologize. -> picture : http://www.freeimagehosting.net/z86um

So then yes, I could use mRender like I did with hyperlinks to hard code a form and in that form I could post the form action to my controller method. Very well.

I confused myself.

Thanks a lot Allan,
Slowly but surely :)

allan

We got there in the end. nice one :-)

Allan

rage10940

Hi Allan,

Me again. I am currently having problems with something apart from the dropdown menu ... I keep getting this error :

DataTables warning (table id = 'waiting'): Requested unknown parameter '9' from the data source for row 0

I have 10 rows one of which is a generic row with a in it that doesn't get sent through JSON.

This is my initialization :

[code]
$('#waiting').dataTable(
{
"sPaginationType":"full_numbers",
"bJQueryUI":true,
"iDisplayLength": 10,
"aLengthMenu": [5, 10],
"bProcessing": true,
"sAjaxDataProp": "waiting",
"sAjaxSource": 'https://www.finaidtest.com/index.php/studentqueue_controller/ajaxcall',
"bDeferRender": true,
"aoColumns":
[
{"mdata": "id"},
{
"mdata": "anum",
"mRender": function (data, type, full)
{
return ''+data+'';
}
},
{"mdata": "first"},
{"mdata": "last"},
{"mdata": "SECOND"},
{"mdata": "reason"},
{"mdata": "studentcomments"},
{"mdata": "aidyear"},
{"mdata": "counselorcomments"},
{"mdata": null,
"mRender": function (oObj)
{
var form = "";
var select = '';
var option1 = '';
var option2 = 'Start Session';
var option3 = 'Student Not Present';
var option4 = 'End Session';
var end = '';
var input = '';
var end1 = '';

return form+select+option1+option2+option3+option4+end+input+end1;
}
}
]
});
[/code]

I am aware of why this happens : because I have more rows then fields of data being sent through in my JSON calls. But In this case I do not have more rows then JSON... I have exactly 9 rows that depend on the JSON data, then I have that extra 1 row that I made the drop menu on...

This is a link to my JSONLINT :

http://www.freeimagehosting.net/86yn4

and the data (all the data) even gets posted to the datables (after I hit the OK button for the error that pops up)

this is a picture of my data on my datatables just fine

http://www.freeimagehosting.net/42p54

and this is my debugger :

http://debug.datatables.net/ujiyug

Thanks Again Allan.

rage10940

Also please note :

In the JSON LINT picture "id" / "0" is there... I just didnt get the scroll correct on the picture.

rage10940

Sorta "figured" out the problem, if you will but have no idea implementation wise or even if this is a right way to go about it... but :

The JSON array is looking for a 9th parameter but there isn't going to be one since the mRender is just making a generic drop down with "hard coded" values such as :

value="1"
value="2"
value="3"

what I am doing though, is that I need to "reuse" one of my parameters called ID twice. It is used first when I am populating the table.

Then it is being used again when I am trying to enter the ID into the URL.

[code]

"aoColumns":
[
{"mdata": "id"},
{
"mdata": "anum",
"mRender": function (data, full)
{
return ''+data+'';
}
},
{"mdata": "first"},
{"mdata": "last"},
{"mdata": "SECOND"},
{"mdata": "reason"},
{"mdata": "studentcomments"},
{"mdata": "aidyear"},
{"mdata": "counselorcomments"},
{"mdata": "id",
"mRender": function (data)
{
var form = "";
var hidden = '';
var select = '';
var option1 = '';
var option2 = 'Start Session';
var option3 = 'Student Not Present';
var option4 = 'End Session';
var end = '';
var input = '';
var end1 = '';

return form+hidden+select+option1+option2+option3+option4+end+input+end1;
}
}
]
[/code]

Just to describe my thought process :

1) I create all the fields use mData (that works)
2) I created a drop down menu using mRender
3) In the form action I want to include the ID into it by "reusing" the parameter from the first mData

However though... when doing this a problem occurs... the URL is :

https://www.finaidtest.com/index.php/studentqueue_controller/counselorscreen/null (this is a internal only url)

so the "id" and the (data) is not returning anything?

Isn't function (data) supposed to take the mData: "id" value and use it?

Is my thought process on this correct?

Is this possible to reuse the parameter again Allan?

Thanks in advance.

rage10940

Final update for this disgusting thread! :P

All is working fine and peachy. I had a lot of issues with aocolumn and mData, for some reason the mData had to be in the same order as my JSON data, so I made a cosmetic change and I like it a lot more now.

fnReloadAjax works perfectly fine.

Must say I have learned a lot from this single page!

Results of mine and your hard work :

http://www.freeimagehosting.net/n45zx

allan

Oops - sorry I missed your latest comments there. But excellent to hear that you've got it working now :-)

Allan

rage10940

Hi Allan,

I came across a big problem in Datatables, and for some reason I can't find anything on google about it...

I made a video of it actually :

http://www.youtube.com/watch?v=GxUayNSHaVA&feature=youtu.be

Pretty much when entering a Search Filter when fnReloadAjax is enabled, when ever a new Ajax call is made the Search Filter string is negated and all the data is redrawn.

I had the same issue with pagination but fixed it with this :

[code]

setInterval(function() {
table2.fnReloadAjax(null,null,true);
}, 5000);
});

[/code]

Is there anyway to preserve the state of a Search Filter?

rage10940

Bump for top spot and possible fix.

allan

I've not seen that before, and that shouldn't be happening. If the table remains, the filtering state should be preserved. However, without a test case I simply cannot offer any help though as I don't have the time to try and recreate the situation myself.

Allan

rage10940

I tried to reply to you but my post is got flagged? I submitted twice. Sorry.

rage10940

Hi Allan,

This is my code :

[code]


$(document).ready(function()
{
var table1 = $('#waiting').dataTable(
{
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"iDisplayLength": 10,
"aLengthMenu": [5, 10],
"sAjaxDataProp": "waiting",
"sAjaxSource": 'https://www.finaidtest.com/index.php/studentqueue_controller/ajaxcall',
"bDeferRender": true,
"bAutoWidth": false,
"aoColumns":
[
{"mdata": "id",
"sWidth": "7%",

"mRender": function(data, full)
{
var div = '';
var url = '' + '

rage10940

What do you mean if the table remains Allan? I still haven't the slightest idea where to go with this problem.

allan

I hadn't seen your code before I made that comment.

Fundamentally the code looks fine. I don't understand why it is not working. I need a link to test case showing it not working so I can debug and offer any assistance.

Allan

rage10940

I sent you an email to my home server with the application on it. Your credentials and the web page link.

allan

Excellent - thank you for your mail.

There was a problem in the fnReloadAjax plug-in, when the standing redraw is enabled (which you have), causing the problems you were seeing.

I've just committed the fix ( https://github.com/DataTables/Plugins/commit/46df5ba4bc ) and the plug-in is up-to-date here: http://datatables.net/plug-ins/api#fnReloadAjax .

Thank you for the test page so I could resolve this issue, and for helping to make DataTables better :-)

Allan

rage10940

I absolutely can NOT thank you enough. Works 110% like honestly thank you so much. I have your IP so I will leave your account unlocked and when ever you want to take a look at the blessing that datatables is then you can log in. Or if I have other issues I can link you.

Again seriously thank you so very much!