JQ UI Dialog Position Default not the same Desktop to Mobile - jquery-ui

I have a page that has table with a lot of data and in several place embedded buttons in some columns that bring up dialog boxes for the user to interact with the data on that row.
On the a desktop browser JQ UI does exactly what I want. If the window is narrow and you have to use the scrolls bars to find the buttons (in the rightmost column), when you click on the button the dialog pops up centered in the currently viewed screen. Here is a link to the fiddle and the code.
https://jsfiddle.net/davetoolin/c6gzx08L/1/
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css" />
<script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog-test").dialog({
autoOpen: false,
width: 100,
modal: true,
responsive: true,
position: {
my: "center",
at: "center",
of: window
}
});
$(".open_dialog").click(function() {
$("#dialog-test").dialog('open');
})
});
</script>
</head>
<body>
<div style="min-width:800px">
<table style="min-width:1350px">
<tr>
<td>Data Col-0 Row-0</td>
<td>Data Col-1 Row-0</td>
<td>Data Col-2 Row-0</td>
<td>Data Col-3 Row-0</td>
<td>Data Col-4 Row-0</td>
<td>Data Col-5 Row-0</td>
<td>Data Col-6 Row-0</td>
<td>Data Col-7 Row-0</td>
<td>Data Col-8 Row-0</td>
<td>Data Col-9 Row-0</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-1</td>
<td>Data Col-1 Row-1</td>
<td>Data Col-2 Row-1</td>
<td>Data Col-3 Row-1</td>
<td>Data Col-4 Row-1</td>
<td>Data Col-5 Row-1</td>
<td>Data Col-6 Row-1</td>
<td>Data Col-7 Row-1</td>
<td>Data Col-8 Row-1</td>
<td>Data Col-9 Row-1</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-2</td>
<td>Data Col-1 Row-2</td>
<td>Data Col-2 Row-2</td>
<td>Data Col-3 Row-2</td>
<td>Data Col-4 Row-2</td>
<td>Data Col-5 Row-2</td>
<td>Data Col-6 Row-2</td>
<td>Data Col-7 Row-2</td>
<td>Data Col-8 Row-2</td>
<td>Data Col-9 Row-2</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-3</td>
<td>Data Col-1 Row-3</td>
<td>Data Col-2 Row-3</td>
<td>Data Col-3 Row-3</td>
<td>Data Col-4 Row-3</td>
<td>Data Col-5 Row-3</td>
<td>Data Col-6 Row-3</td>
<td>Data Col-7 Row-3</td>
<td>Data Col-8 Row-3</td>
<td>Data Col-9 Row-3</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-4</td>
<td>Data Col-1 Row-4</td>
<td>Data Col-2 Row-4</td>
<td>Data Col-3 Row-4</td>
<td>Data Col-4 Row-4</td>
<td>Data Col-5 Row-4</td>
<td>Data Col-6 Row-4</td>
<td>Data Col-7 Row-4</td>
<td>Data Col-8 Row-4</td>
<td>Data Col-9 Row-4</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-5</td>
<td>Data Col-1 Row-5</td>
<td>Data Col-2 Row-5</td>
<td>Data Col-3 Row-5</td>
<td>Data Col-4 Row-5</td>
<td>Data Col-5 Row-5</td>
<td>Data Col-6 Row-5</td>
<td>Data Col-7 Row-5</td>
<td>Data Col-8 Row-5</td>
<td>Data Col-9 Row-5</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-6</td>
<td>Data Col-1 Row-6</td>
<td>Data Col-2 Row-6</td>
<td>Data Col-3 Row-6</td>
<td>Data Col-4 Row-6</td>
<td>Data Col-5 Row-6</td>
<td>Data Col-6 Row-6</td>
<td>Data Col-7 Row-6</td>
<td>Data Col-8 Row-6</td>
<td>Data Col-9 Row-6</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-7</td>
<td>Data Col-1 Row-7</td>
<td>Data Col-2 Row-7</td>
<td>Data Col-3 Row-7</td>
<td>Data Col-4 Row-7</td>
<td>Data Col-5 Row-7</td>
<td>Data Col-6 Row-7</td>
<td>Data Col-7 Row-7</td>
<td>Data Col-8 Row-7</td>
<td>Data Col-9 Row-7</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-8</td>
<td>Data Col-1 Row-8</td>
<td>Data Col-2 Row-8</td>
<td>Data Col-3 Row-8</td>
<td>Data Col-4 Row-8</td>
<td>Data Col-5 Row-8</td>
<td>Data Col-6 Row-8</td>
<td>Data Col-7 Row-8</td>
<td>Data Col-8 Row-8</td>
<td>Data Col-9 Row-8</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
<tr>
<td>Data Col-0 Row-9</td>
<td>Data Col-1 Row-9</td>
<td>Data Col-2 Row-9</td>
<td>Data Col-3 Row-9</td>
<td>Data Col-4 Row-9</td>
<td>Data Col-5 Row-9</td>
<td>Data Col-6 Row-9</td>
<td>Data Col-7 Row-9</td>
<td>Data Col-8 Row-9</td>
<td>Data Col-9 Row-9</td>
<td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
</tr>
</table>
</div>
<div id="dialog-test" title="test Dialog" style="display:none">This a test dialog to see in the default JQ positioning is centered in mobile devices.</div>
</body
On the phone, it doesn't work that way at all. (I haven't figure on how to do a mobile emulation using fiddle)
I swipe left to get over to see the buttons when I click on. The screen un-swipes and moves back to the left edge of the table and shows the dialog centered on the left most data. I don't want this un-swiping behavior.
I have tried most all of the tricks, I have found in other SO's They all work great for the desktop browser, but none affect the mobile view.
Here are some screen shots
Thank in advance.
Twistys comment below sums up my problem perfectly.
The dialog window is opening in the center center of the Window, or
maybe the Document, but not the center of the Viewport area of the
device. You want it to remain Scrolled to the right and the dialog
should appear center in the Screen or Viewable area.


