After table sorter not applying the table css styles? - c#

I applied tablesorter css styles for a table in a page.And i also i need to apply another style for rows if textbox entered data matching with any column of table grid data need to apply different color for that row.
$(function () {
grid = $('#tblsearchresult');
// handle search fields key up event
$('#search-term').keyup(function (e) {
text = $(this).val(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
if ($(this).find('td:eq(1)').text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(2)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(3)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(4)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
});
}
else {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
<table id="tblsearchresult" class="tablesorter"">
<thead>
<tr>
<th>ApplicationName</th>
</tr>
</thead>
<tbody>
<% foreach (var request in Model.ApplicationRoles)
{ %>
<tr>
<td>
<span id="appName_<%: request.Id%>">
<%: request.Application.Name%></span>
</td>
</tr>
</tbody>
</table>
tablesorter css :
table.tablesorter {
font-family:arial;
color: rgb(51, 51, 51);
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #8dbdd8;
border: 1px solid #FFF;
font-size: 8pt;
padding: 5px;
}
table.tablesorter thead tr .header:not(.nosort) {
background-image: url('/sorter/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
background-color: rgb(239, 243, 251);
padding: 5px;
border: solid 1px #e8eef4;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:not(.nosort) {
background-image: url('/sorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown:not(.nosort) {
background-image: url('/sorter/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
.divpager
{
display: inline-block;
float: left;
}
I am not able apply anonymous function row color when search text macthed with any table grid row data.please tell me.


Try this code (demo):
$(function () {
grid = $('#tblsearchresult tbody');
// handle search fields key up event
$('#search-term').on('keyup search', function (e) {
text = $(this).val().toUpperCase(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
var found = false;
$(this).children().each(function(j){
if (this.textContent.toUpperCase().match(text)) {
$(this).addClass('result');
found = true;
}
});
$(this).toggle(found);
});
} else {
grid.find('td').removeClass('result');
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
$('table').tablesorter();

Related

C# AzureMaps page doesn't show the map when moving to MVC application

I have a html page of AzureMaps on github. I run directly the html file by Chrome and it works. But when I move it to MVC application, it doesn't show the map.
I don't know what I'm missing when I come to MVC. It just displays as below. Left is html run directly by Chrome and it works. Right is page from Index.cshtml and it doesn't show the map, even no error in console so I have no idea what goes wrong.
This Microsoft page refers to the Github link above.
Do you have any idea on this?
Thanks very much.
I just copy everything from the .html file to the Index.cshtml page.
My Index.cshtml:
#{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Interactive Search Quickstart - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This tutorial shows how to create an interactive search experience." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, tutorials, search, point of interest, POI" />
<meta name="author" content="Microsoft Azure Maps" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
<script>
var map, datasource, client, popup, searchInput, resultsPanel, searchInputLength, centerMapOnResults;
//The minimum number of characters needed in the search input before a search is performed.
var minSearchInputLength = 3;
//The number of ms between key strokes to wait before performing a search.
var keyStrokeDelay = 150;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-118.270293, 34.039737],
zoom: 14,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
////Use Azure Active Directory authentication.
//authType: 'anonymous',
//clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
//getToken: function (resolve, reject, map) {
// //URL to your authentication service that retrieves an Azure Active Directory Token.
// var tokenServiceUrl = "https://samples.azuremaps.com/api/GetAzureMapsToken";
// fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authType: 'subscriptionKey',
subscriptionKey: 'W*******U'
}
});
//Store a reference to the Search Info Panel.
resultsPanel = document.getElementById("results-panel");
//Add key up event to the search box.
searchInput = document.getElementById("search-input");
searchInput.addEventListener("keyup", searchInputKeyup);
//Create a popup which we can reuse for each result.
popup = new atlas.Popup();
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Add the zoom control to the map.
map.controls.add(new atlas.control.ZoomControl(), {
position: 'top-right'
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a layer for rendering the results.
var searchLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-round-darkblue',
anchor: 'center',
allowOverlap: true
}
});
map.layers.add(searchLayer);
//Add a click event to the search layer and show a popup when a result is clicked.
map.events.add("click", searchLayer, function (e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
showPopup(e.shapes[0]);
}
});
});
}
function searchInputKeyup(e) {
centerMapOnResults = false;
if (searchInput.value.length >= minSearchInputLength) {
if (e.keyCode === 13) {
centerMapOnResults = true;
}
//Wait 100ms and see if the input length is unchanged before performing a search.
//This will reduce the number of queries being made on each character typed.
setTimeout(function () {
if (searchInputLength == searchInput.value.length) {
search();
}
}, keyStrokeDelay);
} else {
resultsPanel.innerHTML = '';
}
searchInputLength = searchInput.value.length;
}
function search() {
//Remove any previous results from the map.
datasource.clear();
popup.close();
resultsPanel.innerHTML = '';
//Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
//Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline);
var query = document.getElementById("search-input").value;
searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
lon: map.getCamera().center[0],
lat: map.getCamera().center[1],
maxFuzzyLevel: 4,
view: 'Auto'
}).then((results) => {
//Extract GeoJSON feature collection from the response and add it to the datasource
var data = results.geojson.getFeatures();
datasource.add(data);
if (centerMapOnResults) {
map.setCamera({
bounds: data.bbox
});
}
console.log(data);
//Create the HTML for the results list.
var html = [];
for (var i = 0; i < data.features.length; i++) {
var r = data.features[i];
html.push('<li onclick="itemClicked(\'', r.id, '\')" onmouseover="itemHovered(\'', r.id, '\')">')
html.push('<div class="title">');
if (r.properties.poi && r.properties.poi.name) {
html.push(r.properties.poi.name);
} else {
html.push(r.properties.address.freeformAddress);
}
html.push('</div><div class="info">', r.properties.type, ': ', r.properties.address.freeformAddress, '</div>');
if (r.properties.poi) {
if (r.properties.phone) {
html.push('<div class="info">phone: ', r.properties.poi.phone, '</div>');
}
if (r.properties.poi.url) {
html.push('<div class="info">http://', r.properties.poi.url, '</div>');
}
}
html.push('</li>');
resultsPanel.innerHTML = html.join('');
}
});
}
function itemHovered(id) {
//Show a popup when hovering an item in the result list.
var shape = datasource.getShapeById(id);
showPopup(shape);
}
function itemClicked(id) {
//Center the map over the clicked item from the result list.
var shape = datasource.getShapeById(id);
map.setCamera({
center: shape.getCoordinates(),
zoom: 17
});
}
function showPopup(shape) {
var properties = shape.getProperties();
//Create the HTML content of the POI to show in the popup.
var html = ['<div class="poi-box">'];
//Add a title section for the popup.
html.push('<div class="poi-title-box"><b>');
if (properties.poi && properties.poi.name) {
html.push(properties.poi.name);
} else {
html.push(properties.address.freeformAddress);
}
html.push('</b></div>');
//Create a container for the body of the content of the popup.
html.push('<div class="poi-content-box">');
html.push('<div class="info location">', properties.address.freeformAddress, '</div>');
if (properties.poi) {
if (properties.poi.phone) {
html.push('<div class="info phone">', properties.phone, '</div>');
}
if (properties.poi.url) {
html.push('<div><a class="info website" href="http://', properties.poi.url, '">http://', properties.poi.url, '</a></div>');
}
}
html.push('</div></div>');
popup.setOptions({
position: shape.getCoordinates(),
content: html.join('')
});
popup.open(map);
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
font-family: segoeui;
}
#myMap {
position: relative;
width: 100%;
height: 100%;
}
#search {
position: absolute;
left: 0px;
top: 0px;
width: 400px;
box-shadow: 0px 24px 74px 0px rgba(0, 0, 0, .32);
border: 1px solid #ccc;
overflow-y: hidden;
}
#search > .search-input-box {
background: #fff;
height: 72px;
width: 100%;
}
#search > .search-input-box > .search-input-group {
position: relative;
top: 20px;
left: 20px;
width: 358px;
height: 30px;
margin: 0;
padding: 0;
border: 1px dotted #ccc;
}
#search > .search-input-box > .search-input-group > .search-icon {
margin: 0;
padding: 0;
background-size: 20px 20px;
width: 30px;
height: 30px;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctitle%3E-%3C/title%3E%3Cpath d='M10.5,0a5.4457,5.4457,0,0,1,2.7734.75A5.6134,5.6134,0,0,1,15.25,2.7266a5.5224,5.5224,0,0,1,.5547,4.2344A5.4147,5.4147,0,0,1,15.25,8.2734,5.6134,5.6134,0,0,1,13.2734,10.25a5.5014,5.5014,0,0,1-4.6445.4219,5.6256,5.6256,0,0,1-1.6445-.9453L.8516,15.8516A.4807.4807,0,0,1,.5,16a.4823.4823,0,0,1-.3516-.1484.4905.4905,0,0,1,0-.7031l6.125-6.1328a5.6194,5.6194,0,0,1-.9453-1.6445A5.39,5.39,0,0,1,5,5.5a5.4457,5.4457,0,0,1,.75-2.7734A5.6134,5.6134,0,0,1,7.7266.75,5.4457,5.4457,0,0,1,10.5,0Zm0,10a4.347,4.347,0,0,0,1.75-.3555A4.5254,4.5254,0,0,0,14.6445,7.25,4.347,4.347,0,0,0,15,5.5a4.347,4.347,0,0,0-.3555-1.75A4.5254,4.5254,0,0,0,12.25,1.3555a4.4854,4.4854,0,0,0-3.5,0A4.5254,4.5254,0,0,0,6.3555,3.75a4.4854,4.4854,0,0,0,0,3.5A4.5254,4.5254,0,0,0,8.75,9.6445,4.3487,4.3487,0,0,0,10.5,10Z' fill='%234b4b4b'/%3E%3C/svg%3E");
}
#search > .search-input-box > .search-input-group > input {
display: inline-block;
position: absolute;
top: 0px;
left: 30px;
width: calc(100% - 40px);
height: 100%;
margin: 0;
padding: 0 5px;
border-collapse: collapse;
border: 0px;
}
#search > .search-input-box > .search-input-group > input:focus {
outline: none;
}
#results-panel {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
list-style: none;
overflow-y: auto;
max-height: calc(100vh - 119px);
}
#results-panel > li {
border-top: 1px dotted #ccc;
padding: 10px 20px;
}
#results-panel > li:hover {
background-color: #f1f2f2;
cursor: pointer;
}
#results-panel > li > .title {
font-family: segoeui-b;
line-height: 14pt;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#results-panel > li > .info {
width: 100%;
line-height: 14pt;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.poi-box {
max-width: 200px;
padding: 0;
margin: 0;
}
.poi-title-box {
background-color: #153C64;
width: calc(100% - 16px);
height: 23px;
padding: 8px;
color: #fff;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-family: segoeui-b;
}
.poi-content-box {
width: calc(100% - 16px);
height: calc(100% - 39px);
padding: 8px;
}
.poi-content-box .info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
background-repeat: no-repeat;
background-position: left;
padding-left: 15px;
background-size: 10px 10px;
width: calc(100% - 15px);
}
.info .phone {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS45NzQ2IDI2Ij48dGl0bGU+cG9pPC90aXRsZT48cGF0aCBkPSJNMjAuMzkxNCwxNS4zOTk0YTIuODE0MSwyLjgxNDEsMCwwLDEsMS4wNzIyLjIwOTUsMi43MjQzLDIuNzI0MywwLDAsMSwuOTA3My42MDNsMi43OTE2LDIuNzkzYTIuNzI1OCwyLjcyNTgsMCwwLDEsLjYwMjcuOTA3NywyLjg1MjksMi44NTI5LDAsMCwxLDAsMi4xNDU1LDIuNzI1OCwyLjcyNTgsMCwwLDEtLjYwMjcuOTA3N3EtLjcyMzMuNzM2My0xLjMyLDEuMzAxM2E3LjQwNDMsNy40MDQzLDAsMCwxLTEuMjMwOC45NTIxLDUuMDk1LDUuMDk1LDAsMCwxLTEuNDA4NS41ODRBNy42NjM4LDcuNjYzOCwwLDAsMSwxOS4zMzgyLDI2YTExLjQ3NywxMS40NzcsMCwwLDEtMy4yNjExLS40OTUxLDE4LjA4ODIsMTguMDg4MiwwLDAsMS0zLjMzMDktMS4zNzExLDIzLjg4LDIzLjg4LDAsMCwxLTMuMjQ4NC0yLjA4MkEyOC4xNTgsMjguMTU4LDAsMCwxLDYuNDksMTkuNDE3NSwyOC44OTc1LDI4Ljg5NzUsMCwwLDEsMy44ODI5LDE2LjM5NmEyMy42NzQ3LDIzLjY3NDcsMCwwLDEtMi4wNTU2LTMuMjVBMTguMjMyNywxOC4yMzI3LDAsMCwxLC40ODIyLDkuODM4OSwxMS4zODY0LDExLjM4NjQsMCwwLDEsMCw2LjY0LDcuNTk1Niw3LjU5NTYsMCwwLDEsLjE5NjcsNC43OCw1LjIxLDUuMjEsMCwwLDEsLjc4LDMuMzcwNmE3LjA3NSw3LjA3NSwwLDAsMSwuOTUxNy0xLjIzMTRxLjU2NDctLjU5LDEuMzAwNi0xLjMxNEEyLjgyNywyLjgyNywwLDAsMSwzLjkzMzYuMjE1OGEyLjc4NzIsMi43ODcyLDAsMCwxLDIuMTUwOCwwLDIuODA3OSwyLjgwNzksMCwwLDEsLjkwNzMuNjA5NGwyLjc5MTYsMi43OTNhMi43MjU4LDIuNzI1OCwwLDAsMSwuNjAyNy45MDc3LDIuODE3OSwyLjgxNzksMCwwLDEsLjIwOTQsMS4wNzI4LDIuNDc4LDIuNDc4LDAsMCwxLS4xOS45OTY2LDMuNjAxNiwzLjYwMTYsMCwwLDEtLjQ2OTUuNzkzNSw0LjY5NzksNC42OTc5LDAsMCwxLS42MTU0LjY0NzVxLS4zMzYzLjI5Mi0uNjE1NC41NzEzYTMuNzMyNCwzLjczMjQsMCwwLDAtLjQ2OTUuNTY0OSwxLjA4OTQsMS4wODk0LDAsMCwwLS4xOS42MTU3LDEuMTI1MiwxLjEyNTIsMCwwLDAsLjM0MjYuODI1Mmw2Ljk5MTcsNi45OTUxYTEuMTI0MSwxLjEyNDEsMCwwLDAsLjgyNDguMzQyOCwxLjA4ODEsMS4wODgxLDAsMCwwLC42MTU0LS4xOSwzLjczMTMsMy43MzEzLDAsMCwwLC41NjQ3LS40N3EuMjc5Mi0uMjc5My41NzEtLjYxNTdhNC42OTc1LDQuNjk3NSwwLDAsMSwuNjQ3MS0uNjE1NywzLjU5OTEsMy41OTkxLDAsMCwxLC43OTMxLS40NywyLjQ3NDcsMi40NzQ3LDAsMCwxLC45OTYxLS4xOU0xOS4zMzgyLDI0LjM3NWE1Ljc5NDIsNS43OTQyLDAsMCwwLDEuNTI5LS4xNzE0LDMuOTQ3OCwzLjk0NzgsMCwwLDAsMS4xMS0uNDk1MSw1LjczNDEsNS43MzQxLDAsMCwwLC45NjQ0LS44MDYycS40Njk1LS40ODI0LDEuMDc4Ni0xLjA5MThhMS4xMjUyLDEuMTI1MiwwLDAsMCwuMzQyNi0uODI1MiwxLjEwNDUsMS4xMDQ1LDAsMCwwLS4xODQtLjU0LDQuNzY0OSw0Ljc2NDksMCwwLDAtLjQ3NTgtLjY1MzhxLS4yOTE5LS4zNDI4LS42NTM1LS43MDQ2dC0uNzEwNi0uNjg1NXEtLjM0OS0uMzIzNy0uNjQ3MS0uNTk2N3QtLjQ2MzItLjQzOGExLjEzODksMS4xMzg5LDAsMCwwLS44Mzc1LS4zNDI4LDEuMDU4NywxLjA1ODcsMCwwLDAtLjYwOTEuMTksMy45MTY4LDMuOTE2OCwwLDAsMC0uNTU4My40N3EtLjI3OTIuMjc5My0uNTc3NC42MTU3YTUuMDAyNiw1LjAwMjYsMCwwLDEtLjY1MzUuNjE1NywzLjU5OTEsMy41OTkxLDAsMCwxLS43OTMxLjQ3LDIuNDc0NywyLjQ3NDcsMCwwLDEtLjk5NjEuMTksMi44MTQxLDIuODE0MSwwLDAsMS0xLjA3MjItLjIwOTUsMi43MjQzLDIuNzI0MywwLDAsMS0uOTA3My0uNjAzTDcuMjMyOCwxMS43Njg2YTIuNzI1OCwyLjcyNTgsMCwwLDEtLjYwMjctLjkwNzcsMi44MTc5LDIuODE3OSwwLDAsMS0uMjA5NC0xLjA3MjgsMi40NzgsMi40NzgsMCwwLDEsLjE5LS45OTY2LDMuNjAxNiwzLjYwMTYsMCwwLDEsLjQ2OTUtLjc5MzUsNS4wMDMsNS4wMDMsMCwwLDEsLjYxNTQtLjY1MzhxLjMzNjMtLjI5ODMuNjE1NC0uNTc3NmEzLjkxNzgsMy45MTc4LDAsMCwwLC40Njk1LS41NTg2LDEuMDYsMS4wNiwwLDAsMCwuMTktLjYwOTQsMS4xNCwxLjE0LDAsMCwwLS4zNDI2LS44Mzc5cS0uMTY1LS4xNjUtLjQzNzgtLjQ2MzRUNy41OTQ0LDMuNjVxLS4zMjM2LS4zNDkxLS42ODUyLS43MTA5VDYuMjA1LDIuMjg1MmE0Ljc2MjcsNC43NjI3LDAsMCwwLS42NTM1LS40NzYxLDEuMTAzMiwxLjEwMzIsMCwwLDAtLjUzOTMtLjE4NDEsMS4xMjQxLDEuMTI0MSwwLDAsMC0uODI0OC4zNDI4cS0uNjA5MS42MDk0LTEuMDg0OSwxLjA3OTFhNi40NjgzLDYuNDY4MywwLDAsMC0uODEyMS45NjQ4LDMuNzUsMy43NSwwLDAsMC0uNTA3NiwxLjExMDhBNS43NDQyLDUuNzQ0MiwwLDAsMCwxLjYxMTUsNi42NGE5Ljk4MzQsOS45ODM0LDAsMCwwLC40NjMyLDIuOTMyNiwxNi41LDE2LjUsMCwwLDAsMS4yODE2LDMuMDIxNSwyMy4wMTM3LDIzLjAxMzcsMCwwLDAsMS45MzUxLDIuOTc3MSwyNi41MjI5LDI2LjUyMjksMCwwLDAsMi40MzYzLDIuNzczOSwyNy4yODMyLDI3LjI4MzIsMCwwLDAsMi43ODUzLDIuNDEyMSwyMi45ODcsMjIuOTg3LDAsMCwwLDIuOTY5MywxLjkxMDYsMTYuMzY2MSwxNi4zNjYxLDAsMCwwLDIuOTk0NiwxLjI1NjhBOS44ODEsOS44ODEsMCwwLDAsMTkuMzM4MiwyNC4zNzVaIiBmaWxsPSIjNjY2NzY3Ii8+PC9zdmc+");
}
.info .website {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyI+PHRpdGxlPnBvaTwvdGl0bGU+PHBhdGggZD0iTTEzLjUsMGExMy4yOTc4LDEzLjI5NzgsMCwwLDEsMy41ODU5LjQ4MTIsMTMuNjUyNCwxMy42NTI0LDAsMCwxLDMuMjMsMS4zNTc5LDEzLjQ3NDMsMTMuNDc0MywwLDAsMSw0Ljg0NSw0Ljg0NSwxMy42NTI0LDEzLjY1MjQsMCwwLDEsMS4zNTc5LDMuMjMsMTMuNjAxOSwxMy42MDE5LDAsMCwxLDAsNy4xNzE5LDEzLjY1MjQsMTMuNjUyNCwwLDAsMS0xLjM1NzksMy4yMywxMy40NzQzLDEzLjQ3NDMsMCwwLDEtNC44NDUsNC44NDUsMTMuNjUyNCwxMy42NTI0LDAsMCwxLTMuMjMsMS4zNTc5LDEzLjYwMTksMTMuNjAxOSwwLDAsMS03LjE3MTksMCwxMy42NTI0LDEzLjY1MjQsMCwwLDEtMy4yMy0xLjM1NzksMTMuNDc0MywxMy40NzQzLDAsMCwxLTQuODQ1LTQuODQ1QTEzLjY4MTIsMTMuNjgxMiwwLDAsMSwuNDgxMiwxNy4wOTI1YTEzLjYyNjUsMTMuNjI2NSwwLDAsMSwwLTcuMTc4NSwxMy42NTI0LDEzLjY1MjQsMCwwLDEsMS4zNTc5LTMuMjMsMTMuNDc0MywxMy40NzQzLDAsMCwxLDQuODQ1LTQuODQ1QTEzLjY4MTIsMTMuNjgxMiwwLDAsMSw5LjkwNzUuNDgxMiwxMy4yNzU1LDEzLjI3NTUsMCwwLDEsMTMuNSwwTTI0LjE2NTUsOC40Mzc1YTExLjI2NzgsMTEuMjY3OCwwLDAsMC0xLjIxMjktMi4wMSwxMi4wMDg0LDEyLjAwODQsMCwwLDAtMS41ODItMS43MiwxMi4yNCwxMi4yNCwwLDAsMC0xLjg4NTMtMS4zODQzLDExLjM1MjYsMTEuMzUyNiwwLDAsMC0yLjEyMjYtLjk4ODhBMTEuMjA5NCwxMS4yMDk0LDAsMCwxLDE4LjIyLDMuNzMxYTE0LjMzMTYsMTQuMzMxNiwwLDAsMSwuNjc5LDEuNTIyNywxNS44Nzc1LDE1Ljg3NzUsMCwwLDEsLjUwNzYsMS41ODg2cS4yMTA5LjgwNDIuMzY5MSwxLjU5NTJoNC4zOU0yNS4zMTI1LDEzLjVhMTEuNjUyNSwxMS42NTI1LDAsMCwwLS40ODc4LTMuMzc1SDIwLjAzOTFxLjEwNTUuODQzNy4xNTgyLDEuNjgwOVQyMC4yNSwxMy41cTAsLjg1NjktLjA1MjcsMS42OTQxdC0uMTU4MiwxLjY4MDloNC43ODU2YTExLjY1MjUsMTEuNjUyNSwwLDAsMCwuNDg3OC0zLjM3NU0xMy41LDI1LjMxMjVhMi4yMDg2LDIuMjA4NiwwLDAsMCwxLjIwNjMtLjM1Niw0LjM3Niw0LjM3NiwwLDAsMCwxLjAzNDktLjkzNiw3LjQwMjUsNy40MDI1LDAsMCwwLC44NS0xLjMxMTgsMTUuMzI3MiwxNS4zMjcyLDAsMCwwLC42NjU4LTEuNDgzMnEuMjktLjc1MTUuNDg3OC0xLjQ1dC4zMDMyLTEuMjEyOUg4Ljk1MTdxLjEwNTUuNTE0Mi4zMDMyLDEuMjEyOXQuNDg3OCwxLjQ1YTE1LjMyNzQsMTUuMzI3NCwwLDAsMCwuNjY1OCwxLjQ4MzIsNy40MDI1LDcuNDAyNSwwLDAsMCwuODUsMS4zMTE4LDQuMzc2MSw0LjM3NjEsMCwwLDAsMS4wMzQ5LjkzNiwyLjIwODYsMi4yMDg2LDAsMCwwLDEuMjA2My4zNTZtNC44Mzg0LTguNDM3NXEuMTA1NS0uODQzOC4xNjQ4LTEuNjgwOVQxOC41NjI1LDEzLjVxMC0uODU2OS0uMDU5My0xLjY5NDF0LS4xNjQ4LTEuNjgwOUg4LjY2MTZxLS4xMDU1Ljg0MzctLjE2NDgsMS42ODA5VDguNDM3NSwxMy41cTAsLjg1NjkuMDU5MywxLjY5NDF0LjE2NDgsMS42ODA5aDkuNjc2OE0xLjY4NzUsMTMuNWExMS42NTI1LDExLjY1MjUsMCwwLDAsLjQ4NzgsMy4zNzVINi45NjA5cS0uMTA1NS0uODQzOC0uMTU4Mi0xLjY4MDlUNi43NSwxMy41cTAtLjg1NjkuMDUyNy0xLjY5NDF0LjE1ODItMS42ODA5SDIuMTc1M0ExMS42NTI1LDExLjY1MjUsMCwwLDAsMS42ODc1LDEzLjVNMTMuNSwxLjY4NzVhMi4yMDg2LDIuMjA4NiwwLDAsMC0xLjIwNjMuMzU2LDQuMzc2LDQuMzc2LDAsMCwwLTEuMDM0OS45MzYsNy40MDI1LDcuNDAyNSwwLDAsMC0uODUsMS4zMTE4LDE1LjMyNzQsMTUuMzI3NCwwLDAsMC0uNjY1OCwxLjQ4MzJxLS4yOS43NTE1LS40ODc4LDEuNDVUOC45NTE3LDguNDM3NWg5LjA5NjdxLS4xMDU1LS41MTQyLS4zMDMyLTEuMjEyOXQtLjQ4NzgtMS40NWExNS4zMjcyLDE1LjMyNzIsMCwwLDAtLjY2NTgtMS40ODMyLDcuNDAyNSw3LjQwMjUsMCwwLDAtLjg1LTEuMzExOCw0LjM3Niw0LjM3NiwwLDAsMC0xLjAzNDktLjkzNkEyLjIwODYsMi4yMDg2LDAsMCwwLDEzLjUsMS42ODc1bS0zLjg2MjguNjQ2YTExLjM1MjYsMTEuMzUyNiwwLDAsMC0yLjEyMjYuOTg4OEExMi4yNCwxMi4yNCwwLDAsMCw1LjYyOTQsNC43MDY1YTEyLjAwODQsMTIuMDA4NCwwLDAsMC0xLjU4MiwxLjcyLDExLjI2NzgsMTEuMjY3OCwwLDAsMC0xLjIxMjksMi4wMWg0LjM5cS4xNTgyLS43OTEuMzY5MS0xLjU5NTJhMTUuODc3OCwxNS44Nzc4LDAsMCwxLC41MDc2LTEuNTg4NkExNC4zMzE3LDE0LjMzMTcsMCwwLDEsOC43OCwzLjczMWExMS4yMDkzLDExLjIwOTMsMCwwLDEsLjg1NjktMS4zOTc1TTIuODM0NSwxOC41NjI1YTExLjI2NzgsMTEuMjY3OCwwLDAsMCwxLjIxMjksMi4wMSwxMi4wMDgzLDEyLjAwODMsMCwwLDAsMS41ODIsMS43MiwxMi4yNCwxMi4yNCwwLDAsMCwxLjg4NTMsMS4zODQzLDExLjM1MjUsMTEuMzUyNSwwLDAsMCwyLjEyMjYuOTg4OEExMS4yMDkzLDExLjIwOTMsMCwwLDEsOC43OCwyMy4yNjlhMTQuMzMxNywxNC4zMzE3LDAsMCwxLS42NzktMS41MjI3LDE1Ljg3NzgsMTUuODc3OCwwLDAsMS0uNTA3Ni0xLjU4ODZxLS4yMTA5LS44MDQyLS4zNjkxLTEuNTk1MmgtNC4zOW0xNC41MjgzLDYuMTA0YTExLjM1MjYsMTEuMzUyNiwwLDAsMCwyLjEyMjYtLjk4ODgsMTIuMjQsMTIuMjQsMCwwLDAsMS44ODUzLTEuMzg0MywxMi4wMDgzLDEyLjAwODMsMCwwLDAsMS41ODItMS43MiwxMS4yNjc5LDExLjI2NzksMCwwLDAsMS4yMTI5LTIuMDFoLTQuMzlxLS4xNTgyLjc5MS0uMzY5MSwxLjU5NTJhMTUuODc3NSwxNS44Nzc1LDAsMCwxLS41MDc2LDEuNTg4NiwxNC4zMzE1LDE0LjMzMTUsMCwwLDEtLjY3OSwxLjUyMjdBMTEuMjA5NCwxMS4yMDk0LDAsMCwxLDE3LjM2MjgsMjQuNjY2NVoiIGZpbGw9IiM2NjY3NjciLz48L3N2Zz4=");
}
.info .location {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAzNiI+PHRpdGxlPnBvaTwvdGl0bGU+PHBhdGggZD0iTTEzLjUsMGExMy4zNywxMy4zNywwLDAsMSwzLjU4NTkuNDc5MiwxMy43ODY2LDEzLjc4NjYsMCwwLDEsMy4yMjczLDEuMzQzOCwxMy4zMzg2LDEzLjMzODYsMCwwLDEsNi4yMDE2LDcuOTY4N0ExMi45MDA5LDEyLjkwMDksMCwwLDEsMjcsMTMuMzMzM2ExMC41NjY0LDEwLjU2NjQsMCwwLDEtLjM0OCwyLjc0LDEzLjQwNTEsMTMuNDA1MSwwLDAsMS0xLjAwMiwyLjU5MzhMMTMuNSwzNiwxLjM1LDE4LjY2NjdBMTMuNDA1LDEzLjQwNSwwLDAsMSwuMzQ4LDE2LjA3MjksMTAuNTY2NCwxMC41NjY0LDAsMCwxLDAsMTMuMzMzMywxMi45MDA5LDEyLjkwMDksMCwwLDEsLjQ4NTIsOS43OTE3LDEzLjQzNDYsMTMuNDM0NiwwLDAsMSwxLjg0NTcsNi42MDQyYTEzLjQ1MywxMy40NTMsMCwwLDEsNC44NDEtNC43ODEyQTEzLjc4NjUsMTMuNzg2NSwwLDAsMSw5LjkxNDEuNDc5MiwxMy4zNywxMy4zNywwLDAsMSwxMy41LDBNMjMuNTQwNiwxNy42MjVxMC0uMDIwOC4wMTA1LS4wMjA4dC4wMTA1LS4wMjA4YTguOTgsOC45OCwwLDAsMCwuODAxNi0yLjA2MjUsOC44ODE2LDguODgxNiwwLDAsMCwuMjc0Mi0yLjE4NzUsMTAuNTMzNywxMC41MzM3LDAsMCwwLS44NzU0LTQuMjcwOCwxMS4xNTYxLDExLjE1NjEsMCwwLDAtMi4zOTQxLTMuNSwxMS4zMSwxMS4zMSwwLDAsMC0zLjU0MzctMi4zNjQ2QTEwLjg5NjEsMTAuODk2MSwwLDAsMCwxMy41LDIuMzMzM2ExMC44OTYxLDEwLjg5NjEsMCwwLDAtNC4zMjQyLjg2NDZBMTEuMzEsMTEuMzEsMCwwLDAsNS42MzIsNS41NjI1YTExLjE1NjEsMTEuMTU2MSwwLDAsMC0yLjM5NDEsMy41LDEwLjUzMzcsMTAuNTMzNywwLDAsMC0uODc1NCw0LjI3MDgsOC44ODE1LDguODgxNSwwLDAsMCwuMjc0MiwyLjE4NzUsOC45OCw4Ljk4LDAsMCwwLC44MDE2LDIuMDYyNXEwLC4wMjA4LjAxMDUuMDIwOHQuMDEwNS4wMjA4TDEzLjUsMzAuNzkxNywyMy41NDA2LDE3LjYyNU0xMy41LDUuNWE3LjgxMjIsNy44MTIyLDAsMCwxLDMuMDkuNjE0Niw4LjAwOTMsOC4wMDkzLDAsMCwxLDIuNTIwNywxLjY3NzEsNy45LDcuOSwwLDAsMSwxLjY5OCwyLjQ5LDcuNzk2LDcuNzk2LDAsMCwxLDAsNi4xMDQyLDcuOSw3LjksMCwwLDEtMS42OTgsMi40OUE4LjAwOTMsOC4wMDkzLDAsMCwxLDE2LjU5LDIwLjU1MjFhOC4wNzY0LDguMDc2NCwwLDAsMS02LjE4LDBBOC4wMDkyLDguMDA5MiwwLDAsMSw3Ljg4OTEsMTguODc1YTcuOSw3LjksMCwwLDEtMS42OTgtMi40OSw3Ljc5Niw3Ljc5NiwwLDAsMSwwLTYuMTA0Miw3LjksNy45LDAsMCwxLDEuNjk4LTIuNDlBOC4wMDkyLDguMDA5MiwwLDAsMSwxMC40MSw2LjExNDYsNy44MTIzLDcuODEyMywwLDAsMSwxMy41LDUuNW0wLDEzLjMzMzNhNS41NDA3LDUuNTQwNywwLDAsMCw1LjEzNjMtMy4zNTQyLDUuNTQsNS41NCwwLDAsMCwwLTQuMjkxNyw1LjUwNTQsNS41MDU0LDAsMCwwLTEuMTkxOC0xLjc1LDUuNjI4OSw1LjYyODksMCwwLDAtNy44ODkxLDAsNS41MDU0LDUuNTA1NCwwLDAsMC0xLjE5MTgsMS43NSw1LjU0LDUuNTQsMCwwLDAsMCw0LjI5MTcsNS41MDU0LDUuNTA1NCwwLDAsMCwxLjE5MTgsMS43NUE1LjU2OTQsNS41Njk0LDAsMCwwLDEzLjUsMTguODMzM1oiIGZpbGw9IiM2NzY4NjciLz48L3N2Zz4=");
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
<div id="search">
<div class="search-input-box">
<div class="search-input-group">
<div class="search-icon" type="button"></div>
<input id="search-input" type="text" placeholder="Search">
</div>
</div>
<ul id="results-panel"></ul>
</div>
</body>
</html>

cshtml files are generally meant to contain a subset of HTML elements that go into a page, but you are pasting in the code for a full HTML page, thus putting an HTML page element within another one which generally doesn't go well. The root cause of the issue you are seeing is that the original example modifies the css of the body and html page to stretch to full width/height, and the map is set to take up 100% of these. However, when rendered via MVC, the map is not in the root body tag, but within the main tag of the generated page which has CSS that ignores percentage-based widths/heights.
A simple fix so you can see the map is to add the following CSS:
main {
position: relative;
width: 100%;
height: calc(100vh - 150px);
}
This gives the main element of the page a size that the map can then fill up. Alternatively, you can give the maps div element a fixed size in pixels.

Onclick not this

I have created a function for a sidebar that slides down the first href when clicking on this and then anything that was not this would slide up. This worked fine until I needed to call the function using "onclick" which then meant not $(this) would not work as it can only call (this) . I am using tagbuilder so can only call one unique event listener.
JS
$(".foo > a").each(function () {
$(this).click(function () {
$(this).siblings(".sibling").slideToggle();
$(this).toggleClass("active");
$(".foo > a").not(this).siblings(".sibling").slideUp();
$(".foo > a").not(this).removeClass("active");
});
});
C#
a.MergeAttribute("onclick", "Click.call(this)");
Not this to target the sidebar and slide not this up

To not add CSS class to the current target, just remove the current CSS and add to its siblings.
$(".foo > a").click(function () {
$(this)
.removeClass('active')
.siblings()
.addClass('active');
});
.foo {
display: flex;
}
.foo a {
border: 1px solid black;
color: black;
padding: 15px;
margin: 15px;
text-decoration: none;
}
.foo a.active {
background: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">
Link1
Link2
Link3
</div>

Twitter.Typeahead is not working with bootsrap 3.00 in asp.net mvc 5

Dear I have installed Twitter.Typeahead version 0.11.1. it is not working. Here is my Code
<div class="form-group" style="display:none" id="serialNumber">
<div class="tt-container">
<label>Serial Number</label>
<input class="typeahead form-control" id="SerialNumber" name="SerialNumber" type="text" value="" placeholder="Enter Serial Number Here.." />
</div>
</div>
<ul id="lstSerials" class="list-group"></ul>
And bellow is my script
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#SerialNumber').typeahead({
minLength: 3,
highlight: true,
hint: true
}, {
name: 'serials',
display: 'serialNumbers',
source: serials
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
Here is Styling for typeahead
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0; }
.tt-hint {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #999;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.tt-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box; }
.tt-suggestion {
display: block;
padding: 3px 20px;
width: 100%; }
.tt-suggestion.tt-selectable {
margin: 5px 0px 5px 0px; }
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #428bca; }
.tt-suggestion.tt-cursor a {
color: #fff; }
.tt-suggestion p {
margin: 0; }
Finally here is the controller, for testing purpose I have a static data
public JsonResult GetSerialNo(string query)
{
List<string> lstTest = new List<string>();
lstTest.Add("aaaHafiz");
lstTest.Add("aaaSiddiq");
lstTest.Add("aaaUmer");
return Json(new { serialNumbers = lstTest }, JsonRequestBehavior.AllowGet);
}
But when I run the application after writing three words i get only one value which is invisible don't know why.. the inspection also shows no errors.
sample output errors are given in these pictures:
When I type the keywords in the textbox
I get only one suggestion instead of three and also when i look
at this how bad is this having look and feel

Hi I have Made changes in your code now it is working fine.
I have added Filter function which return serial numbers.
Script Reference
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/typeahead.js/typeahead.jquery.js"></script>
<script src="~/typeahead.js/bloodhound.min.js"></script>
<script>
$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://localhost:49497/DemoType/GetSerialNo?query=%QUERY',
filter: function (data)
{
// Map the remote source JSON array to a JavaScript object array
return $.map(data.serialNumbers, function (serial)
{
return {
value: serial
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
serials.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: serials.ttAdapter()
});
});
</script>
OutPut :-

Finally i Solved the issue by optimizing the javascript part of my code nd below is my code
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
filter: function (data) {
return $.map(data.serialNumbers, function (serial) {
return { value: serial };
});
}
}
});
serials.initialize();
$('#SerialNumber').typeahead({
hint: true,
highlight: true,
minLength: 3
}, {
limit: Infinity,
displayKey: 'value',
source: serials.ttAdapter()
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data.value + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
});
Now It is working according to the expectations
-Thanks

