I want to render two different bundles of javascript files using RenderJsHere().
I have placed it at two different places on my page but it's showing all files (1st group + 2nd group of files) at both places. Can anyone please guide me on how to render two different sets of files using RenderJsHere()?
Below is some sample code.
Thanks,
#inherits Umbraco.Web.Mvc.UmbracoViewPage
#using ClientDependency.Core.Mvc
<!DOCTYPE html>
<html>
<head>
#Html.RenderCssHere()
#{
Html.RequiresJs("~/content/js/jquery-3.5.1.js", 1);
}
#Html.RenderJsHere() =========== **1st group of files in header**
</head>
<body>
Some HTML here
Bottom of page
#{
Html.RequiresJs("~/content/js/bootstrap.js", 1);
Html.RequiresJs("~/content/js/jquery.lazy.js", 2);
Html.RequiresJs("~/content/js/slick.js", 3);
Html.RequiresJs("~/content/js/app.js", 4);
Html.RequiresJs("~/content/js/myjs.js", 5);
}
#Html.RenderJsHere() **2nd group of files at last in page**
</body>
</html>
Have a look at how you create named bundles here: ClientDependency in umbraco doesn't include my bundles - then you can render individual bundles wherever you want.
You can use RequiresJsBundle to set the named bundle you want to use. Then use RenderJsHere
Html.RequiresJsBundle("customjs1");
#Html.RenderJsHere()
https://github.com/Shazwazza/ClientDependency/blob/b5ba8cf6fbe476365b948888478e4389dbd0f710/ClientDependency.Mvc/HtmlHelperExtensions.cs
Related
so I am relatively new Angular Dart and Dart in general, and I am trying to create a simple webapp.
When I used to do PHP development I always had a config file that determined what environment the app was running on and decided to setup itself in different ways.
I am trying to figure how to achieve something similar in Angular Dart. Specifically as an example for the beginning I want to set different base href based on the URL that is loading the app. When you read the documentation it says that during development you should set the base href like this:
<script>
// WARNING: DO NOT set the <base href> like this in production!
// Details: https://webdev.dartlang.org/angular/guide/router
(function () {
var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
document.write('<base href="' + (m ? m[0] : '/') + '" />');
}());
</script>
But for distribution it should be set like this:
<base href="/">
All of this needs to be located in the <head> section of the HTML page so I would like to do some sort of an if statement here. Example how I wold do it in PHP:
<head>
<?php if(DEV) { ?>
// Do the development base href
<?php } else if(PROD) { ?>
// Do the production base href
<?php }?>
</head>
So my question basically is, is something like this possible in Angular Dart at the moment ?
You can't do binding in <head> with Angular.
I think there is still a way to pass "environment" variables to the app using -D=PROD=...
and then you could use const isProd = bool.fromEnvironment('PROD') (see also https://github.com/dart-lang/site-www/issues/404)
and then use dart:html to manipulate the DOM.
I haven't used this in web for a while and I'm not sure it's still supported in Dart 2.
(Update found https://github.com/dart-lang/build/issues/1053)
If '<base href="..."> is only for Angular routing, then it's better to use
import 'package:angular_router/angular_router.dart';
and adding
ValueProvider<String>.forToken(appBaseHref, '/'),
to Angular providers.
I'm also using a build script that copies files like
cp web/run_config_prod.dart web/run_config.dart
webdev build ...
cp web/run_config_dev/run_config.dart
to have some settings changed depending on the target environment.
user3568918 has responded to the following question:
jQuery Mobile not working with Internet Explorer?
Dont forget to keep the right binding Order:
jquery mobile css
jquery script
jquery mobile script
My question is :
When I go to download page of jquery mobile
https:/ /jquerymobile.com/download/
I see two viable options for me :
Download the javascript, css and images :
https:/ /jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip
Download the minified javascript :
http:/ /code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
If I choose 1, two additional subfolders "demos" and "images" are created, which have their own sub-folders.
Do I have to reference all these subfolders in my html ?
If I choose 2, which is to download the minified javascript only, how do I reference the images that I want to use for icons?
Thanks a lot in advance.
Example: assuming your index.html is the root, you should reference:
<link rel="stylesheet" href="css/jquery.mobile.1.4.5.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Then, the directory structure on your server shall be like this:
\index.html
-- All jQuery files shall be in \js subfolder and \css subfolder
\js\
----jquery-1.11.2.min.js
----jquery-1.11.2.min.map
----jquery.mobile-1.4.5.min.js
----jquery.mobile-1.4.5.min.map
(...other stuff)
\css\
-----jquery.mobile-1.4.5.min.css
-----jquery.mobile.external-png-1.4.5.min.css
-----jquery.mobile.icons-1.4.5.min.css
-----jquery.mobile.inline-png-1.4.5.min.css
-----jquery.mobile.inline-svg-1.4.5.min.css
(...other stuff)
\css\images\
------------ajax-loader.gif
------------icons-18-black.png
------------icons-18-white.png
(...other stuff)
\css\images\icons-png\
----------------------action-black.png
----------------------action-white.png
(...a lot of other stuff)
\css\images\icons-svg\
----------------------action-black.svg
----------------------action-white.svg
(...a lot of other stuff)
EDIT:
subfolders demos and images inside the zip file are ready for you if you need to have the JQM demos also available on your local site, there is also a custom css file special for the demos.
I think this will also clarify some aspect of your question: https://css-tricks.com/data-uris/
Here's my Dropwizard (0.8.5) app's basic project structure:
myapp/
src/main/groovy/
org/example/myapp/
MyApp.groovy
<lots of other packages/classes>
controllers/
site/
SiteController.groovy
dashboard/
DashboardController.groovy
org/example/myapp/views
site/
SiteView.groovy
dashboard/
DashboardView.groovy
src/main/resources/
assets/
images/
mylogo.png
org/example/myapp/views/
site/
header.ftl
index.ftl
dashboard/
dashboard.ftl
Where the gist of each of those classes is:
class MyApp extends Application<MyAppConfiguration> {
#Override
void initialize(Bootstrap<MyAppConfiguration> bootstrap) {
bootstrap.addBundle(new AssetsBundle('/assets/images', '/images', null, 'images'))
bootstrap.addBundle(new ViewBundle())
}
// etc...
}
#Path('/')
#Produces('text/html')
class SiteController {
#GET
SiteView homepage() {
new SiteView()
}
}
#Path('/app/dashboard')
#Produces('text/html')
class DashboardController {
#GET
DashboardView dashboard() {
new DashboardView()
}
}
header.ftl (dropwizard-views-freemarker)
=========================================
<!DOCTYPE html>
<html>
<head> <!-- lots of stuff omitted here for brevity --> </head>
<body>
<div class="well">
<img src="images/mylogo.png" />
<br/>This is the header!
</div>
index.ftl
=========
<#include "header.ftl">
<p>
Homepage!
</p>
</body>
</html>
dashboard.ftl
=============
<#include "../site/header.ftl">
<p>
Dashboard!
</p>
</body>
</html>
So you can see I'm using DW as an actual web app/UI, and that I'm utilizing both Dropwizard Views (Freemarker binding) as well as Dropwizard Assets.
When I run this, the app starts up just fine and I am able to visit both my homepage (served from / which maps to index.ftl) as well as my dashboard page (served from /app/dashboard which maps to dashboard.ftl).
The problem is that both pages use the header.ftl, which pulls in my assets/images/mylogo.png, but only my homepage actually renders the logo. On my dashboard page, I do see the "This is the header!" message, so I know the header is being resolved and included with my dashboard template. But, I get a failed-to-load-image "X" icon, and when I open my browser's dev tools I see that I'm getting HTTP 404s on the image.
So it seems that DW is unable to find my image asset from a view/URL not directly living under root (/).
On the Dropwizard Assets page (link provided above) there's a peculiar warning:
Either your application or your static assets can be served from the root path, but not both. The latter is useful when using Dropwizard to back a Javascript application. To enable it, move your application to a sub-URL.
I don't entirely understand what this means, but suspect it is the main culprit here. Either way, anyone see where I'm going awry, and what I can do (exact steps!) to fix this?
You need to add / before your URI:
<img src="/images/mylogo.png" />
this can be explained from the examples in RFC 3986 URI Generic Syntax, I pulled out the relevant examples.
5.4. Reference Resolution Examples
Within a representation with a well defined base URI of
http://a/b/c/d;p?q
a relative reference is transformed to its target URI as follows.
5.4.1. Normal Examples
"g" = "http://a/b/c/g"
"g/" = "http://a/b/c/g/"
"/g" = "http://a/g"
"../g" = "http://a/b/g"
"../../g" = "http://a/g"
Putting in the preceding / makes the URI begin from the domain name regardless of the referring URI, which allows you to do precisely what you want.
Load both pages up (the one that works, and the one that doesn't), and use Firebug or Chrome dev tools to inspect the logo element. What path is it trying to get to? I suspect on your index page it's going to http://some.thing/images/mylogo.png whereas on your dashboard it's trying to load http://some.thing/app/dashboard/images/mylogo.png
Try putting an additional / in front of the path in your template, and it should resolve from anywhere.
(Originally answered here: Dropwizard-user Google Group)
Attempting to use css and js files with same virtualpath bundle name
1 - is it possible ? (tried:but failed. cant define same virtual path name both for script and style)
2 - it it possible to builtup a ScriptAndStyleBundle together included with a mixed bundle ?
Just because I wantto use same name both for css and js.
//in BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/doMenu")
.Include("~/Plugins/doMenu/files/js/doMenu.js")
);
bundles.Add(new StyleBundle("~/bundles/doMenu")
.Include("~/Plugins/doMenu/files/css/doMenu.css")
);
//in _PartialLayoutMenu.cs
#Scripts.Render("~/bundles/doMenu")
#Styles.Render("~/bundles/doMenu")
result is:
<!--MENU LAYOUT-->
<script src="/Plugins/doMenu/files/css/doMenu.css"></script>
<link href="/Plugins/doMenu/files/css/doMenu.css" rel="stylesheet"/>
<!--/MENU LAYOUT-->
any clue ? or I want such a useless mind ?(thanks)
I'm using Cassette, which does support this feature.
Configuration:
bundles.Add<ScriptBundle>(BundleNames.Grid,
new[] {"~/Scripts/Grid.js"},
bundle => bundle.AddReference("~/" + BundleNames.Base));
bundles.Add<StylesheetBundle>(BundleNames.Grid,
new[] {"~/Content/Grid.less"});
BundleNames is a helper class I have with constant strings.
Reference bundles in views:
#{
Bundles.Reference(BundleNames.Grid);
}
As you'd expect, this will include all CSS and JS, in the correct order.
I'd also mention that I've started using Cassette before ASP.Net had bundle management and I'm very happy with it. I didn't find any interesting feature ASP.Net had that I'm missing.
Bundle names should be unique within the both styles and scripts. And since they are entirely different types you cannot mix them into a single bundle because then you wouldn't know how to reference it in the DOM: whether you should use a <script> or a <style> tag. Unfortunately what you are asking for is not possible.
I'm writing write my first RoR application with YUI framework. I tried googling for ror+yui manuals with no success. So I went to YUI site. YUI says:
// Put the YUI seed file on your page.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Where it's supposed to be putted in RoR app?
I've tried to app/assert/javascripts/yui-min.js.
As a result i got <html class="yui3-js-enabled"> in every page. Supposing YUI is working now i've tried to copy-paste "Work with the DOM" example from YUI's page to app/public/index.html.
The error I received was:
Uncaught ReferenceError: YUI is not defined.
I tried the info in this link and it was not helpful to me:
https://stackoverflow.com/questions/1452829/tutorial-suggestions-on-yui-with-ruby-on-rails
Your first step in any rails app is to delete app/public/index.html ... then work in your pages inside of rails.
So that means create an app/views/layouts/application.html, and that's where you add your
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Based on the link, you might not have it in your <head> and it needs to be.
UPDATE: (sample javascript code to change h1)
<script>
YUI().use('node', function (Y) {
var headerElement = Y.one('h1');
headerElement.setHTML("I have been updated");
});
</script>