lazy_high_charts and foundation conflict loading javascript - javascript

I'm using lazy_high_charts and foundation 4.
In my view I have <%= high_chart("my_id", #chart) %>, which generates the following:
<section>
<script type="text/javascript">
(function() {
var onload = window.onload; # I think
window.onload = function(){ # the issue
if (typeof onload == "function") onload(); # is here
var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": { } },"xAxis": { },"yAxis": { "title": { "text": null },"labels": { } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": { },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };
window.chart_my_id = new Highcharts.Chart(options);
};
})()
</script>
<div id="my_id"></div>
</section>
However, it is not displaying because of the following lines generated by foundation 4 in my application.js
$(document).foundation();
$(function(){ $(document).foundation(); });
If I delete those lines the chart loads.
How can I use foundation and lazy_high_charts together?

instead of
(function() {
var onload = window.onload; # I think
window.onload = function(){ # the issue
write
$(function(){
The resulting script tag will look:
<section>
<script type="text/javascript">
$(function() {
var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": { } },"xAxis": { },"yAxis": { "title": { "text": null },"labels": { } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": { },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };
window.chart_my_id = new Highcharts.Chart(options);
});
</script>
<div id="my_id"></div>
</section>
Make sure you have put jquery script before it.

I solved the problem updating the zurb-foundation and lazy_high_charts gems:
In my Gemfile:
gem 'zurb-foundation', '~> 4.0.0'
gem 'lazy_high_charts'
Then:
bundle install
bundle update lazy_high_charts
rails g foundation:install
I have also included the following lines in the application.html.erb:
...
<%= javascript_include_tag "vendor/custom.modernizr" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
After that, the <%= high_chart("my_id", #chart) %> code is generating the following javascript:
<script type="text/javascript">
(function() {
var f = function(){
document.removeEventListener('page:load', f, true);
...
I hope it helps people facing the same problem.

Related

Code Prints To DOM When Dynamically Inserting Inline Scripts With Javascript

I'm trying to insert a chart dynamically with javascript. I found an example of how to do such a thing and it almost works. The chart loads but then underneath the chart, part of the Javascript used to display the chart actually shows as text on the page. It otherwise works fine.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="tvTest"></div>
<script>
/* helpers
*/
// runs an array of async functions in sequential order
function seq (arr, callback, index) {
// first call, without an index
if (typeof index === 'undefined') {
index = 0
}
arr[index](function () {
index++
if (index === arr.length) {
callback()
} else {
seq(arr, callback, index)
}
})
}
// trigger DOMContentLoaded
function scriptsDone () {
var DOMContentLoadedEvent = document.createEvent('Event')
DOMContentLoadedEvent.initEvent('DOMContentLoaded', true, true)
document.dispatchEvent(DOMContentLoadedEvent)
}
/* script runner
*/
function insertScript ($script, callback) {
var s = document.createElement('script')
s.type = 'text/javascript'
if ($script.src) {
s.onload = callback
s.onerror = callback
s.src = $script.src
} else {
s.textContent = $script.innerText
}
// re-insert the script tag so it executes.
document.head.appendChild(s)
// clean-up
$script.parentNode.removeChild($script)
// run the callback immediately for inline scripts
if (!$script.src) {
callback()
}
}
// https://html.spec.whatwg.org/multipage/scripting.html
var runScriptTypes = [
'application/javascript',
'application/ecmascript',
'application/x-ecmascript',
'application/x-javascript',
'text/ecmascript',
'text/javascript',
'text/javascript1.0',
'text/javascript1.1',
'text/javascript1.2',
'text/javascript1.3',
'text/javascript1.4',
'text/javascript1.5',
'text/jscript',
'text/livescript',
'text/x-ecmascript',
'text/x-javascript'
]
function runScripts ($container) {
// get scripts tags from a node
var $scripts = $container.querySelectorAll('script')
var runList = []
var typeAttr
[].forEach.call($scripts, function ($script) {
typeAttr = $script.getAttribute('type')
// only run script tags without the type attribute
// or with a javascript mime attribute value
if (!typeAttr || runScriptTypes.indexOf(typeAttr) !== -1) {
runList.push(function (callback) {
insertScript($script, callback)
})
}
})
// insert the script tags sequentially
// to preserve execution order
seq(runList, scriptsDone)
}
$(document).ready(function()
{
var htmlContent = `<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 500,
"height": 400,
"symbol": "BINANCE:AMBETH",
"interval": "60",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true
});
</script>`;
var $container = document.querySelector('#tvTest');
$container.innerHTML = htmlContent;
runScripts($container);
});
</script>
</body>
</html>
If I run that, the chart displays and just underneath it, I see the code var $container = document.querySelector('#tvTest'); $container.innerHTML = htmlContent; runScripts($container); }); as text in the DOM. How can I get it to render the chart without printing any code to the DOM?
By default this trading view library appends to the body. You can override that by passing "container_id" property. Here is a simplified example of your code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
<div id="tvTest"></div>
<script type="text/javascript">
new TradingView.widget({
"container_id": "tvTest", // THIS IS THE LINE I ADDED
"width": 500,
"height": 400,
"symbol": "BINANCE:AMBETH",
"interval": "60",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true
});
</script>
</body>
</html>
You need to escape the <\/script> inside of the string template

JSDOM not loading script files in Node

I am trying to do a test of loading up an html page in jsdom which will eventually generate graphs. I cannot overcome the first hurdle of just loading the html page and having the javascript execute.
Below is my html page which I am trying to load which doesnt take any parameters and just renders a simple graph.
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"/>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"/>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"/>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"/>
<script>
var testVar = true;
function test(){
testVar = false;
};
</script>
<script>
$(document).ready(function(){
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'container',
width: '400',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "2014",
"numberPrefix": "$",
"theme": "fint",
"captionFontSize": "13",
"subcaptionFontSize": "12",
"subcaptionFontBold": "0",
"showValues": "0"
},
"data": [{
"label": "Food",
"value": "28504"
}, {
"label": "Apparels",
"value": "14633"
}, {
"label": "Electronics",
"value": "10507"
}, {
"label": "Household",
"value": "4910"
}]
}
}).render();
});
var svg = $('#container').html();
});
</script>
<head>
<body>
<div id="container">Charts will render here</div>
</body>
Here is the code in node where I am trying to load this page..
var config = {
file: path.join(__dirname, "chart.html"),
features:{
FetchExternalResources: ["script"],
ProcessExternalResources: ["script"],
MutationEvents: '2.0'
},
scripts:[
"http://code.jquery.com/jquery.min.js",
"http://static.fusioncharts.com/code/latest/fusioncharts.js",
'http://static.fusioncharts.com/code/latest/fusioncharts.charts.js',
"http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"
],
onload: function(err, window) {
console.log('*******onload')
},
created: function(err, window) {
console.log('*******created')
},
done: function(err, window) {
console.log('*******done')
if(err){
console.log('*****got err ' + err.message);
callback(err);
}
global.window = window;
console.log('inside done ----------')
var $ = window.jQuery || window.$,
FusionCharts = window.FusionCharts,
document = window.document;
if(typeof FusionCharts == 'undefined')
console.log('FusionCharts NOT LOADED')
else
console.log('FusionCharts LOADED')
if(typeof $ == 'undefined')
console.log('JQUERY NOT LOADED')
else
console.log('JQUERY LOADED')
console.log('testVar ' + window.testVar)
console.log(window.test())
console.log('testVar ' + window.testVar)
console.log('svg is ' + window.svg);
console.log($('#container').html());
window.close();
}
}
jsdom.env(config);
The strange thing here is that if i do not include scripts in the config object, it will not load them and make them available in the done callback even thought it is there on the html page.
Also, testVar is never defined in the callback even thought it is present in the page, the same with window.test(), even though its in the html page it just does not seem to be available in the callback.
I have tried all different variations of creating the jsdom object, but none of them allows the page to load the scripts rather than me passing it into the config object, and none of the different versions allow me to access variables and functions defined in the script tags.
Is there something I am missing ?
Change your script elements so that they are correct HTML:
<script src="http://code.jquery.com/jquery.min.js"></script>
If you do that everything will load fine and you won't have to use scripts in your configuration.

