jtable error loading in IIS - javascript

I have jtable working in debug mode from visual Studio using iisExpress, but when i publish it and install it on IIS it doesn't work any more.
the jtable doesn't even show when in IIS
Can anyone give me an help on this?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Filtering.aspx.cs" Inherits="jTableWithAspNetWebForms.Filtering" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Filtering With jTable and ASP.NET Web Forms</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/metroblue/jquery-ui.css" rel="stylesheet"
type="text/css" />
<!-- jTable style file -->
<link href="/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet"
type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"> </script>
<script src="/Scripts/jtablesite.js" type="text/javascript"></script>
<!-- A helper library for JSON serialization -->
<script type="text/javascript" src="/Scripts/jtable/external/json2.js"> </script>
<!-- Core jTable script file -->
<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js"></script>
<!-- ASP.NET Web Forms extension for jTable -->
<script type="text/javascript" src="/Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>
<style>
div.filtering
{
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
}
</style>
</head>
<body>
<div class="site-container">
<div class="filtering">
<form runat="server">
<label>
Name:
<input type="text" name="name" id="name" /></label>
<label>
City:
<asp:DropDownList ID="ddlCities" runat="server">
</asp:DropDownList>
</label>
<button type="submit" id="LoadRecordsButton">
Load records</button>
</form>
</div>
<div id="StudentTableContainer">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#StudentTableContainer').jtable({
title: 'The Student List',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '/Filtering.aspx/StudentListByFilter',
createAction: '/Filtering.aspx/CreateStudent',
updateAction: '/Filtering.aspx/UpdateStudent',
deleteAction: '/Filtering.aspx/DeleteStudent'
},
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
}
RecordDate: {
title: 'Record date',
width: '15%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false,
sorting: false //This column is not sortable!
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#StudentTableContainer').jtable('load', {
name: $('#name').val(),
cityId: $('#<% = ddlCities.ClientID %>').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
});
</script>
</body>
</html>

Related

Highcharts - How to set up data for x axis and y axis from java map

I want to create a chart using Highcharts. I know nothing about JS :) I code in Java
I have a map in controller class:
Map<Integer, Integer> surveyMap = new LinkedHashMap<>();
surveyMap.put(10, 21);
surveyMap.put(12, 23);
surveyMap.put(14, 25);
surveyMap.put(16, 17);
Ant it is my html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h2 align="center">Technology Line Graph</h2>
<div id="container"
style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script th:inline="javascript">
$(function(){
Highcharts.chart('container', {
xAxis: {
title: {
text: 'Dive time'
}
},
yAxis: {
title: {
text: 'Dive Depth'
}
},
series: [{
data: [${surveyMap.values()},${surveyMap.values()}]
}]
});
});
</script>
</body>
</html>
Of course it doesn't work. How to set data from a map for x and y axis??
Maybe it is just a syntax error.
Are there any better solutions?

I cannot validate ASP input using jQuery for the following Document

head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$document.ready(function(){
$("#Form1").validate({
rules:{
txtFname:{
required:true,
rangelength:[3,20],
}
},
messages: {
txtFname: "First Name Is Required",
}
})
})//ready function close
</script>
</head>
<body>
<form id="Form1" runat="server" clientidmode="static">
<asp:TextBox ID="txtFname" CssClass="form-control" runat="server"></asp:TextBox>
<asp:Button CssClass="btn btn-primary" id="btnSubmit" runat="server" Text="Submit"/>
</form>
</body>
I am trying to validate the txtFname Field in the form at row 1 in the modal but I am not able to.. I cant seem to figure out why. Can someone please help?
I am using bootstrap v3

Seems like a syntax issue (parenthesis, some extra colons and missing semicolons...etc)
try the following should work:
<script type="text/javascript">
$(document).ready(function() {
$("#Form1")
.validate({
rules: {
txtFname: {
required: true,
rangelength: [3, 20]
}
},
messages: {
txtFname: "First Name Is Required"
}
});
})//ready function close
</script>

Make jquery Dialog non Postback from SelectedNodeChanged

Im using the jquery dialog box and i am trying to stop the postback from happening when calling the dialog, so its basically handled on client side.
I am calling the dialog open from my Treeview's SelectedNodeChanged
protected void tvTreeList_SelectedNodeChanged(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", string.Format("ParentNodeClick('{0}','{1}')", lblDescText, lblTitleText), true);
}
this is my javascript function
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
Is there any way i can do this? Already tried to use this but it doesnt seem to work.
$("#dialog").parent().appendTo(jQuery("form:first"));
Full html on masterpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Data Source</title>
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="Style/jquery.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
</head>
<body>
<form id="form1" runat="server" style="align-content:center; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="dialog" title="">
<p></p>
</div>
<div runat="server" style="text-align:center;">
<h1 style="color:#505050;">Datastatus from Data servers</h1>
</div>
<asp:ContentPlaceHolder ID="cphContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
and my treeview
<div id="TreeList">
<asp:TreeView ID="tvTreeList" runat="server" OnSelectedNodeChanged="tvTreeList_SelectedNodeChanged" >
<NodeStyle CssClass="NodeStyle"/>
<HoverNodeStyle CssClass="HoverNodeStyle"/>
<SelectedNodeStyle CssClass="SelectedNodeStyle" />
</asp:TreeView>
</div>

