dynamic fields using jquery in jtable - java
here the fields are hard coded but i want to get the fields dynamically for my task,like i will have a list in this jsp which contains field names eg: list=[id,name,salary,doj] this list may change for new requests. Can i have some ideas to do this
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
Watch: {
title: 'Watch',
width: '20%',
display: function (data) {
return '';
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});
You can build Javascript code dynamically on server side.
For client side, you can also create fields dynamically.
var fields = {
PersonId: { //I assume that this field is standard
key: true,
list: false
}
};
if(someCondition) {
fields['Name'] = {
title: 'Author Name',
width: '40%'
};
}
//Add other dynamic fields
$('#PersonTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: '/GettingStarted/PersonList',
createAction: '/GettingStarted/CreatePerson',
updateAction: '/GettingStarted/UpdatePerson',
deleteAction: '/GettingStarted/DeletePerson'
},
fields: fields
});
In your condition, you can add fields from a list surely.
I was posting whole code by taking reference of above answer
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Setup and Load Data to jTable using Servlets and JSP</title>
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
<% List<String> strList = new ArrayList<String>();
strList.add("one");
strList.add("two");
strList.add("three"); %>
var jsArray = [<% for (int i = 0; i < strList.size(); i++) { %>"<%= strList.get(i) %>"<%= i + 1 < strList.size() ? ",":"" %><% } %>];
var fields = {
};
var arrayLength = jsArray.length;
for(var i=0;i<arrayLength;i++)
{
fields[jsArray[i]] = {
title: jsArray[i],
width: '40%'
};
}
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields:fields
});
$('#PersonTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
<div id="PersonTableContainer"></div>
</div>
</body>
</html>
Related
This jsp is not showing any output more over not even showing the google maps..Help needed?
I am building a web page which will show the users lat/langs sent from the android app. I have managed to receive those lat/lngs and also inserted them in the DB as well using DAO and servlet classes. Now having little knowledge of the java script in a jsp. How can i pass those paramters into this jsp so that it can show them on the map?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
</script>
<style>
<% int i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
#map-canvas_<%=i%> {
height: 150px;
width: 250px;
margin: 0px;
padding: 0px
}
<% i= i+1;%>
</c:forEach>
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script>
function initialize() {
<% i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
var geocoder<%=i%>;
var mapsss<%=i%>;
var infowindow<%=i%> = new google.maps.InfoWindow();
var marker<%=i%>;
geocoder<%=i%> = new google.maps.Geocoder();
var latlng<%=i%> = new google.maps.LatLng(${usinf.pickuplat},${usinf.pickuplng});
geocoder<%=i%>.geocode({'latLng': latlng<%=i%>}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
mapsss<%=i%>.setZoom(11);
marker<%=i%> = new google.maps.Marker({
position: latlng<%=i%>,
map: mapsss<%=i%>
});
infowindow<%=i%>.setContent(results[1].formatted_address);
infowindow<%=i%>.open(mapsss<%=i%>, marker_<%=i%>);
}else {
alert('No results found');
}
}else {
alert('Geocoder failed due to: ' + status);
}
});
var mapOptions<%=i%> = {
zoom: 8,
center: latlng<%=i%>,
mapTypeId: 'roadmap'
}
mapsss<%=i%> = new google.maps.Map(document.getElementById('map-canvas_<%=i%>'), mapOptions<%=i%>);
<% i= i+1;%>
</c:forEach>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Insert title here</title>
</head>
<body>
<body onload="initialize()">
<div id="map-canvas_" style="width:100%; height:100%"></div>
</body>
</body>
</html>
My servlet do post method.
protected void Process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Authenticate authplots = new Authenticate();
List<UserInfo> getTheLatlangs = authplots.GetAllLangs();
request.setAttribute("LatLang", getTheLatlangs);
RequestDispatcher view = request.getRequestDispatcher("Testmaps.html");
view.forward(request, response);
}
Using JSTL, I did it this way. Maybe it will help.
<script type="text/javascript">
var markers = [
<c:forEach var="row" items="${result.rows}">
['<c:out value="${row.aciklama}" />',
<c:out value="${row.KONUME}" />,
<c:out value="${row.KONUMB}" />,
<c:out value="${row.EVID}" />,
'<c:out value="${row.aptadi}" />',
'<c:out value="${row.mahalle}" />',
'<c:out value="${row.sokak}" />',
'<c:out value="${row.durumu}" />',
'<c:out value="${row.metrekare}" />',
'<c:out value="${row.fiyat}" />',
'<c:out value="${row.odasayisi}" />'],
</c:forEach> ];
</script>
You can look in github.
JSP Google MAPS
How to create editable combobox with database?
I am new to java and want to create an editable combobox in which when user types in it the results come from database. Like if I type "e" in combobox then all the name starting with "e" should come from database. Please give a simple example.
You can use jQuery plugins, following example is for php just replace the php parts with java code, or have a look at this.
With JSON
$(document).ready(function() {
$(function() {
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "SearchController",
type : "GET",
data : {
term : request.term
},
dataType : "json",
success : function(data) {
response(data);
}
});
}
});
});
});
With DB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.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>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Unable to build the HTML Structure into JSP using scriptlets
I have the following HTML accordian structure
<!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>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<h3>Javascript</h3>
<div>
<h4>Testt</h4>
</div>
<h3>Other</h3>
<div>
<h4>Stuff</h4>
</div>
</div>
</div>
</body>
</html>
I am trying to build this in a jsp file as shown
<!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>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
<%
}
%>
</div>
</div>
</body>
</html>
Could anybody please tell me where its failing ??
Import for ArrayList?
<%#page import="java.util.ArrayList"%>
EDIT: Upon testing you will also need to remove the last set of:
<%
}
%>
So it will look like this:
<%#page import="java.util.ArrayList"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!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>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
</div>
</div>
You should start your page with jsp header : <%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> ....
can't play flv when redirect from struts using jaris flv player
I'm using Jaris flv player to play flv videos.
It can open the page and display normally when I directly open the page(http://mysite.com:8080/TSE/flv/player.jsp).
But if I redirect and open the page from struts action's return, it can not work(http://mysite.com:8080/TSE/multidocdetailDoc.action?selectId=C94DC060947048B188BB2FAF1804B0F3).
The page displays the alternative content (the case of no adobe flash).
What should I do?
the action did nothing except redirect:
public String multidocdetail(){
try {
String selectId = getRequest().getParameter("selectId");
System.out.println(selectId);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return "multidocDetail";
}
struts:
<action name="*Doc" class="casco.com.tse.action.learn.DocAction" method="{1}">
<result name="docDetail">/jsp/learn/docDetail.jsp</result>
<result name="multidocDetail">/flv/player.jsp</result>
</action>
the jsp is just like the example of jaris website:
<%# page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jaris FLV Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvarsVideo = {
source: "http://localhost:8080/TSE/flv/mv/CTCS-3.flv",
type: "video",
streamtype: "file",
server: "",//Used for rtmp streams
duration: "52",
poster: "http://localhost:8080/TSE/flv/poster.png",
autostart: "false",
logo: "http://localhost:8080/TSE/flv/logo.jpg",
logoposition: "top left",
logoalpha: "30",
logowidth: "130",
logolink: "http://jaris.sourceforge.net",
hardwarescaling: "false",
darkcolor: "000000",
brightcolor: "4c4c4c",
controlcolor: "FFFFFF",
hovercolor: "67A8C1"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#000000",
quality: "high",
wmode: "opaque"
};
var attributes = {
id:"JarisFLVPlayer"
};
//swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "750px", "520px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
</script>
<style>
html, body { height:100%; }
body { margin:0; }
</style>
</head>
<body>
<br />
<center>
<h3>CTCS三级列控体系介绍</h3>
<div id="altContentOne">
<h1>Jaris FLV Player</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</center>
</body>
</html>
datepicker not working for jqgrid
I am not able to add DatePicker to the jqGrid,
Following is my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
</head>
<script>
var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{ dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
{id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
<table id="rowed6"></table>
</body>
</html>
when above code executes, it shows the output, but it does not show the datepicker in the sdate column. Please let me khow if I am wrong somewhere in the code!
I think i have done a silly mistake, but not able to find it!
Update
Following is working example of datepicker using jqGrid,
Following is working Example of datepicker using jqGrid..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<script>
var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{ dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
{id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
<table id="rowed6"></table>
</body>
</html>
I would recommend you full rewrite your code. The most important problems:
you need use <!DOCTYPE html ...>. It's very important because HTML without <!DOCTYPE> statement switch on quirks mode which is not supported by jQuery UI and jqGrid.
you should use data: mydata3 instead of filling grid with addRowData in the loop
you need call datepicker once (currently you call datepicker in both dataInit and oneditfunc parameter of editRow - pickdates)
you need include every CSS and JavaScript file once. For example "js/jquery-ui-1.9.2.custom.css" should be enough. It should contain all CSS of jQuery UI (inclusive ui.datepicker.css). So you should remove lines with "css/ui.datepicker.css", "css/jquery-ui.css", css/jquery.ui.theme.css and "css/jquery.ui.datepicker.css"
you should use jQuery.ready instead of usage onload.
you should define all variables inside of some function (like inside of $(function () {/*here*/})). In the way you will have no global variables.
you should be careful with encoding of special characters (like <) in case of usage inline code in HTML page. Try to validate the page on http://validator.w3.org/ for example and you will find the errors which I mean.
I would strictly recommend you to use gridview: true to improve performance and use autoencode: true to be sure that jqGrid could display any text in the grid.
UPDATED: The demo shows an example how the code could be modified. Below if the full HTML code. I used non-minimized version of all JavaScript files for better debugging. The productive code should use minimized version of the corresponding files:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/q/14318014/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
$(function () {
"use strict";
var mydata = [
{id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FE", sdate: "2007-12-03"},
{id: "23456", name: "Laptop", note: "Long text", stock: "Yes", ship: "IN", sdate: "2007-12-03"},
{id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TN", sdate: "2007-12-03"},
{id: "45678", name: "Speakers", note: "note", stock: "No", ship: "AR", sdate: "2007-12-03"},
{id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FE", sdate: "2007-12-03"},
{id: "67890", name: "Play Station", note: "note3", stock: "No", ship: "FE", sdate: "2007-12-03"},
{id: "76543", name: "MobileTelephone", note: "note", stock: "Yes", ship: "AR", sdate: "2007-12-03"},
{id: "87654", name: "Server", note: "note2", stock: "Yes", ship: "TN", sdate: "2007-12-03"},
{id: "98765", name: "Matrix Printer", note: "note3", stock: "No", ship: "FE", sdate: "2007-12-03"}
],
$grid = $("#rowed6"),
initDate = function (elem) {
$(elem).datepicker({
dateFormat: "yy-mm-dd",
//autoSize: true,
defaultDate: new Date(2007, 11, 3),
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true,
onSelect: function () {
var $grid, grid;
if (typeof (elem.id) === "string" && elem.id.substr(0, 3) === "gs_") {
$grid = $(elem).closest("div.ui-jqgrid-hdiv")
.next("div.ui-jqgrid-bdiv")
.find("table.ui-jqgrid-btable:first");
if ($grid.length > 0) {
grid = $grid[0];
if ($.isFunction(grid.triggerToolbar)) {
grid.triggerToolbar();
}
}
} else {
// to refresh the filter
$(elem).trigger("change");
}
}
});
},
dateTemplate = {align: "center", sorttype: "date", width: 94,
editrules: { date: true }, editoptions: { dataInit: initDate },
searchoptions: {
sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
attr: { maxlength: 10, size: 11 }, // for searching toolbar
maxlength: 10, size: 11, // for searching dialog
dataInit: initDate
},
formatter: "date", formatoptions: { srcformat: "ISO8601Short", newformat: "Y-m-d" }},
lastsel3;
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Last Sales", "Name", "Stock", "Ship via", "Notes"],
colModel: [
{ name: "sdate", template: dateTemplate },
{ name: "name", width: 115, editoptions: {maxlength: "30"} },
{ name: "stock", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX", defaultValue: "AR" },
stype: "select", searchoptions: { sopt: ["eq", "ne"],
value: ":Any;FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" }
],
cmTemplate: {editable: true},
rowNum: 10,
rowList: [5, 10, 100],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: false,
viewrecords: true,
sortname: "sdate",
sortorder: "desc",
height: "100%",
onSelectRow: function (id) {
if (id && id !== lastsel3) {
$(this).jqGrid("restoreRow", lastsel3);
$(this).jqGrid("editRow", id, true);
lastsel3 = id;
}
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
$.extend($.jgrid.search, {
recreateFilter: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
searchOnEnter: true
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
$grid.jqGrid("filterToolbar", {defaultSearch: "cn", stringResult: true});
});
//]]>
</script>
</head>
<body>
<table id="rowed6"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
I don't see any jquery-ui.js script included in your code. For example: <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> if you don't include that script you don't have jQuery-UI loaded and you can't use the datepicker widget.
Maybe try this:
function pickdates(id){
jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
Or by autotriggering click() handler adding click() at end:
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"}).click();