I have written a simple script in jsPsych that welcomes the user to the page, then thanks them for their participation after they press any key. However, it does not load the CSS styling associated with the page. The style sheet is at the appropriate location, and there are no errors or warnings generated.
The entirety of the code is below:
<!DOCTYPE html>
><html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jsPsych/jspsych.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-survey-text.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css"/>
</head>
<body>
</body>
<script>
var timeline = []
var welcome = {type: "html-keyboard-response",
stimulus: "Welcome to the experiment, and thank you for your time! Press any key to continue."
};
timeline.push(welcome)
jsPsych.init({
timeline: timeline,
on_finish: function() {
$.ajax({
type: "POST",
url: "/experiment-data",
data: jsPsych.data.get().json(),
contentType: "application/json"
})
.done(function() {
alert("Thank you!")
window.location.href = "/";
})
.fail(function() {
alert("A problem occurred while writing to the database. Please contact the researcher for more information.")
window.location.href = "/";
})
}
})
</script>
</html>
Related
Day before yesterday I came to know about swagger.Its fantastic.But may be because of my lack of knowledge there is something I am unable to do. I tried hard to solve it and finally I putting it as a question here.
my pom.xml
<dependency>
<groupId>com.mangofactory</groupId>
<artifactId>swagger-springmvc</artifactId>
<version>0.5.2</version>
</dependency>
I have added this dependency.
my servlet-context.xml is as below.I did bind the swagger configuration bean and make this config configurations enabled.
<!-- Configuration Bean -->
<bean id="documentationConfig" class="com.mangofactory.swagger.configuration.DocumentationConfig"/>
<context:annotation-config />
<mvc:default-servlet-handler/>
Create the swagger.properties with the following entries.
documentation.services.version=1.0
documentation.services.basePath=http://localhost:8080/swagger
and include the same in myapplication context the way any other property files are included.
<context:property-placeholder location="classpath:/swagger.properties" />
my controller to document the api and its methods
#Controller
#Api(value="onlinestore", description="Operations pertaining to Online Store")
#RequestMapping(value="/onlinestore")
public class OnlineStoreController {
#Autowired
private IStoreFront storeFrontService;
#ApiOperation(value = "View the Specific info of the product")
#RequestMapping(value="/authorize/viewProduct/{productid}", method=RequestMethod.GET)
public ResponseEntity<Object> viewProduct(#ApiParam(name="productId", value="The Id of the product to be viewed", required=true)
Now by clicking the following link I am able to see the documenation
http://localhost:8080/swagger/api-docs
the result is as below
<ApiDocumentation>
<apiVersion>1.0</apiVersion>
<apis>
<description>Operations pertaining to Online Store</description>
<path>/api-docs/onlinestore</path>
</apis>
<basePath>http://localhost:8080/swagger</basePath>
<swaggerVersion>1.0</swaggerVersion>
</ApiDocumentation>
it returns xml format. Then I integrated the swagger UI using the following link https://github.com/swagger-api/swagger-ui.
The index.html page is as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href='css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='css/print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-2.0.0.js' type='text/javascript'></script>
<script src='lib/js-yaml.min.js' type='text/javascript'></script>
<script src='lib/lodash.min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
<script src='lib/highlight.9.1.0.pack_extended.js' type='text/javascript'></script>
<script src='lib/jsoneditor.min.js' type='text/javascript'></script>
<script src='lib/marked.js' type='text/javascript'></script>
<script src='lib/swagger-oauth.js' type='text/javascript'></script>
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<script type="text/javascript">
$(function () {
var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://localhost:8080/swagger/api-docs";
}
hljs.configure({
highlightSizeThreshold: 5000
});
// Pre load translate...
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
window.swaggerUi = new SwaggerUi({
url: url,
dom_id: "swagger-ui-container",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onComplete: function(swaggerApi, swaggerUi){
if(typeof initOAuth == "function") {
initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: ",",
additionalQueryStringParams: {}
});
}
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
jsonEditor: false,
defaultModelRendering: 'schema',
showRequestHeaders: false
});
window.swaggerUi.load();
function log() {
if ('console' in window) {
console.log.apply(console, arguments);
}
}
});
</script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
<form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div id='auth_container'></div>
<div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
Now the when I click this link http://localhost:8080/swagger/dist/index.html
I am getting as above. Clearly it tells me that it is expecting json but getting xml as input as http://localhost:8080/swagger/api-docs is returning xml. It is axpecting something like this :
{
"ApiDocumentation": {
"apiVersion": "1.0",
"apis": {
"description": "Operations pertaining to Online Store",
"path": "/api-docs/onlinestore"
},
"basePath": "http://localhost:8080/onlineStore",
"swaggerVersion": "1.0"
}
}
I am unable to understand where did I went wrong.
You need to first make sure that your server is configured to produce JSON:
curl -H Accept:application/json http://localhost:8080/swagger/api-docs
And if you don't get JSON back, you have a server configuration issue. If this shows JSON, it's possible that your server is expecting a different Accept header, like application/json;charset=UTF8, in which case you can tell swagger-ui to send that instead of just application/json:
window.swaggerUi = new SwaggerUi({
url: url,
swaggerRequestHeaders: 'application/json;charset=UTF8',
// ...
I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.
Here's the html...
<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>
The js file:
(function () {
'use strict';
angular.module('app')
.controller('welcome3',
[welcome3]);
function welcome3() {
var vm = this;
vm.activate = activate;
activate();
function activate() {
vm.phoneOptions = {
dataSource: {
data: [
{name: "iPhone"},
{name: "Droid"},
{name: "Windows"}
]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select a phone..."
};
}
}
})();
Inside the index.js file I have (among other things) the following:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
// ...
<div ng-view></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>
The drop down looks like this:
As opposed to this:
Thanks!!
Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.
http://trykendoui.telerik.com/#burkeholland/UXav
With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?
I get a lot of problems with the "define" in the famo.us code...
What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like
<head>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({'localhost:3000': 'public/'});
require(['main']);
</script>
</head>
<body>
</body>
Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with
Uncaught ReferenceError: define is not defined
from main.js
and main.js looks like
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform : function(){
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
});
mainContext.add(centerSpinModifier).add(logo);
});
from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.
Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)
Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js...
html:
<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>
js:
require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example
//var Engine = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'Hello World',
classes: ['red-bg'],
properties: {
lineHeight: '200px',
textAlign: 'center'
}
});
mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example
});
Have you tried to import mjn:famous package into your meteor project?
meteor add mjn:famous
great question; famo.us is moving away from Yeoman / Grunt
to clean up rich's answer, here's a simple index.html
<html>
<script src='http://code.famo.us/lib/require.js'></script>
<script src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<script>
require([
'famous/core/Engine',
'famous/core/Surface',
'famous/core/Modifier'
], function(Engine, Surface, Modifier){
var context = Engine.createContext();
var helloSurf = new Surface({
content: 'hello world',
properties: {
backgroundColor:'red'
}
});
var helloMod = new Modifier({
size: [100, 100],
origin: [.5, 0]
});
context.add(helloMod).add(helloSurf);
});
</script>
<html>
I using file *.ashx to get data from database. When I alert jsondata.responseText , it show json string
Respond text is:
{
"total":2,
"page":5,
"record":10,
"row":[
{"i":0, "cell""["1","Desktop","Desktop Description","200"]},
{"i":1, "cell""["2","Laptop","Laptop Description","1000"]},
{"i":2, "cell""["2","DVD","DVD Description","100"]},
{"i":3, "cell":["","","",""]}
]
}
But jqgrid not show data.
Please review my code and help me please !
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample_Json_Jqgrid._Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<%--<link rel="stylesheet" type="text/css" href="Resources/themes/coffee/grid.css" title="steel" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="Resources/themes/jqModal.css" />--%>
<link href="Resources/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/themes/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />
<script src="Resources/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Resources/src/grid.base.js" type="text/javascript"></script>
<script src="Resources/src/ui.multiselect.js" type="text/javascript"></script>
<script src="Resources/src/grid.celledit.js" type="text/javascript"></script>
<script src="Resources/src/grid.common.js" type="text/javascript"></script>
<script src="Resources/src/grid.custom.js" type="text/javascript"></script>
<script src="Resources/src/grid.formedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.grouping.js" type="text/javascript"></script>
<script src="Resources/src/grid.import.js" type="text/javascript"></script>
<script src="Resources/src/grid.inlinedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.jqueryui.js" type="text/javascript"></script>
<script src="Resources/src/grid.loader.js" type="text/javascript"></script>
<script src="Resources/src/grid.postext.js" type="text/javascript"></script>
<script src="Resources/src/grid.setcolumns.js" type="text/javascript"></script>
<script src="Resources/src/grid.subgrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.tbltogrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.treegrid.js" type="text/javascript"></script>
<script src="Resources/src/jqDnR.js" type="text/javascript"></script>
<script src="Resources/src/jqModal.js" type="text/javascript"></script>
<script src="Resources/src/jquery.fmatter.js" type="text/javascript"></script>
<script src="Resources/src/jquery.searchFilter.js" type="text/javascript"></script>
<script src="Resources/src/JsonXml.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grid" cellpadding="0" cellspacing="0">
</table>
<div id="pager" style="text-align: center;">
</div>
</div>
<script src="Resources/js/app.grid.js" type="text/javascript"></script>
</form>
</body>
</html>
File javascript to jqgrid : app.grid.js
var mydata ;
function CreateGrid()
{
jQuery("#grid").jqGrid({
datatype: "local",
colNames:['ProductId','ProductName','Description','Price'],
colModel:[
{name:'ProductId',index:'ProductId',sorttype:"text",hidden:false},
{name:'ProductName',index:'ProductName',sorttype:"text",resizable:false,
width:100,sortable:true,align:'left',editable:true},
{name:'Description',index:'Description',sorttype:"text",resizable:false,
width:1000,sortable:true,align:'left',editable:true},
{name:'Price',index:'designation',sorttype:"int",resizable:false,
width:100,sortable:true,align:'left',editable:true}
],
rowNum: 1,
rowList: [5, 10, 15],
pager: jQuery('#pager'),
imgpath: 'themes/redmond/images',
sortname: 'ProductId',
viewrecords: true,
sortorder: "desc",
caption: 'Products'
}).jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
BinDataGrid();
}
function BinDataGrid()
{
$("#grid").clearGridData();
jQuery(function($) {
$.ajax({
type: "'POST'",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "GetDataHandler.ashx",
data: "{}",
complete: function(jsondata, stat)
{
window.alert("Status received is " + stat);
window.alert("Response text is: " + jsondata.responseText);
if (stat == "success")
{
var thegrid = jQuery("#grid")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
}
}
});
})
}
jQuery(document).ready(function() {
CreateGrid();
});
Please help me
Best regard
Your responce text is wrong:
"cell""["1","Desktop","Desktop Description","200"]
this should be (note the : instead of " after the "cell" declaration):
"cell":["1","Desktop","Desktop Description","200"]
.. as the blank row you enter last, it is correct:
"cell":["","","",""]
also avoid using " in values, you should replace them with somethign other because some browsera cannot handle " escaping ... IE 6 ... :))
Sorry but your code have so many errors, that it is difficult to describe all together. The first error in the JSON data with the quote (") instead of :. The data after the modification will be
{
"total": 2,
"page": 5,
"record": 10,
"row": [
{"i": 0,"cell": ["1","Desktop","Desktop Description","200"]},
{"i": 1,"cell": ["2","Laptop","Laptop Description","1000"]},
{"i": 2,"cell": ["2","DVD","DVD Description","100"]},
{"i": 3,"cell": ["","","",""]}
]
}
where you have data like "i": 2 instead of "id": 2.
In the list of JavaScript files included in the <head> element you have full chaos. You included jqGrid more as once JavaScript files in compressed and uncompressed form. Moreover you used wrong order of files: you must include jquery-1.4.2.min.js before jquery-ui-1.8.5.custom.min.js which use it and include grid.locale-en.j before jquery.jqGrid.min.js. The file grid.loader.js by the way include all developer version of the files one more time. Moreover you should include in the head the meta element like <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (see example).
You should read the How to Install part of the documentation, decide which version of jqGrid (compressed or developer version) you want to use and include it.
UPDATED: I could continue with the list of errors. The main JavaScript file app.grid.js is written also very dirty. It contain clear errors like type: "'POST'" instead of type: 'POST' or type: "POST", use eval function instead of JSON.parse and so on.
The usage of ashx to provide the data I find also not the best idea. Much better can be used ASMX web service, svc WCF service or ASP.NET MVC application with controller returns JSON data. Look at my old answer where you will find some links to examples to working code.
The usage of both jQuery(function($) {/**/} and jQuery(document).ready(function() {/**/}); in the same code is also not good.
I recommend you to verify the JSON data in http://www.jsonlint.com/ and verify your JavaScript code in http://www.jslint.com/.