I am using ChartJS to create a chart on a page in angular. I am running into the issue of when I navigate to a new page, and back to the original page, the JS is not called again.
Is there a way to call a javascript function or file every time an angular page navigates? I guess I'd then just see if my selector exists on the page and then call the function.
$(document).ready(function () {
//Call on every page:
(function ($) {
$(window).load(function () {
$(".bubbleScrollbar").mCustomScrollbar({
theme: "rounded-dots"
});
$(".hBubbleScrollbar").mCustomScrollbar({
//theme: "minimal-dark",
theme: "rounded-dots-dark",
axis: "x",
advanced: {autoExpandHorizontalScroll: true},
mouseWheelPixels: 150
});
});
})(jQuery);
// on all chart pages:
var ctx = $('#chart-TicketsResolved').get(0).getContext("2d");
var data = [
{
value: 300,
color: "#50AD7E",
label: "Resolved"
},
{
value: 200,
color: "#d9d9d9",
label: "Open"
}
];
var myDoughnutChart = new Chart(ctx).Gauge(data);
});
You can call your function by listenning to window.hashchanged event.
window.onhashchange = function () {
console.log('my function runs every time the # hash changes');
}
See more here: How to detect URL change in JavaScript
Related
We use AngularJS to override the Browser Context Menu (https://github.com/Templarian/ui.bootstrap.contextMenu).
Here is the some example code
$scope.menuOptions = [
{
text: \'Cut\',
click: function () {
alert(\'Cut\');
}
},
{
text: \'Copy\',
click: function () {
alert(\'Copy\');
}
},
{
text: \'Pase\',
click: function () {
alert(\'Paste\');
}
}
' . $showDebugMenu . '
];
The showDebugMenu var gets a further function to show the source code of the website if the setting in the database is set to on.
My question: Is there a function to show the source code or to call the browser to show source code function?
I'm struggling to get a Dijit dialog to work for a reproducible example. I took the working code from this JSfiddle and simply tried to turn this into a named function to use throughout the example.
The author uses:
new Button({label: 'Show dialog', onClick: function() {
//Create dialog programmatically here
}
});
but I've changed this to be slightly different:
function launchSelectDialog(selectOptions) {
//Create dialog programmatically here
}
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));
Here is my version. Unfortunately, this just launches the dialog immediately upon loading the page, and never again when clicking on the button.
I have checked the NoWrap option in JSFiddle. I have no other clues about what's going on.
Please help if you have any ideas.
There are couple of issue.
1) Like others a have pointed out, you are invoking the function not setting up the event with function. hence the dialog is visible onload.
2) You need to wait till the html has been parse. or you need to use parser.parse()
Here is the updated fiddler: http://jsfiddle.net/49y3rxzg/9/
() is an invocation operator. You are calling the function yourself and the returned value of the function is set as the event handler. If you want to reuse the function, use a closure:
function launchSelectDialog(selectOptions) {
// the returned function will be used as the event handler
return function() {
// the passed `selectOptions` is remembered in this context
}
}
Another option is:
registry.byId("default-launch", "onClick", function() {
launchSelectDialog(allOpts);
});
You need to initiate your Button widget before retrieving with registry.byId().
In your code actually registry.byId("default-launch") was returning undefined;
Also registry.byId() function accept only an id so additional parameters will be ignored.
To fix it you should initiate a Button instance properly and declare launchSelectDialog(allOpts) withinonClick, as:
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
Below fixed version for your script.
http://jsfiddle.net/usm829jq/
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/registry",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {
var allOpts = [{
label: "Foo",
value: "foo"
}, {
label: "Bar",
value: "bar"
}]
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
function launchSelectDialog(SelectOptions) {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({
label: "OK"
})).placeAt(actionPane.containerNode);
(new Button({
label: "Cancel"
})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})
I'm having a table whose contents(name and status) i'm trying to refresh every 1 min in such a way that the status should change from 'schedule' to 'active' to 'running' w/o having user manually refresh it.
here is the js:
$cls.superclass.constructor.call(this, Ext.apply({
useTemplate: true,
directFn: Service('getRecordService').getRecord,
fields: [
{
name : 'name',
column: {
header: "Name",
renderer: function (record) {
return name(record.data.name);
},
}
},
{
name : 'status',
column: {
header: "status",
renderer: function (record) {
return status(record.data.status);
},
}
},
],
viewConfig: {
getRecord: function (){
///get single record info
}
};
});
I'm not sure how can i write a function in the above snippet that will allow me to auto refresh the table contents every 1 min. Any ideas would be appreciated!
Thanks!
You should take a look at Ext.util.TaskRunner and the singleton Ext.TaskMgr.
It provides methods to start/stop task functions which are executed in a configurable interval.
With that you could try something like below.
var grid = ; // your grid instance
var store = grid.getStore(); // store of your grid, you want to reload
var refreshTask = { // task which reloads the store each minute
run: function() {
store.reload();
},
interval: 60 * 1000 // 1 Minute
};
Ext.util.TaskRunner.start(refreshTask);
Here is what I've got:
<body>
<div id="TableContainer"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#TableContainer').jtable({
title: 'title',
actions: {
listAction: 'JSONServlet',
},
ajaxSettings: {
type: 'POST',
dataType: 'json'
},
fields: {
Id: {
key: true,
list: false
},
Tag: {
title: 'Tag',
width: '40%'
},
V: {
title: 'V',
width: '10%'
},
S: {
title: 'S',
width: '10%'
},
Timestamp: {
title: 'Timestamp',
width: '30%',
create: false,
edit: false
}
}
});
$('#DeviceTableContainer').jtable('load');
/////// window.setTimeout("$('#DeviceTableContainer').jtable('reload')", 100);
});
</script>
</body>
I am using a jTable and everything works fine besides my setTimeout method. In firebug it looks like it is able to make a request twice. Once being the normal request and another from my method I assume but after the second time there are no more requests.
I'm new to web development so if you could give me a quick explanation as to what I'm doing wrong that would help also.
if you are wanting it to refresh every x seconds then you need setInterval or another call to setTimeout in the the function that gets called by setTimeout
var timerID = setInterval("$('#DeviceTableContainer').jtable('reload')", 100);
OR
var timerID = null;
function doReload() {
$('#DeviceTableContainer').jtable('reload');
timerID = setTimeout(doReload,100);
}
doReload();
use timerID to save a reference to the timer and cancel the timer if needed, clearTimeout(timerID), clearInterval(timerID)
Although you have it being called every 0.1 seconds, as the number is for milliseconds, so that is quite quick for doing ajax calls.
setTimeout only fires once.
setInterval fires repeatedly until you call clearInterval
Try this (after 100ms):
window.setTimeout(function(){$('#DeviceTableContainer').jtable('reload');}, 100);
Or this (every 100ms):
window.setInterval(function(){$('#DeviceTableContainer').jtable('reload');}, 100);
I've got a function changeGraph() inside the jQuery-wrapper which I need to call somehow from outside it. I need to access the function setData from the jQuery based graph-library Flot.
The source is looking like this:
function changeGraph(){
// I need to access $.plot.setData somehow
};
var d2 = [[0, 0], [20, 300000]];
$(function () {
$.plot($("#placeholder"),
[{color: "#000000", data: d2}],
{
series: {
lines: { show: true, fill:true, fillColor: {colors: [ "#d1ddea","#8e959d"]}},
points: { show: false }
}
}
);
});
How can I accomplish this?
var changeGraph;
$(function () {
changeGraph = function () {
// Need to access $.plot($("#placeholder") here
};
});
changeGraph(); // call this when document is ready at least
You should move your function outside of the callback function.
function changeGraph() {
// ...
}
$(function() {
changeGraph();
});