You may need to try defining the position at the time, with open on the widget itself:
https://jsfiddle.net/Twisty/ouqpvwzb/49/
JavaScript
$(function() {
$("#dialog-test").dialog({
autoOpen: false,
width: 100,
modal: true,
responsive: true,
open: function(event, ui) {
$(this).dialog("widget").position({
my: "center",
at: "center",
of: window
});
}
});
$(".open_dialog").click(function() {
$("#dialog-test").dialog('open');
})
});
I don't advise using the event.target. I would use this as it should represent the original DIV item.
You can also force it with the Document Width or Scroll Left.
Right: (Window Width / 2) - 50
If the window is 480 pixels, this could set the position from the Right 190 Pixels. That would center the dialog.

Related

Rerender View with condition

There is a following View:
<div class="table-responsive hidden" data-bind="css:{hidden : dataSource().length <= 0}, template: {afterRender: myPostProcessingLogic}">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="text-center">#AdminResource.Admin_Report_Location</th>
<th class="text-center">#AdminResource.Admin_Report_Employee</th>
<th class="text-center">#AdminResource.Admin_Report_TicketNumber</th>
<th class="text-center">#AdminResource.Admin_Report_Date</th>
<th class="text-center">#AdminResource.Admin_Report_Customer</th>
<th class="text-center">#AdminResource.Admin_Report_SubTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Tax</th>
<th class="text-center">#AdminResource.Admin_Report_Tips</th>
<th class="text-center">#AdminResource.Admin_Report_Discount</th>
<th class="text-center">#AdminResource.Admin_Report_SalesPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_SalesTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Paid</th>
<th class="text-center">#AdminResource.Admin_Report_PaidPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
#if ((bool?)ViewBag.WithCreditCard != null)
{
if ((bool)ViewBag.WithCreditCard)
{
#:<th class="text-center">#AdminResource.Admin_Ticket_CreditCardLast4Digits</th>
#:<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
}
}
<th class="text-center"></th>
</tr>
</thead>
<tbody data-bind="foreach: pagedDataSource">
<tr>
<td data-bind="text: Location"></td>
<td data-bind="text: Employee"></td>
<td data-bind="text: CustomReceiptNumber"></td>
<td data-bind="textAsDateTime: UserOrderDate"></td>
<td data-bind="text: CustomerFullName"></td>
<td data-bind="textAsCurrency: SubTotal" class="amount-formated"></td>
<td data-bind="textAsCurrency: Tax" class="amount-formated"></td>
<td data-bind="textAsCurrency: Tips" class="amount-formated"></td>
<td data-bind="textAsCurrency: Discount" class="amount-formated"></td>
<td data-bind="textAsCurrency: SalesPreTax" class="amount-formated"></td>
<td data-bind="textAsCurrency: OrderTotal" class="amount-formated"></td>
<td data-bind="textAsCurrency: OrderPaid" class="amount-formated"></td>
<td data-bind="textAsCurrency: PaidPreTax" class="amount-formated"></td>
<td data-bind="text: PaymentMethod"></td>
#if ((bool?)ViewBag.WithCreditCard != null)
{
if ((bool)ViewBag.WithCreditCard)
{
#:<td data-bind="text: CreditCardLast4"></td>
#:<td data-bind="text: AuthorizationTransactionCode"></td>
}
}
<td>
<button type="button" class="btn btn-circle btn-bordered btn-inverse btn-to-primary" data-bind="click: $parent.previewTicket"><i style="margin: 0" class="fa fa-eye"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong data-bind="visible: Count">#AdminResource.Common_Total: <span data-bind="text: Count"></span></strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong data-bind="textAsCurrency: SubTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: TaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: TipsSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: DiscountSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderPreTaxSum" class="amo
unt-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderPaidSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: PaidPreTaxSum" class="amount-formated"></strong></td>
<td></td>
<td></td>
</tfoot>
</table>
#RenderPage("~/Views/Shared/Partial/_PagedDataSourceControl.cshtml")
It is used as a partial in another View:
#{
ViewBag.Title = AdminResource.Admin_Navigation_SalesByPaymentMethodTypeReport;
Layout = "~/Views/Shared/_LayoutMaterial.cshtml";
}
#section ReportHeader{
#Html.MaterialReportHeader((string)ViewBag.Title, (bool)#ViewBag.IsFavorite)
}
<div class="row">
<div class="col-md-6">
#if (ViewBag.IsReportsByRevenueDate)
{
#Html.QuickDateTimes(null, null, "MM/dd/yyyy hh:mm tt")
}
else
{
#Html.QuickDates(null, null)
}
</div>
<div class="col-md-4">
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedCompanies, new { #class = "bmd-label-static" })
#if (ViewBag.LocationsDropDownTreeItems.Count > 0)
{
#Html.BootstrapDropDownTreeViewList((List<IConnect.Domain.Reports.DropDownTreeItem>)ViewBag.LocationsDropDownTreeItems);
}
else
{
<select class="form-control" data-bind="kendoMultiSelect: { data: locationsDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedLocations, placeholder: 'All' }"></select>
}
</div>
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedEmployees, new { #class = "bmd-label-static" })
<select class="form-control" id="ddlEmployees" data-bind="kendoMultiSelect: { data: employeesDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedEmployees, placeholder: '#AdminResource.Common_All', open: onEmployeesDDLOpening }"></select>
</div>
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedPaymentMethods, new { #class = "bmd-label-static" })
<select class="form-control" data-bind="kendoMultiSelect: { data: paymentMethodsDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedPaymentMethods, placeholder: '#AdminResource.Common_All' }"></select>
</div>
</div>
</div>
**<div class="horizontal-scroll" , id="partdetail">
#RenderPage("Partial/_Details.cshtml")
</div>**
I need to implement the display conditions of the two columns depending on the Viewbag.WithCreditCard value which depend on the selected selected PaymentMethods. That is, redraw the first view when the selectedPaymentMethods () value changes. Implemented subscribe:
self.selectedPaymentMethods.subscribe(function () {
debugger;
var cyclenumber = 0;
if (self.selectedPaymentMethods().length == 0)
cyclenumber = self.selectedPaymentMethods().length;
else
cyclenumber = self.paymentMethodsDTO().length;
console.log(self.paymentMethodsDTO().length);
console.log(self.selectedPaymentMethods().length);
for (var i = 0; i < cyclenumber; i++) {
if (self.paymentMethodsDTO()[i] == 5){
#{
ViewBag.WithCreditCard = true;
}
}
else
if (self.selectedPaymentMethods()[i] == 5){
#{
ViewBag.WithCreditCard = true;
}
}
}
});
paymentMethodsDTO - observable array where all types of payments.
I need to figure out how to redraw the partial view when changing selectedPaymentMethods

Part of the problem that you will need to overcome is the bringing the payment selection client side and allowing the user to select the payment method then allowing knockout to do its thing. the crudest and probably the easiest way to hide and show columns can be done by applying knockout if and ifnot bindings to the column that you want to hide and show.
var ViewModel = function() {
var self = this;
self.availablePaymentTypes = ko.observableArray(['Cash','CreditCard', 'EFT', 'Cheque']);
self.dataSource = ko.observableArray([]);
self.myPostProcessingLogic = function() {
alert('post processing');
};
self.paymentType = ko.observable('CreditCard');
self.pagedDataSource = ko.observableArray([]);
self.previewTicket = function(data) {
alert('preview Ticket');
}
self.count = ko.pureComputed(function() {
return self.pagedDataSource().length;
});
self.SubTotalSum = ko.pureComputed(function() {
return 0;
});
self.TaxSum = ko.pureComputed(function() {
return 0;
});
self.TipsSum = ko.pureComputed(function() {
return 0;
});
self.DiscountSum = ko.pureComputed(function() {
return 0;
});
self.OrderPreTaxSum = ko.pureComputed(function() {
return 0;
});
self.OrderTotalSum = ko.pureComputed(function() {
return 0;
});
self.OrderPaidSum = ko.pureComputed(function() {
return 0;
});
self.PaidPreTaxSum = ko.pureComputed(function() {
return 0;
});
};
var vm = new ViewModel();
ko.applyBindings(vm);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select class="form-control" data-bind="options: availablePaymentTypes, value: paymentType" ></select>
<div class="table-responsive hidden" data-bind="css:{hidden : dataSource().length <= 0}, template: {afterRender: myPostProcessingLogic}">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="text-center">#AdminResource.Admin_Report_Location</th>
<th class="text-center">#AdminResource.Admin_Report_Employee</th>
<th class="text-center">#AdminResource.Admin_Report_TicketNumber</th>
<th class="text-center">#AdminResource.Admin_Report_Date</th>
<th class="text-center">#AdminResource.Admin_Report_Customer</th>
<th class="text-center">#AdminResource.Admin_Report_SubTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Tax</th>
<th class="text-center">#AdminResource.Admin_Report_Tips</th>
<th class="text-center">#AdminResource.Admin_Report_Discount</th>
<th class="text-center">#AdminResource.Admin_Report_SalesPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_SalesTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Paid</th>
<th class="text-center">#AdminResource.Admin_Report_PaidPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
<!-- ko if: paymentType() == 'CreditCard' -->
<th class="text-center">#AdminResource.Admin_Ticket_CreditCardLast4Digits</th>
<!-- /ko -->
<!-- ko ifnot: paymentType() == 'CreditCard' -->
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
<!-- /ko -->
<th class="text-center"></th>
</tr>
</thead>
<tbody data-bind="foreach: pagedDataSource">
<tr>
<td data-bind="text: Location"></td>
<td data-bind="text: Employee"></td>
<td data-bind="text: CustomReceiptNumber"></td>
<td data-bind="text: UserOrderDate"></td>
<td data-bind="text: CustomerFullName"></td>
<td data-bind="text: SubTotal" class="amount-formated"></td>
<td data-bind="text: Tax" class="amount-formated"></td>
<td data-bind="text: Tips" class="amount-formated"></td>
<td data-bind="text: Discount" class="amount-formated"></td>
<td data-bind="text: SalesPreTax" class="amount-formated"></td>
<td data-bind="text: OrderTotal" class="amount-formated"></td>
<td data-bind="text: OrderPaid" class="amount-formated"></td>
<td data-bind="text: PaidPreTax" class="amount-formated"></td>
<td data-bind="text: PaymentMethod"></td>
<!-- ko if: $parent.paymentType() == 'CreditCard' -->
<td data-bind="text: CreditCardLast4"></td>
<!-- /ko -->
<!-- ko ifnot: $parent.paymentType() == 'CreditCard' -->
<td data-bind="text: AuthorizationTransactionCode"></td>
<!-- /ko -->
<td>
<button type="button" class="btn btn-circle btn-bordered btn-inverse btn-to-primary" data-bind="click: $parent.previewTicket"><i style="margin: 0" class="fa fa-eye"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong data-bind="visible: count">#AdminResource.Common_Total: <span data-bind="text: count"></span></strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong data-bind="text: SubTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: TaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: TipsSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: DiscountSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderPreTaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderPaidSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: PaidPreTaxSum" class="amount-formated"></strong></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>

Bootstrap not working as expected

I am using Bootstrap and jQuery Datatables to design front end, but my code came out in browser a bit messy, I think the issue is regarding inclusion of bootstrap or jquery or the version may be:-
I am using ASP.NET MVC 5 empty template, the files I am using are:-
index.cshtml
#{
ViewBag.Title = "Employee List";
}
<h2>Employee CRUD Operation</h2>
<table id="employeeTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
#section scripts{
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#employeeTable").DataTable({
"ajax": {
"url": "/Employee/GetData",
"type": "GET",
"datatype":"json"
},
"columns": [
{ "data": "Name" },
{ "data": "Position" },
{ "data": "Office" },
{ "data": "Age" },
{ "data": "Salary" }
]
});
});
</script>
}
the bootstrap and jquery are included here in _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>ASP.NET MVC Operations</p>
</footer>
</div>
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts",required:false)
</body>
</html>

