I am trying to embed jqxgrid into my HTML page.
This are the libraries that I import:
<script src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-1.10.1-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1379671500000.js"></script>
<script src="/jquery/jquery-ui.min.js"></script>
<script src="/jqwidgets/jqxcore.js"></script>
<script src="/jqwidgets/jqxdata.js"></script>
<script src="/jqwidgets/jqxbuttons.js"></script>
<script src="/jqwidgets/jqxscrollbar.js"></script>
<script src="/jqwidgets/jqxmenu.js"></script>
<script src="/jqwidgets/jqxcheckbox.js"></script>
<script src="/jqwidgets/jqxlistbox.js"></script>
<script src="/jqwidgets/jqxdropdownlist.js"></script>
<script src="/jqwidgets/jqxgrid.js"></script>
<script src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="/jqwidgets/jqxgrid.edit.js"></script>
<script src="/jqwidgets/jqxgrid.filter.js"></script>
<script src="/jqwidgets/jqxgrid.pager.js"></script>
<script src="/jqwidgets/jqxgrid.selection.js"></script>
<script src="/jqwidgets/jqxgrid.sort.js"></script>
I omitted type="text/javascript" for simplicity reasons. As you can see the whole think is a wicket application, so I can't really influence the first three imports.
I implemented the jqxgrid as follows:
<script type="text/javascript">
$(document).ready(function() {
var theme = "smoothness";
var dataAdapter = new $.jqx.dataAdapter(data);
$("#jqxgrid").jqxGrid({
width : "99%",
autoheight: true,
theme : theme,
// many more configuration options
columns: [ /* column declaration */ ]
});
// events
$("#jqxgrid").on('cellendedit', function(event) {
var args = event.args;
$.post("EditResponse", {
id: $('#jqxgrid').jqGrid('getCell',args.rowindex,'Name'),
value: args.value
});
});
});
</script>
Again I omitted (in my opinion) unnecessary details, as the initializaton of jqxgrid works fine, I see the table with every data I want it to show.
But when I edit a cell and end editing, the row
$('#jqxgrid').jqGrid('getCell',args.rowindex,'Name')
yields an error in the console:
TypeError: Object [object Object] has no method 'jqGrid'
I did some research but could not fine a clear explanation. Any experiences what could be wrong? Any import I forgot? Anything in the wrong order?
type Error, change
$('#jqxgrid').jqGrid(...
to
$('#jqxgrid').jqxGrid(...
Related
I am trying to create a custom gadget in WSO2 DAS Dashboard. I already created it. I can drag and drop it in a container in the dashboard designer, and there I can see it moving when I add new data to the table (the gadget is a gauge that shows the latest value introduced in a DAS table).
The problem is, that when i click "view", the gadget disappears from the container. If I reopen the design view of the page, the gadget is not longer there. If I open the Chrome developer console, I have an error saying "draw is not defined". As far as I can understand, you have to define this "draw" function so that the page can render the graphic in runtime.
But, in other already created gadgets, this function uses wso2gadgets.js functions and some kind of wrapper to use VIZGrammar, but you are really limited to only a few type of gadgets(line, bar, pie, number, and perhaps one or two more), and we wanted to use d3 to create better and more complex graphs and gadgets.
Sadly, this thing of "creating a custom gadget" is really poor documented, and even if you follow the WSO2 tutorial here https://docs.wso2.com/display/DAS310/Manually+Creating+a+Custom+Gadget it does not work when you click "view".
I am posting the code for my gadget.xml below.
Thank you all
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Gauge" description="This is a template gadget">
<Require feature="dynamic-height"/>
<Require feature="wso2-gadgets-identity"/>
</ModulePrefs>
<UserPref name="windowSize"
display_name="Window Size"
default_value="10"/>
<Content type="html">
<![CDATA[
<head>
<meta charset="utf-8">
<style>
.label{
font-size:22.5px;
fill:#ffffff;
text-anchor:middle;
alignment-baseline:middle;
}
.face{
stroke:#c8c8c8;
stroke-width:2;
}
.minorTicks{
stroke-width:2;
stroke:white;
}
.majorTicks{
stroke:white;
stroke-width:3;
}
</style>
<svg width="400" height="400"></svg>
<link href="/portal/libs/analytics-wso2-2.0.0/common.css" rel="stylesheet" type="text/css" >
<script src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script>
<script src="js/provider-libs/ws-client.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/d3.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/vega.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/VizGrammar.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/wso2gadgets.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/chart-utils.js"></script>
<script src="/portal/js/carbon-analytics.js"></script>
<script src="js/core/provider-client.js"></script>
<script src="js/core/gadget-util.js"></script>
<script src="js/core/gadget-core.js"></script>
<script>
var username = "********";
var password = "********";
var server_url = "https://localhost:9445/portal/apis/analytics";
var client = new AnalyticsClient().init(username,password,server_url);
var svg=d3.select("svg");
var g=svg.append("g").attr("transform","translate(200,200)");
var domain = [0,100];
var gg = viz.gg()
.domain(domain)
.outerRadius(150)
.innerRadius(30)
.value(0.5*(domain[1]+domain[0]))
.duration(1000);
gg.defs(svg);
g.call(gg);
var queryInfo = {
tableName : "ROBICON_DEBUG_GENERAL_COMPLETO", //table being queried
searchParams : {
query : "*:*", //lucene query to search the records
start : 0, //starting index of the matching record set
count : 100,
sortBy:
[
{
field: "Timestamp",
sortType: "DESC"
}
]
}
};
d3.select(self.frameElement).style("height", "400px");
setInterval(
function(){
client.tableExists("ROBICON_DEBUG_GENERAL_COMPLETO", function(data) {
console.log (data["message"]);
client.search(queryInfo, function(data) {
var datos = JSON.parse(data["message"]);
console.log (datos[0].values.LineSide_Voltage);
var LSV = datos[0].values.LineSide_Voltage;
gg.setNeedle(parseFloat(LSV).toFixed(2));
}, function(error) {
console.log("error occured: " + error);
gg.setNeedle(domain[0]+Math.random()*(domain[1]-domain[0]));
});
}, function(error) {
console.log("error occured: " + error);
});
},30000);
</script>
</head>
<body>
<div id="canvas"></div>
</body>
]]>
</Content>
</Module>
If your requirement is to write a custom gadget,you don't need to include any of the libraries with script tags unless you use them in your gauge gadget. WSO2 DAS is capable of rendering any gadget which is written following the google open social spec
So one thing you can try is try removing unused script tags from below.
<script src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script>
<script src="js/provider-libs/ws-client.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/d3.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/vega.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/VizGrammar.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/wso2gadgets.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/chart-utils.js"></script>
<script src="/portal/js/carbon-analytics.js"></script>
<script src="js/core/provider-client.js"></script>
<script src="js/core/gadget-util.js"></script>
<script src="js/core/gadget-core.js"></script>
The code in the end of this post throws an error (visible in Firebug):
TypeError: ownerContext.overflowContext is null
return ownerContext.overflowXStyle || (ownerContext.overflowXStyle = this.owner....
ext-all-debug.js (row 75928, column 8)
Basically what the code does in words is:
create two Ext.panel.Panel (panel_1, panel_2) and one Ext.tab.Panel (tab_panel)
add panel_1 and panel_2 to tab_panel items
add tab_panel to Ext.Viewport (vp)
create a CodeMirror object (code_mirror_editor) using a callback-function (code_mirror_callback_function) , which replaces the standart-ExtJS-content of panel_1 with the CodeMirror object
I am using ExtJs 5.1 with CodeMirror 5.3:
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- codemirror imports -->
<script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
<link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
<script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var panel_1 = Ext.create('Ext.panel.Panel', {
frame:true,
title: 'panel_1'
});
var panel_2 = Ext.create('Ext.panel.Panel', {
frame:true,
title: 'panel_2',
html: "some-html"
});
var tab_panel = Ext.create('Ext.tab.Panel', {
frame:true,
title: 'tab_panel',
items:[panel_1,panel_2]
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [tab_panel],
renderTo: Ext.getBody()
});
var code_mirror_callback_function = function(codeMirrorEl) {
var panel_1_dom = panel_1.el.dom;
panel_1_dom.replaceChild(codeMirrorEl, panel_1_dom.childNodes[0]);
};
var code_mirror_editor = CodeMirror(code_mirror_callback_function, {
lineWrapping: true,
lineNumbers: true,
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
code_mirror_editor.setSize(500,250);
code_mirror_editor.refresh();
});
</script>
</head>
<body>
</body>
Now here comes the problem:
You can switch for approximately 30 seconds between the tabs and everything works fine (The time-interval may vary). After some time-interval though the aforementioned TypeError occurs, after switching again to panel_1.
What can i do to circumvent this error?
I have already tried the following:
instead of using a callback-function, i call
var code_mirror_editor = CodeMirror(panel_1.body, {
lineWrapping: true,
lineNumbers: true,
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
}); and in panel_1set autoScroll: true
Result: The error is gone, but i have a huge unfilled div which leaves a big blank space inside panel_1. So the result is no solution.
Run my code in Sencha-Fiddle:
Result: The error does also occur on Sencha-Fiddle.
Observation: The Error solely appears in ExtJs 5.1. In ExtJs 5.0 the error does not happen.
I'm using bootstrap-datepaginator that inside uses bootstrap-datepicker.
Utilizzanto bootstrap-datepicker as a single component, there are no problems to set the language, but the same is not true using bootstrap-datepaginator. How can I do?
I'm trying to set the Italian language as a default for the entire project.
In index.html I put the following script:
<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/jquery-ui/ui/i18n/datepicker-it.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "it" ] );
});
</script>
But in the console I get these errors:
Uncaught TypeError: Cannot read property 'regional' of undefined datepicker-it.js:15
Uncaught TypeError: Cannot read property 'regional' of undefined (index):394
I tried everything but I'm going crazy!
Bootstrap Datepicker i18n
I changed the code in this way:
<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/bootstrap-datepicker/js/locales/bootstrap-datepicker.it.js"></script>
<script>
$(function() {
$.datepicker.setDefaults( $.datepicker.regional["it"] );
});
</script>
but now the error is as follows:
Uncaught TypeError: Cannot read property 'setDefaults' of undefined
With this fix:
$('.datepicker').datepicker({
language: "it"
});
I haven't got errors in console but the language is always english by default
You can set default options for Bootstrap Datepicker by assigning them like so:
$.fn.datepicker.defaults.language = 'it';
Example below:
$(document).ready(function(){
$.fn.datepicker.defaults.language = 'it';
});
$(document).ready(function(){
$('.datepicker').datepicker();
});
<link href="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/js/locales/bootstrap-datepicker.it.js"></script>
<input class="datepicker"/>
Use jQuery's extend() utility method to merge your settings into the datepicker defaults object:
$.extend( $.fn.datepicker.defaults, {format: 'dd-mm-yyyy', language: 'nl'} );
<script src="/jquery/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="/jquery/jquery.ui.datepicker-it.js" type="text/javascript"></script>
<script>
$.datepicker.setDefaults( $.datepicker.regional["it"] );
$( "#data" ).datepicker();
</script>
I'm setting up a pretty simple app with backbone, and I'm getting an error.
Uncaught TypeError: undefined is not a function example_app.js:7
ExampleApp.initialize example_app.js:7
(anonymous function)
This is where the error is showing up in Chrome Inspector (init file - example_app.js):
var ExampleApp = {
Models: {},
Collections: {},
Views: {},
Routers: {},
initialize: function() {
var tasks = new ExampleApp.Collections.Tasks(data.tasks);
new ExampleApp.Routers.Tasks({ tasks: tasks });
Backbone.history.start();
}
};
Here's my tasks index.haml file
- content_for :javascript do
- javascript_tag do
ExampleApp.initialize({ tasks: #{raw #tasks.to_json} });
= yield :javascript
models / task.js
var Task = Backbone.Model.extend({});
collections / tasks.js
var Tasks = Backbone.Collection.extend({
model: Task,
url: '/tasks'
});
routers / tasks.js
ExampleApp.Routers.Tasks = Backbone.Router.extend({
routes: {
"": "index"
},
index: function() {
alert('test');
// var view = new ExampleApp.Views.TaskIndex({ collection: ExampleApp.tasks });
// $('body').html(view.render().$el);
}
});
And here's proof that I'm calling all of the files (I think):
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/support.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/composite_view.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/swapping_router.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support.js?body=1" type="text/javascript"></script>
<script src="/assets/example_app.js?body=1" type="text/javascript"></script>
<script src="/assets/easing.js?body=1" type="text/javascript"></script>
<script src="/assets/modernizr.js?body=1" type="text/javascript"></script>
<script src="/assets/models/task.js?body=1" type="text/javascript"></script>
<script src="/assets/collections/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/task_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks_index.js?body=1" type="text/javascript"></script>
<script src="/assets/routers/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/index.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/task.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Any ideas would be great. Thanks!
Uncaught TypeError: undefined is not a function example_app.js:7
This error message tells the whole story. On this line, you are trying to execute a function. However, whatever is being executed is not a function! Instead, it's undefined.
So what's on example_app.js line 7? Looks like this:
var tasks = new ExampleApp.Collections.Tasks(data.tasks);
There is only one function being run on that line. We found the problem! ExampleApp.Collections.Tasks is undefined.
So lets look at where that is declared:
var Tasks = Backbone.Collection.extend({
model: Task,
url: '/tasks'
});
If that's all the code for this collection, then the root cause is right here. You assign the constructor to global variable, called Tasks. But you never add it to the ExampleApp.Collections object, a place you later expect it to be.
Change that to this, and I bet you'd be good.
ExampleApp.Collections.Tasks = Backbone.Collection.extend({
model: Task,
url: '/tasks'
});
See how important the proper names and line numbers are in figuring this out? Never ever regard errors as binary (it works or it doesn't). Instead read the error, in most cases the error message itself gives you the critical clues you need to trace through to find the real issue.
In Javascript, when you execute a function, it's evaluated like:
expression.that('returns').aFunctionObject(); // js
execute -> expression.that('returns').aFunctionObject // what the JS engine does
That expression can be complex. So when you see undefined is not a function it means that expression did not return a function object. So you have to figure out why what you are trying to execute isn't a function.
And in this case, it was because you didn't put something where you thought you did.
I have occurred the same error look following example-
async.waterfall([function(waterCB) {
waterCB(null);
}, function(**inputArray**, waterCB) {
waterCB(null);
}], function(waterErr, waterResult) {
console.log('Done');
});
In the above waterfall function, I am accepting inputArray parameter in waterfall 2nd function. But this inputArray not passed in waterfall 1st function in waterCB.
Cheak your function parameters Below are a correct example.
async.waterfall([function(waterCB) {
waterCB(null, **inputArray**);
}, function(**inputArray**, waterCB) {
waterCB(null);
}], function(waterErr, waterResult) {
console.log('Done');
});
Thanks
[Joke mode on]
You can fix this by adding this:
https://github.com/donavon/undefined-is-a-function
import { undefined } from 'undefined-is-a-function';
// Fixed! undefined is now a function.
[joke mode off]
If in MongoDB with async-await , check if you have a missing await before the mongo call.
const [assistantError, assistant] = await assistantDb.findOneAssistant({
_id: assistantId,
});
Here if the await was missing, later when you use assistant, this issue may occur.
I just switched my App to run on MVC3 and the Razor view engine, and now I'm getting a JavaScript error. The thing is, nothing has changed on the JavaScript side of things... it worked before.
Here's the code
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}]
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
And this is erroring
$('#UserRegion').autocomplete({
The console says
SCRIPT438: Object doesn't support this property or method
And I just can't figure this one out.
You're including jQuery twice.
You're calling .autocomplete immediately after including the base jQuery library - which does not include the autocomplete plugin. Fix the order of your script references and make sure the autocomplete plugin is included before you try to use it.
load this BEFORE you custom script call
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
or at very best custom code should be after all your JavaScript files.
so , your code should look like something like this
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}];
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
Duplicate jQuery declaration, check View Source of page