I'm trying to return a JSON list in my controller. Not sure where I am going wrong. Any help would be greatly appreciated. I am trying to implement a grid a found online.
Here is my controller:
//[HttpPost]
public JsonResult JqueryTest()
{
var estimateDetails = db.EstimateDetail
.Include(x => x.EstimationItem)
.Include(x => x.EstimateHeader);
return Json(estimateDetails, JsonRequestBehavior.AllowGet);
}
Here is my view:
#model IEnumerable < EstimationTools.Models.Entities.EstimateDetail >
ViewBag.Title = "JqueryTest";
}
<h2>JqueryTest</h2>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data - JSON</title>
</head>
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'EstimationTool/plugins/jqGrid',
datatype: "json",
colModel: [
{ label: 'Estimate', name: 'Estimate', width: 75 },
{ label: 'Contingency', name: 'Contingency', width: 90 },
{ label: 'Comment', name: 'Comment', width: 100 },
{ label: 'Subactivity', name: 'EstimationItem.Subactivity', width: 100 },
{ label: 'EstimationArea', name: 'EstimationItem.Area.EstimationArea', width: 100 },
{ label: 'Description', name: 'EstimationItem.GeneralActivity.Description', width: 100 }
// sorttype is used only if the data is loaded locally or loadonce is set to true
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 30,
loadonce: true, // this is just for the demo
pager: "#jqGridPager"
});
});
</script>
</body>
</html>
First thing first... as stephen.vakil states, there is an error in your url, as you are pointing to an action so called "jqGrid":
url: 'EstimationTool/plugins/jqGrid'
The usual syntax is: '{Controller}/{Action}/'
Which in your case, the action name is "JqueryTest" as stated above. So, I don't know the name of your Controller, but I hope you've got the idea. Something like this:
url: 'YourController/JqueryTest'
On the other hand, within your Action, you should return a list instead... so, just add .ToList() at the end of the query or append it to your parameter:
return Json(estimateDetails.**ToList()**, JsonRequestBehavior.AllowGet);
Regards,
Related
I can't seem to get morris.js graph working in rails, using coffeescript. It does not even appear to be rendering on the page. I have managed to get the tutorial graph rendering, which makes me believe it is an issue with my controller (and that my gem files etc are loaded correctly), but I'm totally lost. My console output is below:
Coffeescript
jQuery ->
$.get '/scores/index.json', (data) ->
Morris.Line
element: $('#myfirstchart')
data: data
xkey: 'created_at'
ykeys: ['scores']
labels: ['Score']
index.html.erb
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="border:2px solid red; height: 200px; width: 100%"></div>
scores_controller.rb
def index
respond_to do |format|
format.html {
# Display current users scores in the order of created at descending from most recent. Taking the last 5 scores
#scores = Score.all
}
format.json {
scores = Score.all
render :json => scores
}
end
end
Any help would be hugely appreciated.
According to the docs, the <script> tag should be inside the <head> section. In your application.html.erb:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<!-- other Rails imports -->
</head>
<body>
<%= yield %>
</body>
</html>
See jQuery Get Started for an example.
I had this issue. The fix was to put the records I wanted into a helper and then call that in the JS to render in the view. Get your helper to show the data in the way Morris requires then you’ll be good.
Inside of a helper:
def chart_data
(1.month.ago.to_date..Date.today).map do |date|
{
period: date,
score: Score.where("date(created_at) = ?", date).count,
}
end
end
In your view:
<%= content_tag :div, "", style: "height: 205px", id: "scores-morris", data: {scores: chart_data} %>
And finally add your js/coffee script. This is coffee:
$ ->
Morris.Line
element: 'scores-morris'
data: $('#scores-morris').data('scores')
xkey: 'period'
ykeys: [ 'score' ]
labels: [ 'SCORE!!!' ]
hideHover: [ 'auto' ]
I'm using angular-winjs to display a list. The HTML as well as the controller code is below. When I click the item, the selection is not set. As a result, the watch never gets called.
How can I get the selected item in the selection variable? My code looks similar to this issue, but have the problem still. I'm using the latest WinJS.
<div ng-app="myApp">
<div ng-controller="HomeTilesController">
<div>Selected count: {{selection.length}}, indexes: {{selection}}</div>
<win-list-view item-data-source="homeTiles" selection-mode="'single'" selection="selection">
<win-item-template>
<div class="tile">
<h5 class="win-h5">{{item.data.title}}</</h5>
</div>
</win-item-template>
<win-grid-layout></win-grid-layout>
</win-list-view>
</div>
</div>
HomeTilesController:
angular.module('myApp', ['winjs'])
.controller("HomeTilesController", ['$scope', function ($scope) {
$scope.homeTiles = [
{ title: 'Agents' },
{ title: 'Center' },
{ title: '' },
{ title: '' },
{ title: '' },
{ title: '' }];
$scope.selection = [1];
$scope.$watch('selection', function handleSelectionChange(newValue, oldValue) {
console.log('item selected');
})
}]);
The tiles are displayed correctly as below. You may notice that the Center tile (tile with the blue border) that has been selected as a result of setting the selection. But any other selection still shows the same value - selecting any other item wont set the selection.
The libraries are below:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="~/lib/hammer.js/hammer.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script>
<script src="~/app/my-app.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="~/js/site.js" asp-append-version="true"></script>
You have to use selection-mode="'single'" tap-behavior="'directSelect'"
var myApp = angular.module("myApp", ['winjs']);
myApp.controller("myCtrl", ['$scope', myCtrl]);
function myCtrl($scope) {
$scope.selection = [];
$scope.homeTiles = [{
title: 'A1'
}, {
title: 'A2'
}, {
title: 'A3'
}, {
title: 'A4'
}, {
title: 'A5'
}, {
title: 'A6'
}];
}
HTML
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view item-data-source="homeTiles" selection="selection" selection-mode="'single'" tap-behavior="'directSelect'" class="listview win-selectionstylefilled">
<win-item-template>This list view item's rating is: {{item.data.rating}}</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
</div>
Working code JSFiddle
WinJS ListView Interaction Examples ( Choose from dropdown )
I am trying to use the JSONForm libary from Github to generate a html markup from a json schema. I am trying to do this in an MVC view that does not have a default form tag. I added one with html.beginform but still the markup is not generated and i get the following javascript error in console :TypeError: _ is null . Could someone help me out ?
Below is the code in the view :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm())
{
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/json-form.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/underscore.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
$('form').jsonForm({
schema: {
name: {
type: 'string',
title: 'Name',
required: true
},
age: {
type: 'number',
title: 'Age'
}
},
onSubmit: function (errors, values) {
if (errors) {
}
else {
}
}
})
$(document).ready(function () {
alert('udayan');
});
</script>
<h2>Index</h2>
}
json-form.js depends upon underscore (_). You therefore need to move:
<script type="text/javascript" src="~/Scripts/underscore.js"></script>
... so that it is above:
<script type="text/javascript" src="~/Scripts/json-form.js"></script>
I created a funnel chart in java script . And converted into angular And now I'm trying to use the http.get method in angular to fetch the json data. And I'm stuck here and got confused in this part
And now let me show u my code part
---index.html---
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>FusionCharts - Funnel 3D Chart</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="practice.js"></script>
</head>
<body ng-app="myApp">
<!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year
Attribute :
# showPercentValues - set to 1 to show the values in percentage.
-->
<div id="chart-container" ng-controller="ParentCtrl" ng-init='load()' ng-model="dataSource1">FusionCharts will render here</div>
</body>
</html>
---script.js---
// Code goes here
//creating an application module
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http)
{
$scope.load = function(){
//alert("2");
FusionCharts.ready(function () {
//alert("1");
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource : "dataSource1"
});
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
$scope.dataSource1 = data1;// binding the data to the $scope variable
});
conversionChart.render();
});
};
});
----chart.json----
{
"chart": {
"caption": "Ensource sales report",
"subcaption": "Purchase - Conversion analysis for last year",
"decimals": "1",
"isHollow": "0",
"isSliced": "1",
"labelDistance": "15",
"plotTooltext": "Success : $percentOfPrevValue",
"theme": "fint",
"baseFontSize":"18"
},
"data":
[
{
"label": "Total",
"value": "385634"
},
{
"label": "Contacts",
"value": "175631"
},
{
"label": "Leads",
"value": "84564"
},
{
"label": "Sanctioned",
"value": "35654"
},
{
"label": "Disbursed",
"value": "12342"
}
]
}
Plunker:http:http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview
Here i need to fetch the json data for dataSource :but not able to do that
All the script and css for the funnel chart is been included in index.html. My oly work is to fetch the json data using the http.get method.Plz help me with this
And thanks in advance ...
It seems you were just passing the incorrect param to the dataSource field. After some playing around with your plunker, instead of passing it a function where the $http call was executed, I passed it the data itself, as you can see below.
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http) {
$http.get('./chart.json') //reading the studentRecord.json file
.success(function(data1) {
$scope.dataSource = data1; // binding the data to the $scope variable
FusionCharts.ready(function() {
//alert("1");
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource: $scope.dataSource
});
conversionChart.render();
});
});
});
Notice I wrapped the code inside $http's success callback, so that we know that the data is present at the moment of rendering.
You can see the working plunker here.
I have this problem
I'm using DataGrid + dojo.store.JsonRest as store. I want to load only those items that are currenlty neccesary. So when I have 10000 items only ~ 100 is loaded initialy and the rest is downloaded as the user scrolls the grid.
I created two files
datagridtest.php contains datagrid
jsonsource.php implements test datasource (that should return no more that 499 records)
First 25 items is displayed fine. But when I try to scroll down datagrid dosn't request new items - checked it with FireBug.
Please help. What Am i doing wrong.
Below is my code:
datagridtest.php:
<html><head>
<link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/style.css" />
<script type="text/javascript"> djConfig = {parseOnLoad: true,} </script>
<script type="text/javascript" src="../libs/dojo/dojo/dojo.js"></script>
</head>
<body class="claro">
<style type="text/css">
#import "../libs/dojo/dojox/grid/resources/Grid.csss";
#import "../libs/dojo/dojo/resources/dojo.csss";
#import "../libs/dojo/dojox/grid/resources/claroGrid.css";
</style>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojo.store.JsonRest");
var store, grid;
dojo.ready(function() {
store = new dojo.store.JsonRest({
target:"jsonsource.php",
idProperty: "id"
});
grid = new dojox.grid.DataGrid({
store: dataStore = dojo.data.ObjectStore({ objectStore: store }),
structure: [
{
cells: [
[
{ name: "Id", field: "id"},
{ name: "Name", field: "name" },
{ name: "E-Mail", field: "email", width: "200px"},
]
]
}
]
}, "gridDiv");
grid.startup();
} );
</script>
<div id="gridDiv"></div>
</body></html>
jsonsource.php:
<?php
$RangeTemp = explode("=", $_SERVER['HTTP_RANGE']);
$Range = explode("-", $RangeTemp[1]);
if ($RangeTemp[1] != "") {
$RangeFrom = $Range[0];
$RangeTo = $Range[1];
}
if ($RangeFrom > 500) { print "[ ]"; die(); }
?>
[
<?php for($i=$RangeFrom; $i<=$RangeTo; $i++): ?>
{
"id": <?=$i; ?>,
"name": "Jack <?=$i; ?>",
"email": "jack#jacekplacek.pl"
},
<?php endfor; ?>
]
I believe you need to set the "Content-Range" header to let Dojo know what records you've returned, and how many there are total.
Set the header like this:
header("Content-Range: items 0-24/10000");
In your case, you would write this:
header("Content-Range: items $RangeFrom-$RangeTo/$total");
Hope that helps.
It seems that the problem is with ObjectStore + JsonRest solution. If I use
dojox.data.JsonRestStore directly it works fine.