I save my ggplotly object using saveWidget() function. If I do it with selfcontained=TRUE option, all HTML dependencies (javascript libraries and CSS styles) are saved inside the HTML file making it very big. If I use selfcontained=FALSE, those dependencies are saved in separate _file folder, and linked from the HTML file:
<script src="testA_files/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="testA_files/plotly-binding-4.9.2.1/plotly.js"></script>
<script src="testA_files/typedarray-0.1/typedarray.min.js"></script>
<script src="testA_files/jquery-3.5.1/jquery.min.js"></script>
<link href="testA_files/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="testA_files/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="testA_files/plotly-htmlwidgets-css-1.52.2/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="testA_files/plotly-main-1.52.2/plotly-latest.min.js"></script>
For jQuery, for example, I know I can use the code.jquery.com repository and replace my call with src="https://code.jquery.com/jquery-3.5.1.min.js". Is there similar public repositories for all other dependencies?
Of all the dependencies you list, plotly is probably the biggest. The latest plotly refers to this cdn:
https://cdn.plot.ly/plotly-basic-2.5.1.min.js
You can see this by look at the plots dependencies like so:
p <- ggplotly(p) %>% partial_bundle(local = FALSE)
p$dependencies
Related
I'm trying to load users from a table in my database using datatables(https://datatables.net/) but the page is not loading anything at all. I'm getting these errors when I open the console
[1]: https://i.stack.imgur.com/ykNTL.png
I loaded the js and css here in this order:
[uncaught ReferenceError: jQuery is not defined at dataTables.bootstrap.min.js:5 at dataTables.bootstrap.min.js:5][1]
<script src="~/lib/dataTables/jquery.dataTables.min.js"></script>
<script src="~/lib/dataTables/dataTables.bootstrap.min.js"></script>
<scripts src="~/lib/jquery-validation/dist/jquery.validate.js"></scripts>
<scripts src="~/plugins-site/jquery-ui/jquery-ui.min.js"></scripts>
<link href="~/lib/dataTables/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"
/>
if the page is not loading anything at all after add Query library i reccommend add before link of script defer after that the table load every script
make links like this
<script defer src="~/lib/dataTables/jquery.dataTables.min.js" ></script>
read this script-async-defer
Is there a way to add a script tag declared in view B to the list of scripts in view A (which calls B)?
The example below should make it clear what I need.
I have a base template A:
<html>
<head>
<title>#title</title>
<!-- declared stylesheets -->
</head>
<body>
#content
<!-- Java script dependencies -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Note that the base view declares dependencies to jquery.js and bootstrap.js at the end of the file. This is OK except for the following case:
#base(title) {
#header()
#navigation()
<div class="container">
#content
</div>}
The navigation view has a script tag that depends on jquery already being loaded.
When I load the page I get an error stating that "$ symbol is not defined" which makes sense because the script is parsed before jquery is loaded.
Is there a way for me to add the script declared in navigation at the end of the base view (after the declaration of jquery)?
I've tried moving the dependency to jquery to the <head></head> section and everything works as expected, but I would like to keep the current layout.
Edit: To be more clear, I want to send the script dependencies from #navigation view to #base view .
Take a look to Play's doc for moreScripts and moreStyles equivalents (last section in doc)
De dacto it deosn't need to be named scripts so you can use your own name, also you can use it for sending other blocks of HTML into higher level view (layout).
See answers to similar quesion
So it can be i.e.:
#navigationScripts = {
<script src="/assets/my-navigation.js"></script>
}
#base(title, navigationScripts) {
#header()
#navigation()
<div class="container">
#content
</div>
}
And in layout:
#(title: String, navigationScripts: Html = null)
<html>
<head>
<title>#title</title>
<!-- declared stylesheets -->
</head>
<body>
#content
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
#navigationScripts
</body>
</html>
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I want to use a simple Sencha Touch keypad plugin.
The plugin code can be found over here.
The keypad can be created in an html file under tags as follows:
<script>
Ext.setup({
onReady: function () {
var basic = new Ext.ux.Keypad();
basic.render('keypad');
}
});
</script>
<div id="keypad"/>
Alternatively, it can be used in a Sencha container as follows too:
...
items:[
{
xtype: 'keypad'
}
]
However, I am not able to get it to work the latter way. I'm new to Sencha and I think I'm not placing the files at the right places or not including them properly. I have already included the following in my index.html:
<script type="text/javascript" charset="utf-8" src="js/sencha-touch-1.1.1/sencha-touch.js"></script>
<link rel="stylesheet" type="text/css" href="js/sencha-touch-1.1.1/resources/css/sencha-touch.css">
<script src="js/Keypad.js" type="text/javascript" charset="utf-8"></script>
Can someone let me know what modifications are necessary in which files so that I can use the keypad plugin directly in a container?
in your app.js file you need to set path for the plugin folder in the loader...
put the ux (plugin)folder where your app.js is located...
in app.js set the following
Ext.Loader.setPath('Ext.ux', 'ux');
On the view where you are using the numpad you need to specify a
requires: ['Ext.ux.NumPad' ...] //All plugin related files
Also ensure that the CSS files are in the proper location...
Hope it helps...