High Charts doesn't show in my HTML page, unless I view the page as a standalone one

I'm using HighCharts to display some information. The Chart doesnt seem to show in the Div, unless I place the page away from the root. For example, the below code brings up the chart as expected when saved and opened from my desktop, BUT it shows blank when opened from the root directory of my site (root);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Election Results | First for Kirkby</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<body data-post="free-responsive-html5-businessportfolio-template-amazingbiz">
<div class="container box_shadow">
<!--#include FILE="header.html"-->
<!--page_container-->
<div class="page_container">
<div class="wrap">
<div class="breadcrumb">
<div>
Home<span>/</span>Election Results
</div>
</div>
<div class="container">
<section>
<div class="page-header">
<h2 class="title">Election Results</h2>
</div>
<div id="container" style="width:50%; height:400px;">
</div>
</section>
</div>
</div>
</div>
<!--#include FILE="footer.html"-->
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/top-bar.js" ></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/bsa-ads.js" ></script> <!--Dynamically creates analytics markup-->
</body>
</html>
Any help would be appreciated in making this show in the page its meant to show in!
Thanks

jqGrid Events problem

i have scenario where i have to do the batch update like in save change i have send the update to the database from jgrid.
now, i am using the the array to store the updated data.
and on onafterupdate event i have to add the element to the array.
onafterupdate event is not working.
please, help me. How to use onafterupdate event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link rel="stylesheet" href="/Content/css/base.css" />
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<!--<script type="text/javascript">
var check=$retrivexml;
alert(check);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<!-- <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />-->
<!--<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />-->
<!--<link href="../../Content/css/Test/jquery-ui.css" rel="stylesheet" type="text/css" />-->
<!--<link href="../../Content/css/Test/ui.jqgrid.css" rel="stylesheet" type="text/css" />-->
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="../../Content/js/Jgrid js/grid.base.js"></script>
<script type="text/javascript" src="../../Content/js/Jgrid js/grid.formedit.js"></script> -->
<script type="text/javascript">
jQuery(document).ready( function() {
var i=3;
var grid = jQuery("#test");
var MyExportToXml = function (grid) {
var dataFromGrid = {row: grid.jqGrid('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var AddNewRow = function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = parseInt(id) + 1;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
// }
};
var lastsel3;
var lastsel;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: <?xml version="1.0" encoding="UTF-8"?><rows><page>aa</page><total>aa</total><records>aa</records><row id='1'><cell>1</cell><cell>False</cell><cell>Development</cell><cell>1-1-0001 0:00:00</cell><cell>1-1-0001 0:00:00</cell><cell>Management</cell><cell>False</cell></row></rows>,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
// onSelectRow:function(id){
// lastsel=id;
// //JQuery("#classTable").showCol("class_id");
//
// var data = jQuery("#test").getRowData(id).Consultant;
// alert(data);
// //jQuery("#classTable").jqGrid('setGridParam',data);
// },
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
height: "100%",
ondblClickRow: function(id, iRow, iCol, e) {
alert(id);
//getGridParam("records")
//alert(selr);
},
//function(id, iRow, iCol, e) {alert(iRow);},
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false}).navButtonAdd('#pagediv', { caption:"Add", buttonicon :'ui-icon-circle-plus', title: "Add New Row",
onClickButton: function() {debugger;
// var last = jQuery('#test').jqGrid('getGridParam','records');
var GridIds = grid.getDataIDs();
var last= GridIds[GridIds.length -1 ];
AddNewRow (last);
}
});
//grid[0].onafterupdate;
grid[1].onafterupdate(function (){debugger;alert("Hellooooo")});
$("#export").click(function(){
MyExportToXml (grid);
});
});
</script>
</head>
<body>
<form id="form1" action="">
<div align="center">
<div id="pagediv">
</div>
<table id="test">
<tr>
<td />
</tr>
</table>
<input type="button" id="export" value="Export" />
</div>
</form>
</body>
</html>
</body>
</html>

Because you use cell editing the usage of afterSaveCell seems me OK for your purpose.

Categories

Resources