I would like to pass the studentID from the jQuery code to the C# code function when user clicks on the View link, please advise.
$(document).on("ready", function () {
obj = {
width: 940,
height: 555,
title: "Students List ",
};
obj.colModel = [
{
dataIndx: 7, editable: false, sortable: false, title: "Password", width: 65, align: "center", resizable: false, dataIndx: "studentID",
render: function (ui)
{
var rowData = ui.rowData, dataIndx = ui.dataIndx;
var val = rowData[dataIndx];
return "<a href='#" + rowData.studentID + "' style='text-decoration: underline;'>View</a>";
}, className: "checkboxColumn"
},
{ title: "Student Name", width: 220, getEditCellData: saveCell, dataIndx: "studentName" },
{ title: "Student ID", width: 120, getEditCellData: saveCell, dataIndx: "studentID" },
];
obj.dataModel = {
dataType: "JSON",
rPP: 20,
sortDir: "down",
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
filterIndx: "",
filterValue: ""
};
});
</script>
Grid
<asp:Content ID="Content2" ContentPlaceHolderID="PageTitlePlaceHolder" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<div id="grid_table" style="margin: auto;"></div>
</asp:Content>
Suggest changing your anchor tag to this
<a href="javascript:void(0);" data-studentId=rowdata.studentID style='text-decoration: underline;' class='viewStudent' >View</a>
After that wire up the click event in jquery for the view button
$(document).ready(function() {
$(".viewStudent").on("click", function() {
.. do what you need to do here ..
});
});
Here is a jsfiddle on how to do this
https://jsfiddle.net/8brpuo82/7/
Looks like you may be using web forms here - have you tried using a Hidden Field? Once you bind the anchor tag click event to a jQuery function:
ahh, I see GJohn beat me to it
... then you should be able to reference that ID within the Page response lifecycle, e.g., int studentID = hfStudentID.Value;
Related
Here is the jQuery Code to Show the Dialog Box Dynamically.
function ShowDialog(id) {
var x = $('btn_' + id).position();
$("#dialog_" + id).dialog({
title: "Description",
position:{ my:"" },
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
position:
{ my: "center", at: "center", of: window }
});
var theDialog = $("#dialog_" + id);
theDialog.dialog("open");
}
Here is Html Code for the gridview with generate dynamically.
<asp:TemplateField HeaderText="Description" ItemStyle-Width="80px">
<ItemTemplate>
<div id="dialog_1" style="display: none;">
<p>Details</p>
</div>
<button type="button" class="btn btn-success btn-sm btn_1" onclick="ShowDialog(1)">Show Detail</button>
</ItemTemplate>
</asp:TemplateField>
And Output is:
Should be open here
Try writing position: { my: "right center", at: "right center"} like this:
function ShowDialog(id) {
var x = $('btn_' + id).position();
$("#dialog_" + id).dialog({
title: "Description",
position:{ my:"" },
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
position:
{ my: "right center", at: "right center", of: window } // here
});
var theDialog = $("#dialog_" + id);
theDialog.dialog("open");
}
My requirement needs me to display a jqGrid in an Jquery UI popup dialog.
Behaviour noticed :
I am able to perform paging, sorting, searching but when I call the same in a Jquery UI dialog it does not search. It only does paging and sorting.
My Research :
I noticed when I called the same JgGrid without it being displayed in the Jquery UI dialog it does searching, paging and sorting.
HTML Code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
var curRowNum = 0;
var curPressedButton = '';
var curPressedNum = 0;
$(function () {
$("#test").click(function () {
$("#dialog-form-lookup-site").dialog('open');
})
$("#tblSiteLookup").jqGrid({
url: 'Handlers/SitesHandler.ashx?l=sa',
datatype: "json",
height: 200,
width: 600,
mtype: 'post',
loadonce : true,
colNames: ['Guid', 'Company', 'Customer Site', 'Annual Consumption (kWh)'],
],
colModel: [
{ name: 'Guid', index: 'Guid', search: true, searchoptions: { sopt: ['eq']} },
//{ name: 'price', index: 'price', width: 60, search: true, stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'}} },
{name: 'Company', index: 'Company', width: 70, sortable: true, editable: false, searchtype: "number", search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
{ name: 'CustomerSite', index: 'CustomerSite', width: 70, sortable: true, editable: false, search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
{ name: 'AnnualConsumption', width: 100, sortable: true, editable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager11',
sortname: 'Company',
viewrecords: true,
sortorder: "desc",
caption: "Site"
});
$("#tblSiteLookup").jqGrid('navGrid', '#pager11', { search: true, edit: false, add: false, del: false, searchtext: "search" });
$("#dialog-form-lookup-site").dialog({
autoOpen: false,
height: 450,
width: 700,
modal: true,
dialogClass: 'no-close',
buttons: {
"OK": function () {
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
}
});
});
</script>
<title></title>
</head>
<body>
<form id="HtmlForm" runat="server">
<div>
<input id="test" type="button" value="Test Sites List" />
</div>
<div id="dialog-form-lookup-site" title="Lookup Site">
<table id="tblSiteLookup" cellpadding="0" cellspacing="0">
</table>
<div id="pager11" style="width:500px">
</div>
</div>
</form>
</body>
</html>
Code on the server side in the SitesHandler.ashx:
public class SitesHandler : IHttpHandler , IRequiresSessionState
{
/// <summary>
/// Handle the request
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
HttpResponse response = context.Response;
string siteLists = GetSitesList();
response.Write(siteLists);
}
}
Question :
How do I call this from the above JQuery UI popup so that the search
works ?
Downgrading the jQuery library from 1.11.1 to 1.9.1 fixed the issue. Looks like the new Jquery library may not be compatible to the search feature of the JgGrid.
Code belows shows commented library code and library code in use which fixed this issue, hope this helps just in case you all bump into this issue:
<%--<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>--%>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
I'm new to MVC and Jquery. Trying to use jtable, but nothing happens when loading page.
This is my view.
<link href="~/scripts/jtable.2.4.0/themes/metro/blue/jtable.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="~/scripts/jtable.2.4.0/jquery.jtable.js">
</script>
#using (Html.BeginForm("Upload", "Hotels", FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<div id="HotelsTable"> </div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#HotelsTable').jtable({
title: 'List of Hotels',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '#Url.Action("HotelsList")'
},
fields: {
Hotel1: {
title: 'Region',
width: '10%'
},
Hotel2: {
title: 'Hotel',
list: false,
width: '10%'
},
Hotel3: {
title: 'Desde',
type: 'date',
displayFormat: 'yy-mm-dd',
width: '8%',
list: false
},
Hotel4: {
title: 'Hasta',
type: 'date',
displayFormat: 'yy-mm-dd',
width: '8%'
},
Hotel5: {
title: 'Comentarios',
width: '8%',
}
}
});
//Load person list from server
$('#HotelsTable').jtable('load');
});
</script>
}
</body>
</html>
This is my control:
[HttpPost]
public JsonResult HotelsList()
{
try
{
List<Models.Models.HotelElem> hotels =
db.Database.Fetch<Models.Models.HotelElem>("SELECT * FROM Hotels");
return Json(new { Result = "OK", Records = hotels });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
While debugging it doesn't even go my HotelList() method. Need some help, what could it be?
Thanks!
Found solution! Maybe will be useful for someone.
Forgot to add
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/jquery-ui-1.9.2.min.js"></script>
...)
I have a project that I am going to call image paths from SQL. I have tested placing the variable in the image source
HTML
<li><a href='"<%=img_src_path%>"'><img src='"<%=img_src_path%>"' id="myImage" runat="server" alt="" title=""/></a></li>
Code Behind
myImage.src = "imagePage";
Is this same thing possible with javascript? here is my jquery:
$("#fancybox-manual-c").click(function () {
$.fancybox.open([
{
href: '1_b.jpg',
title: 'My title'
}, {
href: '2_b.jpg',
title: '2nd title'
}, {
href: '3_b.jpg'
}
], {
helpers: {
thumbs: {
width: 75,
height: 50
}
}
});
Is it now possible to put the value of myImage in place of the actual images listed here in the jQuery
Yes, you can use <%= %> syntax in JavaScript to inject server variables into your code:
$("#fancybox-manual-c").click(function () {
$.fancybox.open([
{
href: '<%= img_src_path_1 >',
title: 'My title'
}, {
href: '<%= img_src_path_2 >',
title: '2nd title'
}, {
href: '<%= img_src_path_3 >'
}
], {
helpers: {
thumbs: {
width: 75,
height: 50
}
}
});
});
You could also access the src property of any image on your page with jQuery:
$("#myImage").prop("src");
But, there is some weirdness in your code:
You are setting the img src twice. Once with <%= %> in the HTML and again in the code behind with myImage.src = "imagePath";. Why?
You are double quoting your HTML attributes. Use single quotes or double quotes, but not both on a single attribute.
I'm not familiar with fancybox, but this is how I would use jQuery to do the basic idea.
$(document).ready(function() {
img_path = "/the_new_img_path.jpg"
$("#img_link").attr("href", img_path)
$("#img").attr("src", img_path)
})
Then in the HTML
<a href='/some_default_link' id='img_link'><img id='my_img' src='/some_default_image.jpg' /></a>
I am useing jquery pie chart in ASP.NET. pie chart doing work properly, but I want to bind values from database. How can I do bind database values in the pie chart. I have created a table in the database and I want to fetch values from database into the pie chart.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function ()
{
var chart;
$(document).ready(function ()
{
// Radialize the colors
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color)
{
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
chart = new Highcharts.Chart(
{
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function ()
{
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}
]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<di v id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
Simple solution would be to place your values from the DB in a hidden field and then access them using javascript and get their values to be used as part of the series.
This is the ASPX:
....
<asp:HiddenField ID="FireFoxDataValueFromDB" runat="server" />
<asp:HiddenField ID="IEDataValueFromDB" runat="server" />
....
This is the CS:
Page_Load Event()
{
if (!IsPostBack)
{
FireFoxDataValueFromDB = getFFDBValue();
IEDataValueFromDB = getIEDBValue
}
}
....
This is the Javascript:
var FFVal = $("#FireFoxDataValueFromDB").val();
var IEVal = $("#IEDataValueFromDB").val();
and then use it as the series data:
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', FFVal],
['IE', IEVal],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}...