Given the following code:
<html>
<body>
<%- partial('myPartial.html') %>
</body>
</html>
It will work if I place myPartial.html in the views folder, however what I'm trying to do is to pull the view from the .tmp/public folder.
I've tried importing a script from the same location and it work so I think it might be related to partial().
Does anyone has solved this before?
The .tmp/public is generated from the assets folder, processed by default grunt tasks. It is used by Sails when serving assets at runtime. So when serving assets, like scripts and styles, the path is relative to .tmp/public.
On the other hand, partials are used when rendering ejs, and the relative path depends on the view that you working on. Partials really belong to the views folder. But if you really need to use an html from the assets in a partial, then you have to access myPartial.html relative to the current view.
Let us say you myPartial.html is in .tmp/public/myPartial.html, then your view should be something like
views/homepage.ejs
<html>
<body>
<%- partial('../.tmp/public/test.html') %>
</body>
</html>
Related
I'm trying to use GitHub as required of my class to launch a website. Unfortunately, I have to be doing something wrong. My filepaths in the index.html file are as follows:
link href="/css/style.css" rel="stylesheet"
for the style sheet
Now for the image I'm wanting to use I'm using:
img src="/images/TomEdwards.jpg" alt="Tom Edwards"
and I'm getting this instead at this location:
https://ladywebdevelop.github.io/bioSite/index.html
my file tree looks like this:
css (Folder)
images (Folder)
README.md
index.html
What are my possible solutions, please?
I've tried several different ways in the file path names to access both the stylesheet and the images.
I'm expecting the stylesheet to render correctly with a colored background and the image to appear on the right-hand side under the horizontal navigation list.
I was able to load the stylesheet by changing this:
<link rel="stylesheet" href="/css/style.css">
To this:
<link rel="stylesheet" href="css/style.css">
The stylesheet must be referenced correctly relative to the index file.
As for the image, I don't see it in the application's sources. Are you sure that it's committed to the repository, and located in the right place? The current codes has it here, which looks like a typo:
<img src="TomEdwards/TomEdwards.jpg" alt="Tom Edwards">
I'm currently implementing a mockserver for my UI5 Application.
Everything works fine, which means my ui5 controls get the mocked data correctly.
The only thing I’m still struggling with are source paths of images.
Here an example:
Within an XML Fragment, I have the following image content
<ImageContent src="images/logo_green.svg" press="navToDashboardPage"/>
The Image can be displayed, when I run my normal index.html.
When I run the mockserver.html (which in in the test-folder) the path has to be like "../images/logo_green.svg".
How can I set the paths independently from the index.html / mockserver.html?
Or is there a way to figure out (within xml) which .html page is currently running?
Thanks for your help :)
Did you try to add a <base href="../"> to your mockserver.html?
You'll probably need to adapt the data-sap-ui-resourceroots element in the bootstrap. From the UI5 tutorial, this is the invocation in index.html:
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
and this in test/mockServer.html:
<script
id="sap-ui-bootstrap"
src="../resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "../"
}'
I don't have an example with an image at the moment but css/styles.css is correctly referenced in both cases, so that should be it.
Also, you should adapt the src path as well, if you're booting from a local copy instead of the CDN. sap.ui.demo.walkthrough of course should be the name of your app.
I want to set base url to load template from /templates and associated /controller. The problem is that it is not getting loaded on base url, base url has index.html as it is and then base url+"/#/" loads my second page which i want to be loaded with index.html at the app launch. I believe i am going wrong with setting state. I want to configure a single state for now, a single page whose template gets mapped into index.html. Any solution?
angular.module('starter', ['ionic', 'CalendarCtrl' ,'onezone-datepicker'])
.config(function($stateProvider) {
$stateProvider
.state('/',
{ url: '/',
templateUrl: 'templates/calendar.html',
controller: 'CalendarCtrl'
});
})
try this
.when("/", {
templateUrl : "templates/page.html"
})
Correct me if I'm assuming wrong, but from your question it seems you are new to Ionic. Since there's not much explanation to your question, I'll clarify what you are looking at in your code.
Basically what you want to do is make a file called "page.html" in your templates folder and control it with the 'PageCtrl' you have declared here.
If you want to simply use Index.html for all your html, then I guess you can do that too. Make sure in your index.html you have:
<html ng-app="starter"> ....
<script src="js/controllers/main.js"></script>
</html>
<head>..... </head>
<body ng-controller="MainCtrl">
</body>
</html>
Replace "MainCtrl" with whatever controller you decide to control your index page with.
Hope that helps. Don't give up!
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I want to include certain .js and .css files only on pages that need them.
For example, my EditorTemplate DateTime.ascx needs files anytimec.js and anytimec.css.
That template is applied whenever I use either the EditorFor or EditorForModel helper methods in a view for a model with a DateTime type value.
My technique:
I've put this condition into the <head> section of my master page. It checks for a DateTime type property in the ModelMetadata.
<% if (this.ViewData.ModelMetadata.Properties.Any(p => p.ModelType == typeof(DateTime))) { %>
<link href="../../Content/anytimec.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/anytimec.js" type="text/javascript"></script>
<% } %>
This has two problems:
Fails if I have nested child models of type DateTime
Unnecessarily triggered by views without EditorFor or EditorForModel methods (example: DisplayForModel)
How can I improve this technique?
Personally, I would use a partial view and an ASP Content Placeholder.
In the Views/Shared have a partial view EditorScripts.ascx which contains the tags defining the scripts to be included in your editing pages.
Then put a placeholder in the Site.Master <head> tag, something like this:
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
The, in any view that you want/need the scripts, put this code:
<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
<% Html.RenderPartial("EditorScripts"); %>
</asp:Content>
This isn't a perfect solution and isn't as dynamic as you would like. The reason for using a partial view is that if you decide to update or add more scripts to those views, then you only have to update it in one location.
Another way would be to have a Editor.Master page that contains these scripts and other editor specific things then have that master use the Site.Master as it's master page. Then all editor views would have the Editor.Master as their master page.
HTH
I think the telerik web asset manager allows you to accomplish what you want and is open source.