I'm learning jsreport and this the code I'm trying to run
<h1>Hellow world</h1>
<table>
{{for students}}
<tr>
<td>{{:name}}</td>
<td>{{:age}}</td>
</tr>
<tr>
<td>Sum</td>
<td>{{{:~sum(students)}}}</td>
</tr>
{{/for}}
</table>
with the helper function
{
function sum(students){
var sum = 0;
students.forEach(function(s){
sum += s.age;
})
return sum;
}
}
the engine is jsrender and the recipe is chrome-pdf. I am getting the following error,
Report "Jacob" render failed.
Error when evaluating engine jsrender for template anonymous
(because) view.ctxPrm(...) is not a function
TypeError: view.ctxPrm(...) is not a function
at Object.eval [as fn] (eval at buildCode (/app/node_modules/jsrender/jsrender-node.js:2560:10), <anonymous>:7:24)
Related
I'm trying to import the table-dragger to my front-end, but I get the error-message, that tableDragger is not a function. I tried to go with the tutorial and initialized the table-dragger like this
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
<script type="text/javascript">
var el = document.getElementById("table");
var dragger = tableDragger(el, {
dragHandler: ".handle"
});
</script>
With this, the error-message occurs. Anyone had the same problem or has an idea on how to fix this?
After going through table-dragger plugins I found that tableDragger is an object instead of a function. You cannot directly get its instance, instead there is a property "default" which actually create instances.
If you are using node then may be "table-dragger.min.js" path is incorrect. The path should be "node_modules/table-dragger/dist/table-dragger.js"
Kindly find below code for reference.
var el = document.getElementById('table');
var dragger = tableDragger.default(el, {
dragHandler: ".handle"
})
dragger.on('drop',function(from, to){
console.log(from);
console.log(to);
});
<script src="https://cdn.jsdelivr.net/npm/table-dragger#1.0.3/dist/table-dragger.js"></script>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>header1<i class="handle"></i></th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
<tr>
<td>conten3</td>
<td>conten4</td>
</tr>
</tbody>
</table>
</body>
Good Day :)
I am generating html table from Javascript and assign as InnerHTML to a div tag, but its giving an error:
"Uncaught TypeError: Cannot set property 'innerHTML' of null"
<html>
<body>
<div class="fieldlist-vertical-title" style="color:white;left:0px;display:none;" id="rosterlegend">Some text</div>
<script>
function generateLegend()
{
var fullTable ='' fullTable='<Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD>
<TD>01:00 to 21:30</TD></TR></Table></TR></Table>'
document.getElementById('rosterlegend').innerHTML = fullTable
}
generateLegend();
</script>
</body>
</html>
Error : Uncaught TypeError: Cannot set property 'innerHTML' of null
Try changing to something like this, so we ensure the HTML DOM has completed loading first.
Use ES6 template string instead of plain strings!
document.addEventListener('DOMContentLoaded', () => {
generateLegend();
});
function generateLegend() {
fullTable = `<Table>
<TR>
<Table>
<TR bgcolor=#FF5733>
<TD>MM</TD>
<TD>01:00 to 21:30</TD>
</TR>
<TR bgcolor=#FFFFFF>
<TD>EVVV</TD>
<TD>09:00 to 05:30</TD>
</TR>
</Table>
</TR>
</Table>`;
document.getElementById('rosterlegend').innerHTML = fullTable;
}
<div id="rosterlegend">
<div>
Removes new lines and extra spaces in the HTML String.
Rest of your code works fine!
However it is not a god practice.
Ideally you have to wait for the window to be loaded.
window.onload(){
generateLegend();
}
function generateLegend() {
var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";
document.getElementById('rosterlegend').innerHTML = fullTable;
}
generateLegend();
<div id="rosterlegend">Some text</div>
Your issue is that you are trying to access your div with the id of "rosterlegend" before the DOM has loaded. This means that when your javascript tries to access your element it cannot. One way you can fix this is by adding the load or DOMContentLoaded event listener to your element, where the function will fire once your HTML (including images if you use the load event) and window has loaded. This way your javascript will know about your HTML.
See working example below:
function generateLegend() {
var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";
document.getElementById('rosterlegend').innerHTML = fullTable;
}
window.addEventListener("load", generateLegend); // call your function when the window has loaded
<div id="rosterlegend"></div>
This question already has an answer here:
Angular: I keep getting this error on injector modulerr
(1 answer)
Closed 5 years ago.
I'm trying to load data from a SQL database using MVC5 and AngularJS. The back-end code works fine and I can get the data but it's not being populated into my table.
My Index.cshtml looks like this:
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div ng-app="myapp">
<div ng-controller="StudentCtrl">
<table class="table table-striped table-bordered table-hover table-checkable datatable">
<thead class="grid-top-panel">
<tr>
<th>StudentID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dataModel in students">
<td>{{dataModel.StudentID}}</td>
<td>{{dataModel.FirstName}}</td>
<td>{{dataModel.LastName}}</td>
<td>{{dataModel.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/ScriptsNg/Module/app.js"></script>
<script src="~/ScriptsNg/Controller/StudentController.js"></script>
<script src="~/ScriptsNg/Services/StudentService.js"></script>
app.js:
var app;
(function () {
'use strict';
app = angular.module('myapp', ["ngRoute"]);
})();
StudentService.js:
app.service('StudentService', function ($http) {
//**********----Get All Record----***************
var urlGet = '';
this.getAll = function (apiRoute) {
urlGet = apiRoute;
return $http.get(urlGet);
}
});
StudentController.js:
app.controller('StudentCtrl', ['$scope', 'StudentService',
// we inject StudentService inject because we call getAll method for get all student
function ($scope, StudentService) {
// this is base url
var baseUrl = '/api/student/';
// get all student from databse
$scope.getStudents = function () {
var apiRoute = baseUrl + 'GetStudents/';
var _student = StudentService.getAll(apiRoute);
_student.then(function (response) {
$scope.students = response.data;
},
function (error) {
console.log("Error: " + error);
});
}
$scope.getStudents();
}]);
Some posts suggested I add the angular-route script on my index page and inject the ngRouter library into my module. I did and I'm still getting the same error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector/modulerr?
What could I be doing wrong?
The Module, controller and services scripts were being loaded from the wrong folder so they weren't coming through. I changed them to be referenced from the correct scripts folder
I have created a website template in ODOO V8:
<template id="assets_frontend" inherit_id="website.assets_frontend" name="MyTemplate">
<xpath expr="." position="inside">
<script type="text/javascript" src="/my_module/static/src/js/main.js"></script>
</xpath>
</template>
<template id="my_template">
<script type="text/javascript" src="/my_module/static/src/js/main.js"/>
<div>
<table>
<tr>
<td>Email: <input type="text" id="email"/></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Submit" onclick="submitEmail();"/>
</td>
</tr>
</table>
</div>
</template>
And the contents in main.js file are:
$(document).ready(function () {
"use strict";
function submitEmail() {
var self = this;
var website = openerp.website;
var Users = new openerp.website.Model('res.users');
// ...
}
})();
But on clicking the submit button in the template it shows the following error in the browser console.
Uncaught ReferenceError: openerp is not defined
I need to access the ODOO models and methods in it from the main.js file. How can I solve the above error or is there any way I can access the models and methods defined in ODOO classes from a javascript file?
This error is not in the base modules(like website_sale) in ODOO and the error is only in new modules I have created.
inside $(document).ready you can't access openerp .
In the js file create a method same name as your module(not model) and pass two parameter instance and module
Now in the method you can access the module using instance of openerp like:
function my_module(instance, module){
module = instance.point_of_sale;
var QWeb = instance.web.qweb;
_t = instance.web._t;
var OrderSuper = module.ProductListWidget;
}
You need read this document https://www.odoo.com/documentation/8.0/reference/javascript.html and take attention on "Subclassing Widget". This is an example of a module in Odoo. You have to program something like that example.
When trying to add a set of filters to my Serenity app (https://github.com/jfox015/Serenity), I get an "Uncaught Object" error when trying to inject a filter into my app. When I remove the filters code from the app, it works fine. Can't figure out what's wrong with the filters so that they're not be recognized as valid resources. I had them as part of the global module and then a separate module and it still fails.
Here's the relevant code:
Filter code stored in app/src/admin/AdminFilters.js:
'use strict';
angular.module('AdminFilters', ['USER_ROLES'])
.filter('userRoleFilter', ['USER_ROLES',
function(USER_ROLES) {
return function(input) {
return USER_ROLES[input];
};
}
])
.filter('dateJoinedFilter',
function() {
return function(input) {
var date = new Date(input);
return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
};
}
)
;
Angular App Declaration in app/src/app.js:
var angApp = angular.module("serenityApp", ['ngRoute', 'ngResource', 'angular-md5', 'AdminFilters'])
Usage in my Admin code (Abridged) in app/src/admin/adminUsersList.html:
<tbody>
<tr data-ng-if="users" data-ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.role | userRoleFilter }}</td>
<td>{{ user.dateJoined | dateJoinedFilter }}</td>
<td>{{ user.group }}</td>
</tr>
<tr data-ng-if="!users">
<td colspan="4">No users were found.</td>
</tr>
</tbody>
The relevant JS files are all included in the index.html file as well:
<script src="app/src/admin/AdminFilters.js" type="text/javascript"></script>
<script src="app/src/admin/AdminServices.js" type="text/javascript"></script>
<script src="app/src/admin/AdminController.js" type="text/javascript"></script>
Is the USER_ROLES in the AdminFilters, a module or constant?
If it is a constant belonging to another module then I believe it cannot be injected in AdminFilters module.