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/.
Related
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>
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
What's wrong with this code, the basic example if not working. all of the files are in one folder so the path is not the problem, but still this code is not working, how this will work with Web ApI ..?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<script src="typeahead.bundle.min.js"></script>
<link href="examples.css" rel="stylesheet" />
<script type="text/javascript">
$('input#search-box').typeahead({
name: 'name',
local: ['yasser', 'shyam', 'sujesh', 'siddhesh', 'vaibhav']
});
</script>
</head>
<body>
<input type="textbox" placeholder="Search Song" id="search-box" class="typeahead" />
</body>
</html>
Looks like for the very basic example you need to bind a method to the source
http://jsfiddle.net/f9DFC/
$('input#search-box').typeahead(
{
minLength: 1,
},
{
name: 'name',
displayKey: 'value',
//This needs to me a function, not an array.
source: substringMatcher( ['yasser', 'shyam', 'sujesh', 'siddhesh', 'vaibhav'])
});
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