I have an ebook (ebook1.epub) that loads a javascript file (script1.js) like so:
cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<script type="text/javascript" src="../../js/script1.js"></script>
...
</head>
...
</html>
# --------------------------------------------------------------
cat EPUB/package.opf
...
<item id="js4" href="js/script1.js" media-type="text/javascript"/>
This works ok. I view the book with:
calibre ebook1.epub
script1 works as expected, (e.g. calling console.log("foo1") from within script1 responds as expected and prints to the terminal where calibre was launched).
Now, I need to use Javascript module file (ES6) (script2.js)
The javascript module file is loaded like so:
cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<script type="module" src="../../js/script2.js"></script>
...
</head>
...
</html>
# --------------------------------------------------------------
cat EPUB/package.opf
...
<item id="js4" href="js/script2.js" media-type="text/javascript"/>
When I ran calibre with
calibre ebook2.epub
script2 does not work.
Calling function from script2:
does not print anything to the terminal.
the terminal shows an error message:
ERROR: clbr://internal.sandbox/book/EPUB/js/script2.js:0: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
How can I load a javascript module file in the .epub?
Thanks,
Avner
I installed the latest Calibre version (5.22.1) from here.
After install, I was able to load module javascript files, and see messages from console.log() in the terminal where I launched Calibre from.
cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<script type="module" src="../../js/script2.js"></script>
...
</head>
...
</html>
# --------------------------------------------------------------
cat EPUB/package.opf
...
<item id="js4" href="js/script2.js" media-type="module"/>
When I ran calibre with calibre ebook2.epub script2.js works ok:
I can see messages from Console.log() in the terminal.
The solution came from this post.
Related
This is a new MVC5 project, created from the blank ASP.NET template.
Here's my bundle registration:
Imports System.Web.Optimization
Public Class BundleConfig
Public Shared Sub RegisterBundles(Bundles As BundleCollection)
Bundles.Add(New StyleBundle("~/styles/main").Include("~/Styles/Layout.css"))
End Sub
End Class
...here's the relevant section of my view:
#Code
Me.Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#Styles.Render("~/styles/main")
</head>
... and here's the HTML output:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="/styles/main" rel="stylesheet"/>
</head>
Note that the link's href should instead be:
<link href="/Styles/Layout.css" rel="stylesheet"/>
All of this of course results in a 404 error.
Things I've tried:
Followed the general guidance from the official documentation
Added a CssRewriteUrlTransform object, as indicated here
Both enabled and disabled Optimization, as indicated here
Updated the WebGrease package to the latest version
Checked Web.config for an umbracoReservedPaths key, as indicated here (none exists)
Added Bundles.IgnoreList.Clear() as indicated here
This exact construct is working correctly in another project, so obviously something's different. But I'm unable to spot it.
How can I get this bundle to render properly?
What is the most correct way to include another XHTML page in an XHTML page? I have been trying different ways, none of them are working.
<ui:include>
Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.
Kickoff example of the master page /page.xhtml:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Include demo</title>
</h:head>
<h:body>
<h1>Master page</h1>
<p>Master page blah blah lorem ipsum</p>
<ui:include src="/WEB-INF/include.xhtml" />
</h:body>
</html>
The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h2>Include page</h2>
<p>Include page blah blah lorem ipsum</p>
</ui:composition>
This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.
You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).
<ui:define>/<ui:insert>
A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> to define the template content which is to be inserted.
Master template page /WEB-INF/template.xhtml (as a design hint: the header, menu and footer can in turn even be <ui:include> files):
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.
<ui:param>
You can pass parameters to <ui:include> or <ui:composition template> by <ui:param>.
<ui:include ...>
<ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
<ui:param name="foo" value="#{bean.foo}" />
...
</ui:composition >
Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?
You can even pass whole beans, methods and parameters via <ui:param>. See also JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?
Design hints
The files which aren't supposed to be publicly accessible by just entering/guessing its URL, need to be placed in /WEB-INF folder, like as the include file and the template file in above example. See also Which XHTML files do I need to put in /WEB-INF and which not?
There doesn't need to be any markup (HTML code) outside <ui:composition> and <ui:define>. You can put any, but they will be ignored by Facelets. Putting markup in there is only useful for web designers. See also Is there a way to run a JSF page without building the whole project?
The HTML5 doctype is the recommended doctype these days, "in spite of" that it's a XHTML file. You should see XHTML as a language which allows you to produce HTML output using a XML based tool. See also Is it possible to use JSF+Facelets with HTML 4/5? and JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used.
CSS/JS/image files can be included as dynamically relocatable/localized/versioned resources. See also How to reference CSS / JS / image resource in Facelets template?
You can put Facelets files in a reusable JAR file. See also Structure for multiple JSF projects with shared code.
For real world examples of advanced Facelets templating, check the src/main/webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code.
Included page:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Including page:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
You start your included xhtml file with ui:composition as shown above.
You include that file with ui:include in the including xhtml file as also shown above.
I am using thymeleaf with spring-mvc to create template in my application. I have created 3 files (head, layout and content) as below;
head.html
<title>layout<title>
layout.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="head"></head>
</html>
content.html
<html layout:decorator="layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>content</title>
</head>
</html>
Now with this setup, when I run my application and open content.html page I see title as "layout" instead of "content".
Am I doing something wrong in the configuration?
Specific answer
In the layout files title, make the title as content
<title layout:title-pattern="$CONTENT_TITLE"></title>
Further description
Lets assume the application main title is "My Web" and you are viewing the page content with the title "Content"
To make the page display the title as "My Web - Content"
Layout File
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My Web</title>
ContentFile
<html layout:decorator="layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Content</title>
</head>
</html>
I have a Site.Master in my ASP.NET project which defines a HEAD section as follows
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id="MasterTitle">MyApp</title>
<link rel="icon" href="Content/icon.ico" type="image/x-icon" />
<link href="Content/mycss.css" rel="stylesheet" type="text/css" />
<script src="Content/mycode.js" type="text/javascript"></script>
</head>
In the mycode.js file, I have a function called GetSels();
function GetSels()
{
//do stuff
}
If the GetSels function is defined in Site.Master, GetSels is callable. If it's in mycode.js, it's not.
Every code example I've seen seems to say this should work.
What am I doing wrong?
This should really work perfectly as I have done this multiple times myself.
Check that the code in your external javascript file runs correctly on page load, this is just to make sure that it is indeed being loaded correctly into your document. For example set an alert("It's loaded"); in your external .js file.
have you checked that your reference to mycode.js is correct? if your using a relative path try "~/Content/mycode.js" in your reference.
This question already has answers here:
ASP.Net Master Page and File path issues
(10 answers)
Closed 9 years ago.
We're having some trouble with including javascript in masterpages. The "~/" root shortcut doesn't seem to work, and so we're having to manually enter in the path to the javascript from where it will be used, for example: "../../tooltip.js"
However, the problem is that if the nested page is in a different path, this approach does not work as the path stays the same despite the nested page being in a different location - any solutions on how to get the path automatically working like it does for the css files?
Thanks!
The ~/ is a special entity in ASP.NET which represents the "application root". The translation only happens when you pass that URL through an ASP.NET server control, such as <asp:Image runat="server" ImageUrl="~/path..." />. Trying to use it in something that is passed as literal text directly to the client, such as ` will be rendered exactly that in the browser.
There are a few solutions to this:
Put your scripts in a predictable place relative to the domain root, such as domain.com/scripts/script.js, and you can refer to it as /scripts/script.js. The preceding / tells the client (browser) it is an absolute path from the domain root.
Use Page.ResolveClientUrl to render the correct path (<%=Page.ResolveClientUrl("~/script./js")%>)
Create your own server control which handles the ~/ resolution.
Embed the script as an assembly resource.
Cory Larson recommends:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/tooltip.js") %>"></script>
Try
<script type="text/javascript" src=<%=Request.ApplicationPath+"/Scripts/Script_Name"%>></script>
I've been using url rewriting and "~" occasionally chokes on special characters in the url even when they are encoded.
If the script tag is in the HEAD element just use a path that is relative to the master page and asp.net will automatically fix the reference for you. Just make sure that the HEAD element has the runat=”server” attribute.
This also works really well for CSS files. It's the only way I've been able to get them to resolve in the VS.NET designer.
Here is a sample from my project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/960.css" />
<link rel="stylesheet" type="text/css" href="../styles/default.css" />
<link rel="stylesheet" type="text/css" href="../styles/buttons.css" />
<script type="text/javascript" src="../jQuery/jquery-1.3.2.js"></script>
</head>
Linked style sheets can be put within the header (with runat="server") and use a ~ to resolve to the root. However, Javascript files cannot be referenced this way. One additional way to add scripts is with a script manager in the body.
<html>
<head runat="server">
<title>title</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.custom.min.js" />
</Scripts>
</asp:ScriptManager>
</body>
</html>
As answered # [Include Javascript adn CSS][1]
http://www.codeproject.com/Articles/404942/Include-JavaScript-and-CSS-on-your-MasterPage
For CSS files:
<link href="<%# ResolveUrl("~/") %>css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
For JavaScripts:
<script src="<%# ResolveUrl("~/") %>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Can you explain what you mean by the "~/" isn't working? It should be exactly what you're looking for. You might check that your head tag has the runat="server" attribute, since that might prevent the "~/" from working.