dgrid in a custom widget

I have a custom widget to which I pass data from backend. Grid shown on the correct place but not showing data on it. I tried with hardcoded data but only the headers are shown. Grid has height and width set.
Here is the code snippet. I would appreciate any help. thanks.
define(["dojo/_base/declare", "dijit/_WidgetBase",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/_OnDijitClickMixin",
GridWidget.js
define(["dojo/_base/declare", "dijit/_WidgetBase",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/_OnDijitClickMixin", "dojo/text!./templates/GridWidget.html",
"dgrid/Grid","dgrid/Keyboard", "dgrid/Selection", "dgrid/extensions/DijitRegistry", "dstore/Memory", "dstore/Trackable"], function(declare, _WidgetBase,
_TemplatedMixin, _WidgetsInTemplateMixin,
_OnDijitClickMixin, template, Grid, Keyboard, Selection, DigitRegistry, Memory, Trackable) {
return decalare("GridWidget", [_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
baseClass: 'GridWidget',
templateString: template,
data: null,
store: null,
grid: null,
columns: null,
constructor: function(data) {
this.data = data;
},
_setData: function(input) {
if (input) {
this._set("data", input);
}
},
getData: function() {
return this.data;
},
postCreate : function() {
this.inherited(arguments);
var StandardGrid = declare([Grid, Selection, Keyboard, DijitRegistry]);
this.store = new (declare([Trackable, Memory]))({
data : this.data,
idProperty : "isbn"
});
this.columns = {
bookTitle : "Title",
first : "First Name",
last : "Last Name",
releaseDate : "Release Date"
};
this.grid = new StandardGrid({
collection : this.store,
columns : this.columns,
cellNavigation : false,
noDataMessage : "No results.",
loadingMessage : "Loading Data...",
}, this.gridNode);
}
startup: function() {
if (this._started) return;
this.inherited(arguments);
if (this.grid) {
this.grid.startup();
}
}
});
});
GridWidget.html
<div class="${baseClass}">
<div class="${baseClass}Grid"data-dojo-attach-point="gridNode"></div>
</div>
testGridWidget.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test: Dgrid 0.4</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" media="screen">
<script>
//var startTime = new Date();
var CONTEXT_ROOT = 'DtossApp';
var djConfig = (function(){
var base = location.href.split("/");
base.pop();
base = base.join("/");
return {
parseOnLoad: true,
isDebug: true,
packages: [{
name: CONTEXT_ROOT,
location: base + "/widget"
}]
};
})();
</script>
</head>
<body class="claro">
<script>
function showGrid() {
require([
CONTEXT_ROOT + '/GridWidget',
'dojo/dom-construct',
'dojo/dom',
'dijit/layout/ContentPane',
], function (GridWidget, domConstruct, dom, ContentPane) {
var testWidget = new GridWidget({ data: createData()});
var cp = new ContentPane({
title : "Book List",
content : testWidget});
var ref = dom.byId('grid');
domConstruct.place(cp.domNode, ref);
testWidget.startup();
//Copied from dgrid laboratory sample..
function createData () {
var data = [];
var column;
var i;
for (i = 0; i < 50; i++) {
data.push({});
for (column in { first: 1, last: 1, bookTitle: 1, releaseDate: 1 }) {
data[i].isbn = i;
data[i][column] = column + '_' + (i + 1);
}
}
return data;
}
});
}
</script>
<h1>Test: Dgrid 0.4</h1>
<div id="buttonContainer">
<button class="action" onClick="showGrid1()">Show Grid</button>
</div>
<div id="grid"></div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo/dojo.js"></script>
</body>
</html>
GridWidget.css
.GridWidgetGrid {
height: 300px;
width: 80%;
}
Dgrid tutorial shows the following note:
When using the basic Grid module, the grid will be empty until you call renderArray. The more advanced store-based implementations like OnDemandGrid will populate themselves from the store automatically.
I changed my Grid to OnDemandGrid which picks data from store automatically.
Also calling renderArray in startup method populates data for Grid.

How to tell what has been destroyed by the destroy command in a kendo UI grid?

I'm using Kendo UI 2013.2.716 and JQuery 2.0.3 and I am placing a grid on my page, and my question is:
Does anyone know how to tell what has been destroyed by the destroy command from the grid?
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
alert("OK, so something got destroyed, but what??");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I found the requestEnd callback in the documentation but I am totally flummoxed as to know where the item that was destroyed would be. I just need the ID of the item really so that I can update other parts of my page appropriately.
I am wondering if I need to capture it somehow beforehand.
You need to configure the transport object on your datasource. In your current configuration, does anything really get destroyed? Sure, the item may disappear from your grid, but I wonder if it's still there in the datasource. Maybe that's what you intended.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.destroy
If you're just looking for a way to get at the data that's being destroyed, hook into the parameterMap() function of the transport object. In there you can manipulate the object being deleted before the operation is executed.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
Thanks to #Brett for pointing out the destroy property on the transport. This code does the trick - allowing me to capture what was being destroyed (see the transport.destroy part):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
transport: {
read: function (options) {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
options.success(products);
},
destroy: function (options) {
var data = $("#grid")
.data("kendoGrid").dataSource.data();
var products = [];
for(var i = 0; i < data.length; i++) {
if (data[i].ProductId !== options.data.ProductId) {
products.push(data[i])
}
}
options.success(products);
alert("Woo hoo - the product with the ID: "
+ options.data.ProductId + " was destroyed!");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>

Backbone JS multiple level navigation example

I'm trying to construct a solid Backbone JS experiment, where I have a local JSON data file which contains my pages (a project I'm doing has this sort of requirement anyhow). And I've coded this example so I can have endless nested subpages in the pages data. It seems to be working great. But when it comes to the URLs, I'm a little stuck.
How do I approach giving this multiple level navigation example totally dynamic URLs? What I mean is, correctly using the url property of the models and collections to construct the right URLs for all the top level and nested elements. Is it even possible? I just can't think how to do it.
See a live demo of where I am now:
http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/
Just so it's easier, the source code is below...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multiple Level Navigation Experiment</title>
<script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
<script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript">
// wait for the DOM to load
$(document).ready(function() {
App.initialize();
});
</script>
</head>
<body>
<div id="header">
<h1>Multiple Level Navigation Experiment</h1>
<p>Want to get this page structure pulled from JSON locally and have a fully functional multiple level nested navigation with correct anchors.</p>
</div>
<div id="article">
<!-- dynamic content here -->
</div>
</body>
</html>
content.json
{
"pages": [
{
"id": 1,
"title": "Home",
"slug": "home"
},
{
"id": 2,
"title": "Services",
"slug": "services",
"subpages": [
{
"id": 1,
"title": "Details",
"slug": "details",
"subpages": [
{
"id": 1,
"title": "This",
"slug": "this"
},
{
"id": 2,
"title": "That",
"slug": "that"
}
]
},
{
"id": 2,
"title": "Honest Service",
"slug": "honest-service"
},
{
"id": 3,
"title": "What We Do",
"slug": "what-we-do"
}
]
},
{
"id": 3,
"title": "Contact Us",
"slug": "contact-us"
}
]
}
application.js
// global app class
window.App = {
Data: {},
Controller: {},
Model: {},
Collection: {},
View: {},
initialize : function () {
$.ajax({
url: "data/content.json",
dataType: "json",
success: function(json) {
App.Data.Pages = json.pages;
new App.Controller.Main();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
}
// main controller class
// when called it should have 'data' in JSON format passed to it
App.Controller.Main = Backbone.Controller.extend({
initialize: function() {
var pagesCollection = new App.Collection.Pages(App.Data.Pages);
var pagesView = new App.View.Pages({collection: pagesCollection});
$('#article').html(pagesView.render().el);
}
});
// pages model class
App.Model.Page = Backbone.Model.extend({
initialize: function() {
if (!_.isUndefined(this.get("subpages"))) {
this.subpages = new App.Collection.Pages(this.get("subpages"));
} // end if
this.view = new App.View.Page({model: this});
},
});
// page collection class
App.Collection.Pages = Backbone.Collection.extend({
model: App.Model.Page
});
// single page view class
App.View.Page = Backbone.View.extend({
tagName: "li",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
$(this.el).html(_.template("<%=title%>", {title: this.model.get("title")}));
return this;
}
});
// multiple pages view class
App.View.Pages = Backbone.View.extend({
tagName: "ul",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
var that = this;
this.collection.each(function(page) {
$(that.el).append(page.view.render().el);
if (!_.isUndefined(page.subpages)) {
var subpagesView = new App.View.Pages({collection: page.subpages});
$(that.el).append(subpagesView.render().el);
} // end if
});
return that;
}
});
I'm just needing so right direction on how to do the URLs properly. The idea I'm wanting is that I can setup my controller for routes so it can expect any page of any nested level. The models, collections and nested collections should be able to generate their URLs on their own, but the hash URL must reflect the level.
Ideally, this navigation would go to URLs like these:
http://example.com/#pages/services
http://example.com/#pages/services/details
http://example.com/#pages/services/details/this
...the URLs using the "slug" from the content.json data. Does any of this make sense? I'm pretty new to Backbone JS and just want to do things right.
Thanks, James
Here's my favorite solution to this problem: use PathJS !
Why not just parse out the slug?
So you can have a single route in the Backbone.Controller that looks like this:
'pages/:id' : showPage
And then showPage looks like:
showPage(id) : function(id) {
parse out the string 'services/details/etc'
look up the slug data based on that IE pages['services']['details']['etc']
}
or if the pages actually need to be processed differently, you can setup multiple routes, ever more granular like this:
'pages/:id' : showPage
'pages/:id/:nest' : showNestedPage
'pages/:id/:nest/:more' : showNestedMorePage

Categories