I have a page containing a table to which values can be added via a textbox in a modal popup and the values will appear in the table on the page.
It is being tested by adding the string ); to the textbox and it fails because this string will initiate a popup. So I need to allow this code to be added and appear innocuously in its original format on the page without initiating a popup etc.
I've tried HTMLDecode('user added string') but this just cleanses the string and returns );
Is there a way to do this?
This is the table so the string is just being plonked in a cell so maybe something like a Literal would help?
But it has to be done client side - there is no server involvement.
I don't know how the code is initiated as someone else messed with that but it makes a raptor run across the screen - ridiculous.
<table>
<thead>
<tr>
<th>Event</th>
<th>Target Day(s)</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>));</Script><Script Src="//donastystuff1/X.Js"/></td>
<td>1</td>
<td></td>
<td></td>
</tr>
</tbody>
Thanks for the input but I fixed it by adding the string to a Literal manually like this
var thisEventType = 'malicious string';
var $thisEventTypeCell = $('<td><asp:Literal id="litEventType" runat="server">' + '</asp:Literal></td>');
$thisEventTypeCell.text(thisEventType);
tr.append($thisEventTypeCell);
Related
I have the following table on a laravel blade that uses x-editable to update some of its fields (note, this is my first ever PHP project so if there are better ways to do this, please share):
<table id="LinksTable" class="table table-bordered">
<thead>
<tr>
<th>Display</th>
<th>Link Display Name</th>
</tr>
</thead>
<tbody>
<?php $link_settings = Link_setting::whereNotNull('link_address')->get();?>
#foreach($link_settings as $link_setting)
<tr id="linkRow.{{$link_setting->id}}">
<td hidden="true">{{$link_setting->id}}</td>
<td><input id="linkD.{{$link_setting->id}}" name="is_displayed"
checked="{{$link_setting->is_displayed}}"
onChange="OnDisplayChange(this)" type="checkbox"></td>
<td><a href="#" class="listEdit" data-type="text"
data-column="display_name" data-url="./link_settings/update"
data-pk="{{$link_setting->id}}" data-title="change"
data-name="display_name">{{$link_setting->display_name}}</a>
</td>
</tr>
#endforeach
</tbody>
</table>
This renders fine the first time and I can edit the display name on any of the rows with it updating the database correctly.
My problem is that I have an "add" button that creates a new object in the database. After added, I need to reload the table to display this entry as well.
function RefreshTable() {
$('.listEdit').editable("destroy");
$( "#linksTableMainDiv" ).load(location.href + " #LinksTable");
$('.listEdit').editable();
}
The table re-renders fine, but the x-editable breaks, without errors that I can locate.
For anyone coming across this post, I ended up reworking this to add a row via javascript, rather than reloading the table. Adding $('.listEdit').editable(); after the table.appendChild(row) enables all the editable fields in the new row. Assigned data-pk=0 to each, and as part of the update controller, returned the id. I then update the row's data-pk elements upon success of the editable function.
I'm using DataTables 1.10.15 and have the most basic table imaginable like
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
On document.ready I access the footer nodes to add per-column-search callbacks; however .footer() on all column-objects only returns null and I have no idea why this is.
... table is the DT-object
table.columns().every(function() { console.log(this.footer()) })
... just prints a lot of null. .header() works without problems and table.table(0).footer() is in fact the footer node. Any idea?
You did not provide the full code but you need to have an instance of table
Working example : https://jsfiddle.net/jondion/ab2avuzk/
$(document).ready(function() {
var table = $('table').DataTable();
table.columns().every(function() {
console.log(this.footer()) // data...
})
});
jQuery 2.2.4
DataTables 1.10.15
Turns out that for some reason pulling the i18n file via ajax in the constructor causes .footer() to fail. Passing the literal values fixed the problem.
Looking for some help on how to capture value for a specific TD cell. The challenge i'm faced with is that I cannot modify the TD cell to include classes or modify them as the table content are created dynamically by another system.
I created the fiddle below to give you an idea of what the structure of the table. As i explained above since I cannot directly modify the table structure or add extra classes to make it easier to target the TD cell I want, I am trying to Macgyver my way out of this one.
What I am trying to accomplish is this:
1) Need to capture the Reference number (Always 11 characters long and only contains numbers).
2) Put the captured reference number into a variable.
3) Concatenate the variable to the following url http://test.com/UpdateNotification.asp?OEN= (variable here) &CL=ALL&SU=ALL
4) Replace the Reference number with the URL.
So I am really having problems with the step 1 of this process. I would appreciate some help on this.
http://jsfiddle.net/W4Km8/5665/
<DIV class="sm_content">
<table border="1" width="100%">
<tr>
<td class="ms-vb2">reference numbers</td>
<td class="ms-vb2">name</td>
<td class="ms-vb2">Description</td>
<td class="ms-vb2">Incident</td>
</tr>
<tr>
<td class="ms-vb2">20150715110</td>
<td class="ms-vb2">Jhonson Doe</td>
<td class="ms-vb2">Box of cereal and other stuff</td>
<td class="ms-vb2">123</td>
</tr>
<tr>
<td class="ms-vb2">20150715111</td>
<td class="ms-vb2">Bobby Boucher</td>
<td class="ms-vb2">Box of nails and stuff</td>
<td class="ms-vb2">124</td>
</tr>
</table>
</DIV>
In the future, please make an effort before asking. That said, coders gotta code.
$('.sm_content table tr:gt(0)').each(function() {
var myId = $(this).find('td').eq(0).text();
var myUrl = 'http://test.com/UpdateNotification.asp?OEN=' + myId;
$(this).find('td').eq(0).html('' + myId + '');
});
Fiddle demo
Or, if you didn't actually want the ID linked, just do this for the last line:
$(this).find('td').eq(0).text(myUrl);
You have different ways to do it.
(function($){
$('.sm_content tr').slice(1).each(function(){
var td = $(this).find('td').first();
var tdContent = td.html();
td.html('' + tdContent + '');
});
})(jQuery);
Load the entire page into a string. I've used phpfilegetcontents but for an html only page I'd manually copy and paste the page into a text box and use document.getElementbyid('box').innerHTML to load the page's contents into a string
Find the first cell: entirepage.indexOf('td')
entirepage.slice(start from location of td plus enough characters to get past the rest of the tag, end 11 characters later)
that's your reference number
find the nth instance of 'td'
and so on.
no jquery necessary
I'm trying to write a regular express that will capture an HTML table (and all it table data) that has a particular class.
For example, the table has a recapLinks class, its comprised of numerous table rows and table data and then terminated with . See below:
<table width="100%" class="recapLinks" cellspacing="0">
[numerous table rows and data in the table.]
</td></tr></tbody></table>
I'm using javascript.
The regex to capture this is pretty simple, if you can guarantee that there are never nested tables. Nested tabled become much trickier to deal with.
/<table[^>]*class=("|')?.*?\bCLASSNAMEHERE\b.*?\1[^>]*>([\s\S]*?)</table>/im
For instance, if an attribute before class had a closing > in it, which isn't likely, but possible, the regex would fall flat on it's face. Complex reges can try to prepare for that, but it's really not worth the effort.
However, jQuery all by itself can make this a breeze, if these elements are within the DOM. Regex can be easily fooled or tripped, deliberately or accidentally but that's why we have parsers. JQuery doesn't care what's nested or not within the element. It doesn't care about quote style, multiline, any of that.
$(document).ready(function () {
console.log($("table.myClassHere").prop("outerHTML"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="myClassHere">
<tr>
<td>Book Series</td>
</tr>
<tr>
<td>Pern</td>
</tr>
<tr>
<td>Hobbit</td>
</tr>
</table>
<table class="otherClassHere">
<tr>
<td>Movies</td>
</tr>
<tr>
<td>Avengers</td>
</tr>
<tr>
<td>Matrix</td>
</tr>
</table>
I have this HTML table:
<table id="languages" border="0" cellspacing="1">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr>
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>
When I run this JavaScript:
alert($('td').index($('td:contains(C++)')))
I get a pop up saying 9, which is what I would expect.
And when I run this: alert($('td:eq(9)').text()), the pop up says C++, again same as what one would expect. But if I try to put the first function/selection instead of hard coding 9 in the second selector, like this...
alert($('td:eq($('td').index($('td:contains(C++)')))').text())
// just replacing the hard coded 9 with the first selector, as it gives a value of 9
...nothing happens. I don't get any pop up saying C++, which is what one would expect, I don't get any pop up for that matter. Can anyone please tell me what am I doing wrong?
The problem is that you aren't escaping the single quotes in the inner selector, so you're effectively exiting the string at that point, which is throwing an error. Change this:
alert($('td:eq($('td').index($('td:contains(C++)')))').text())
To this:
alert($('td:eq(' + $('td').index($('td:contains(C++)')) + ')').text())
The below should work:
alert($('td:eq('+$('td').index($('td:contains(C++)'))+')').text())