I know there's quite a lot of info already on stackoverflow regarding ngTable/AngularJS, but I tried everything, and it just doesn't work.
my html is this:
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Sequencing experiments overview</title>
<script src="/LIMS/angular-1.2.14/angular.js"></script>
<script src="/LIMS/js/controllers.js"></script>
<script src="/LIMS/ng-table-master/ng-table.js"></script>
<link rel="stylesheet" href="/LIMS/ng-table-master/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="/LIMS/style.css" />
</head>
<body ng-app="dataOverview" ng-controller="searchCtrl">
<div>
Search: <input ng-model="query">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="exp in $data | filter:query">
<td data-title="'id'">
{{exp.id}}
</td>
<td data-title="'name'" sortable ="'name'">
{{exp.name}}
</td>
<td data-title="'Type'">
{{exp.type}}
</td>
</tr>
</table>
</div>
</body>
</html>
my controller.js file is this:
var dataOverview = angular.module('dataOverview', ['ngTable']);
dataOverview.controller('searchCtrl', function searchCtrl($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
},{
getData: function($defer,params) {
$http.get('/LIMS/index_query.php').
success(function(data, status) {
var orderedData = data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
})
}
})
});
The index_query.php returns a valid JSON object queried from a MySQL DB (will not show this here).
So, this code is almost ok i guess. It displays a table with columns and values from the DB. I can filter using the value in the filter box. However, it only shows 5 rows, and there are no buttons to go to the next 5 rows or increase the number of rows on the page. As described on the ngTable page (http://bazalt-cms.com/ng-table/example/1).
When checking console with firebug, I see an 'Uncaught TypeError: Cannot call method 'push' of undefined ' error. I assume it;s an error populating the array which should build the buttons to go from 1 page with 5 records to another? I wasted 10h on this today, so please enlighten me, I would be very grateful.
Related
After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js.
Thank you in advance for your help.
Here is the html file in which I would like to display the data:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List of school</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test">
<h1>Result</h1>
<tr>
<td/>ID</td>
<td/>Description</td>
</tr>
<tr v-for="item in panier">
<td>{item.id}</td>
<td>{item.description}</td>
</tr>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
<script>
new Vue({
el: '#test',
data: {
panier: [
{ id: "1", description: "University"},
{ id: "2", description: "high school"}
],
}
});
</script>
</body>
</html>
The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this :
{
id:1,
description:"University"
}
{
id:,
description:"University"
}
Here is my getAllType method :
#RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public #ResponseBody Collection<Type> getAllTypes() {
return this.typeService.getAllTypes();
}
Please if possible with an example of how I should proceed.
Fixed: Thanks to #Sajeetharan, it was discovered that amongst other things the function the expression was attempting to display, GenerateRef, was broken and causing the issue.
I understand this is a reasonably common question but so far my following of other posts or tutorials has not been able to fix my issue with getting {{}} to display the result.
I am trying to make a simple web app to take in a new request. This is given a randomly generated ID which is then presented in a table and is what I'm having problems displaying in the table. Despite following tutorials and attempting to debug it I am unable to, probably as I am very new to Angular and HTML. Apologies in advance.
angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="../../app.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>
The script locations should be working locally for me (I have tested this) as I am using Bower and Node to install, maintain and run AngularJS and the project. I have tried setting out the AJS controller several different ways so far according to different tutorials and Stack Overflow posts and this is the current rendition as it was the most up to date I could find.
Also worth noting is there have been some edits to the snippet from the code I'm running and some typos or other errors may be a result of me changing variable names to post here.
Thanks to anyone taking the time to read through.
You need to have it as,
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
you are missing the declaration part. also angular reference should be loaded before loading app.js
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../app.js"></script>
DEMO
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + new Date()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>
I have been looking into designing my UI with bootstrap table. My simple HTML utilizes bootstrap table features to render a response from REST service.Everything looks good as long as my REST service responds with list of objects as a JSON array.
My question: How do I use bootstrap table if the response JSON does contain only a single element.
Sample response JSON that works:
{
"parent":
[{
"id":1,
"name":"some_name",
"city":"some_city"
}]
}
Sample JSON response that I am struggling to display:
{
"parent":
{
"id":1,
"name":"some_name",
"city":"some_city"
}
}
I tried one workaround to fix this by appending array brackets in the JSON response using following:
function responseHandler(res) { //this function is called from table element
return JSON.parse("["+JSON.stringify(res.parent)+"]");
}
However, I don't really like this solution as it looks like making things work without a systematic approach.
Based on my research, I am pretty convinced that bootstrap table requires the JSON data in JSON array format. I have run some tests and it confirms this finding.
I would like to know how do I achieve showing single element JSON response using bootstrap-table features like "data-url" annd "data-response-handler".
My HTML looks like:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<script src="bootstrap-table-master/docs/assets/js/jquery.min.js"></script>
<script src="bootstrap-table-master/docs/assets/bootstrap/bootstrap.min.js">
</script>
<script src="bootstrap-table-master/dist/bootstrap-table.js"></script>
<link rel="stylesheet" href="bootstrap-table-master/docs/assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-table-master/docs/assetsbootstrap/css/bootstrap-min.css">
<link rel="stylesheet" href="bootstrap-table-master/dist/bootstrap-table.css">
<script>
function responseHandler(res) {
return JSON.parse("["+JSON.stringify(res.parent)+"]");
}
</script>
</head>
<body>
<h1>Bootstrap Table</h1>
<table id="table" data-toggle="table" data-url="mydata.json" data-height="699" data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="city">City</th>
</tr>
</thead>
</table>
</body>
</html>
I am trying to get the value of the date which the user selects using datepicker. Once they select the date I want to be able to use the string for later. I have followed the extremely helpful answer found here: Returning a value using Date picker in HTMLService / Google Apps Script
I know I need to get it to the back end but am struggling to do so and I am sure there is a dumb mistake which I am missing because I am still learning. Here is the code, any help is welcoming.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<form id='findDate'>
Date:<input type="button" id = "date" onclick = "submitDates()" />
</form>
<script>
$("#date").datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<script>
function submitDates() {
var dateDes = $("#date").val();
google.script.run.submitDates(dataDes);
}
</script>
The part I am most confused about is setting the value of the button and what to do with the onclick as I am sure I am not getting the value assigned. This is where it is supposed to get sent in the end.
function submitDates(dateDes) {
Logger.log(JSON.stringify(dateDes));
//goal is to set the datedes string to setDescription using the File Class
}
Thanks in advance.
i'm facing to the compilation error "unspecified value parameter content" when i try to send json node to a view. The error occurs on the line 3 of bo.scala.html.
Thanks for helping
in my controller - Application.java
//send jsonNode to view table
public static Result showReportsUniverses() throws SDKException {
ArrayList<BiObjectsInfos> boobjects = BiFunctions.getReportsUniverses(user,
password, cms, apsAuthType);
return ok(bo.render(Json.toJson(boobjects)));
}
My routes
GET /boobjects controllers.Application.showReportsUniverses()
My view - bo.scala.html -
#()
#table(){
// boobjects handles the JsonNode boobjects
<script src="#routes.Assets.at("javascripts/boobjects.js")" type="text/javascript"></script>
<tbody id= "boobjects" \>
<tr>
<th>Reports</th>
<th>Universes</th>
}
My view - table.scala.html -
#(content : Html)
<!DOCTYPE html>
<html>
<head>
<title>Bla</title>
<link rel="stylesheet" href="#routes.Assets.at("css/table.css")" >
<script src="#routes.Assets.at("javascripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
</head>
<body>
<table>
#content
</table>
</body>
</html>
my coffee script boobjects.js
$ ->
$.get "/boobjects", (boobjects) ->
$.each boobjects, (index, boObj) ->
$("#boobjects").append $("<tr>")
$("#boobjects").append $("<td>").text boObj.si_name
$("#boobjects").append $("<td>").text boObj.universe_name
return ok(boobjects.render(toJson(boobjects)));
should read
return ok(boobjects.render(Json.toJson(boobjects)));