I grabbed their example and it seems to be working.
I'd make sure your scripts and css are being loaded in the proper order
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

I resolved the issue, by making the bootstrap for datatable version same with the base bootstrap version

Pdf view using iTextSharp

I wanna pdf view using ITextSharp , i use datatables to table data from external API using JQuery .. I searched for it but i found that they use data from Model and i'm not dealing with model as i deal with external API
I tried some codes but no result ..
ReportController:
[HttpPost]
[ValidateInput(false)]
public FileResult Export(string GridHtml)
{
using (MemoryStream stream = new System.IO.MemoryStream())
{
StringReader sr = new StringReader(GridHtml);
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 10f);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
return File(stream.ToArray(), "application/pdf", "StudentDetails.pdf");
}
}
Index.cshtml:
#using (Html.BeginForm("Export", "Home", FormMethod.Post))
{
<div style="text-align: center;background-color:yellowgreen;width:100%">
<input type="hidden" name="GridHtml" />
#*<input type="submit" id="btnSubmit" value="Export" />*#
<span style="font-family: Arial Black;color:red; font-size:larger;font-style: oblique">Export PDF</span>
<input type="image" id="btnSubmit" src="~/Images/Pdf.png" value="Pdf" />
</div>
<br />
#*<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />*#
<div id="Grid">
<table class="table table-bordered table-hover" id="VacationsReport_table">
<thead>
<tr>
<th>تاريخ الطلب</th>
<th>كود الموظف</th>
<th>الوظيفة</th>
<th>نوع الاجازة</th>
<th>بداية الاجازة</th>
<th>نهاية الاجازة</th>
<th>سبب الاجازة</th>
<th>مدة الاجازة</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
.. Any Suggestions ?
search button display table with data , then clicking Export should pdf all view ..

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
The following CSS library files are loaded for use in this example to provide the styling of the table:
https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css
please find following link this will help you
https://datatables.net/extensions/buttons/examples/initialisation/export.html

How to hide a column in a bootstrap table?

In my ASP.NET MVC Core app that uses Bootstrap (installed by default by Visual Studio 2015 MVC Core project), I need to use ID column in a controller but want to hide it in the View. But the following View still displays the column as blank. I would like to hide the first columns that is the ID column
View:
#model List<myProj.Models.StateName>
<form id="target" asp-controller="TestController" asp-action="TestAction" asp-route-returnurl="#ViewData[" ReturnUrl"]" method="post">
<table class="table">
<thead>
<tr>
<th></th>
<th>
State Name
</th>
<th>
State Code
</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td><input asp-for="#Model[i].StateId" type="hidden" /></td>
<td>
<label asp-for="#Model[i].State"></label>
</td>
<td>
<input asp-for="#Model[i].StateCode" type="text" readonly style="border:0px;"/>
</td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-default">Save</button>
</form>

I've tested the behavior you describe in this pen. The "Bad Table" version demonstrates what I believe you are likely seeing and occurs by neglecting to add display:none to one single th/td in that column. The "Good Table" version has the first column completely hidden and stretches to fill the entire available width.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Good Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td style="display:none">Data 2.1</td>
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
<h2>Bad Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td>Data 2.1</td> <!-- WHOOPS -->
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
Long and short, check the rendered output and ensure that each th/td in the column you are hiding ended up with the display:none style.

unable to select node in nokogiri with css attribute containing two colons

I'm receiving an error when trying to select a node with css value of "WhoIsOnDutyTableLevel1:header:2" using nokogiri. I'm assuming nokogiri just can't handle two colons. What are my options? I can't change the structure of the html.
Here's the html:
<html lang="en"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="stylesheets/forms.css">
<style type="text/css" media="screen" title="AlarmPoint">
#import "stylesheets/AlarmPoint.css";
</style>
</head>
<body><table id="WhoIsOnDutyTableLevel1" class="duty-report-level1">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="duty-report-lt-header">Who's on duty for:
January 06, 2012 00:00 -0800</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1">
<table id="WhoIsOnDutyTableLevel2" class="duty-report-level2">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Group Name</th><th id="WhoIsOnDutyTableLevel1:header:2">Group Time Zone</th><th id="WhoIsOnDutyTableLevel1:header:3">Default Devices</th><th id="WhoIsOnDutyTableLevel1:header:4">Supervisors</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="Support" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiPj8lqyud7XvypLHHjUnT5bHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="Support" class="details">Support</a></td><td headers="WhoIsOnDutyTableLevel1:header:2" class="centered-text">US/Pacific</td><td headers="WhoIsOnDutyTableLevel1:header:3" class="centered-text"><img border="0" src="/static/images/icon_boolean_false.png" alt="No"></td><td headers="WhoIsOnDutyTableLevel1:header:4">
<values>
</values><a id="mgr1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="mgr1" class="details">Manager 1</a>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah1</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">08:00 - 17:00 TU WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="205414">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6oL%2BaI47zI4gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">0</td>
</tr>
<tr id="207569">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="209107">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6uKpyoDh%2Fz%2FQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="uer2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">17:00 Lasting 15:00 WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="210855">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z72pjQodq7P5gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">5</td>
</tr>
<tr id="210529">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6r1%2Fmnw2SZ2AixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="210337">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6Rwqu8vCtzBAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">15</td>
</tr>
<tr id="204675">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user3" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5oj5jdRJbzggixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user3" class="details">User 3</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">20</td>
</tr>
<tr id="205555">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user4" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4G8e7%2FY9SHyQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user4" class="details">User 4</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
<tr id="205004">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user5" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5XHkcVAMfXqgixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user5" class="details">User 5</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">30</td>
</tr>
<tr id="204718">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user6" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiUNEK29yovHscXndexl2jCbHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="user6" class="details">User 6</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">GROUP</td><td headers="WhoIsOnDutyTableLevel1:header:3">35</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
I'm running this in my rails console:
>> onDuty_userList = doc.at_xpath('//*[#id="WhoIsOnDutyTableLevel4"]/tbody/tr')
=> #<Nokogiri::XML::Element:0x1b83804 name="tr" attributes=[#<Nokogiri::XML::Attr:0x1b83764 name="id" value="208894">] children=[#<Nokogiri::XML::Element:0x1b83174 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b83110 name="headers" value="WhoIsOnDutyTableLevel1:header:1">] children=[#<Nokogiri::XML::Element:0x1b82b70 name="a" attributes=[#<Nokogiri::XML::Attr:0x1b82aa8 name="href" value="/alarmpoint/UserDevices.do;jsessionid=3pz7t91kle3?_data=KpBkJeR08z6mdgIY4sPrzAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D">, #<Nokogiri::XML::Attr:0x1b82a94 name="name" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a80 name="id" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a6c name="class" value="details">] children=[#<Nokogiri::XML::Text:0x1b7b438 "\r\n xxx, xxx (xxx)\r\n ">]>]>, #<Nokogiri::XML::Element:0x1b7b104 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7b0a0 name="headers" value="WhoIsOnDutyTableLevel1:header:2">] children=[#<Nokogiri::XML::Text:0x1b7aba0 "PERSON">]>, #<Nokogiri::XML::Element:0x1b7a984 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7a90c name="headers" value="WhoIsOnDutyTableLevel1:header:3">] children=[#<Nokogiri::XML::Text:0x1b7a420 "0">]>, #<Nokogiri::XML::Text:0x1b7a1f0 "\r\n">]>
When I try to select with css value:
>> onDuty_userList.css('WhoIsOnDutyTableLevel1:header:2')
Nokogiri::CSS::SyntaxError: unexpected '2' after ':'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:87:in `on_error'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `_racc_do_parse_c'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `do_parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:62:in `parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:79:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css.rb:23:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:211:in `block in css'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `map'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `css'
from (irb):129
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/bin/irb:16:in `<main>'

You need to preface the id with a #.
This should work:
doc.css('#WhoIsOnDutyTableLevel1:header:2')

Resources