Escaping HTML with datatables
Escaping HTML with datatables
rage10940
Posts: 48Questions: 0Answers: 0
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.
[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.
This discussion has been closed.
Replies
Allan
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.
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?
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
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
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.
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
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.
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
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.
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
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
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.
In the JSON LINT picture "id" / "0" is there... I just didnt get the scroll correct on the picture.
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.
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
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?
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 = '' + '
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
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
Again seriously thank you so very much!