Why css styles are not applying for matching rows in javascript?

If records are matching with searchtext need to hightlight that entire row but not applying that css style.
My javascript function
$(function () {
grid = $('#tblsearchresult tbody');
// handle search fields key up event
$('#search-term').keyup(function (e) {
text = $(this).val().trim(); // grab search term
if (text.length > 1) {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
// iterate through all grid rows
grid.find('tr').each(function (i) {
// check to see if search term matches ApplicationName column
if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase()))
$(this).addClass('result');
// $(this).css({ background: "#A4D3EE" });
// check to see if search term matches RoleName column
if ($(this).find("td:eq(1)").text().toUpperCase().match(text.toUpperCase()))
$(this).addClass('result');
});
}
else {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
$('table').tablesorter();
My CSS :
table.tablesorter tbody td.result {
background: #A4D3EE;
}
table.tablesorter {
font-family:arial;
color: rgb(51, 51, 51);
margin:10px 0pt 15px;
font-size: 10pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #8dbdd8;
border: 1px solid #FFF;
font-size: 10pt;
padding: 5px;
}
table.tablesorter thead tr .header:not(.nosort) {
background-image: url('/sorter/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
background-color: rgb(239, 243, 251);
padding: 5px;
border: solid 1px #e8eef4;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:not(.nosort) {
background-image: url('/sorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown:not(.nosort) {
background-image: url('/sorter/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
UI Design :
<table id="tblsearchresult" class="tablesorter">
<thead>
<tr>
</tr>
</thead>
<tbody></tbody>
</table>
Table Data :
applicationame role
application1 appadministrator
app developer
application2 tester
if i given 'app'as search text need to highlight secondrow only .highlightling firstrow also because 'app' is there in role of firstrow..exact match should be highlight on every rows.please tell me.
Please check my code i need to highlight the matching record row .if searchtext matching with table column data need to highlight the entire row.but not applying css in above code.

It seems like you are not applying the result class to the correct element. In your CSS, the following line defines the result class for TDs:
table.tablesorter tbody td.result
But in your javascript, this line will apply it to the table row:
$(this).addClass('result');
So by changing this line to
$(this).children('td').addClass('result');
you should be okay.
Update:
Based on your feedback, I've created an example on jsFiddle for you: http://jsfiddle.net/kUxNj/4/
// check to see if search term matches ApplicationName column
if ($(this).find('td:first-child').text().toUpperCase() === text.toUpperCase())
$(this).children('td').addClass('result');
// check to see if search term matches RoleName column
if ($(this).find("td:eq(1)").text().toUpperCase() === text.toUpperCase())
$(this).children('td').addClass('result');

javascript/jquery modal popup dialog MVC 4 / render partial view

I have been using the DevExpress PopupControl. They look nice and pretty but they do not display the scrollbars on iOS/Android devices. So I want to come up with an alternative. My immediate use is just for displaying a partial view, read only and a close button.
I am not familiar with jquery so I am having a hard time piecing together all the different posts about this topic.
My index.cshtml is a portal with many different partial views. One of the partial views is a list of clients. The client name is a link to client detail. This is where I need the popup dialog.
Partial view with client list (note the link calls a javascript function passing the ID I want to view:
<table style="text-align: left;">
#if ((Model != null) && (Model.Items != null))
{
foreach (WebMVC.Models.VisitDetails p in Model.Items)
{
sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');
<tr>
<td style="width: auto">
#Html.DevExpress().HyperLink(
settings =>
{
settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
settings.Properties.Text = #p.NameNumZone;
settings.Properties.ClientSideEvents.Click =
string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
}
).GetHtml()
</td>
</tr>
}
}
</table>
current javascript in index.cshtml that handles the popup:
<script type="text/javascript">
var _clientId;
function MethodClient(clientid) {
_clientId = clientid;
popClient.PerformCallback();
popClient.Show();
}
function OnBeginCallbackClient(s, e) {
e.customArgs["clientid"] = _clientId;
}
<script type="text/javascript">
popClient is the current dialog that I want to replace. I would like the dialog to be a specific height regardless of the content size.
example of the partial view to be displayed in the dialog:
#model WebMVC.Models.ClientDetail
#{
DateTime now = DateTime.Today;
int age = now.Year - Model.Birthdate.Year;
if (Model.Birthdate > now.AddYears(-age))
{
age--;
}
string sBirthdate = Model.Birthdate.ToShortDateString() + " (Age: " + age + ")";
}
<div id="contentDiv">
<span class="display-label">#Html.DisplayNameFor(model => model.NameNumZone):</span>
<span class="display-field">#Html.DisplayFor(model => model.NameNumZone)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Sex):</span>
<span class="display-field">#Html.DisplayFor(model => model.Sex)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Birthdate):</span>
<span class="display-field">#Html.DisplayFor(model => #sBirthdate)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Address):</span>
<span class="display-field">#Html.DisplayFor(model => model.Address)</span>
<br />
</div>
Controller:
public ActionResult Details()
{
string id = "";
if (!string.IsNullOrEmpty(Request.Params["clientid"]))
id = Request.Params["clientid"];
int clientid = 0;
if (id != "")
clientid = Convert.ToInt32(id);
ClientDetail cl;
if (clientid != 0)
ClientDetail cl = GetClientDetails(clientid);
else
ClientDetail cl = new ClientDetail();
return PartialView("ClientPopupPartial", cl);
}
Can I have one popup and render different partial views (maybe by adding a hardcoded param such as area = 1, area = 2 to the method client call)? Or should there be one popup for each area of detail (client, visit, directions...).

Example with a static dialog (No AJAX)
Define a div for your dialog content in a partial view:
#model ClientDetail
<h2>Client Detail</h2>
#Html.DisplayFor(m => m.NameNumZone)
#Html.DisplayFor(m => m.Birthdate)
...
Dialog trigger and partial view:
#p.NameNumZone
<div id="client-detail-modal">
#Html.Partial("ClientDetail", Model.Item)
</div>
Javascript:
$(document).ready(function() {
// setup the dialog
$("#client-detail-modal").dialog({
modal: true,
autoOpen: false,
height: 100,
width: 200
});
// bind the click event
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
$("#client-detail-modal").dialog("open"); // show dialog
});
});
Now if you have more than one client on a page you'll need a dialog per client. After a few clients it gets ugly. Instead, fill the dialog content dynamically.
Dynamic dialog content (AJAX)
Dialog container for your partial is empty initially:
<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>
Get the partial via AJAX:
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var clientId = $(this).data("clientId");
$.ajax({
url: "Client/Details/" + clientId,
type: "GET",
})
.done(function(result) {
$("#client-detail-modal").html(result).dialog("open");
});
});
Dynamic content (No AJAX)
Another way to fill the dialog would be to populate the data attributes of the trigger element then replace content using javascript.
<a href="#" class="dialog-trigger"
data-clientId="#p.Account"
data-birthdate="#p.Birthdate">#p.NameNumZone</a>
$(".dialog-trigger").on("click", function(event) {
var clientId = $(this).data("clientId");
var birthdate = $(this).data("birthdate");
// now replace content with new values
$("span.birthdate").text(birthdate);
});

Put this content in your style sheet
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
and in the code use the following
Open Modal
<div id="openModal" class="modalDialog" data-theme="c">
<div>
X
<h2>Pop up</h2>
<p>Pop up content. You can add your controls and content here</p>
</div>
</div>
this logic worked for me. Hope it works for you also.
Instead of using X for closing it is preferred you navigate to some parent page instead.

Categories

Resources