I have a 'My Scores' view in my Node JS / Sails JS app and I'm using partials, one for a List View, and another one for a Grid View. When the user clicks the Grid or List View from the nav bar I'd like to be able to swap the UI with the given partial.
List view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/list-view')%>
</div>
Grid view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/grid-view')%>
</div>
Please advise.
No problem--just use a variable for the partial name, instead of hardcoding it:
<%- partial(viewName) %>
then in your config/routes.js:
"/listView": {
view: "list.ejs",
locals: {viewName: "../partials/list-view.ejs"}
},
"/gridView": {
view: "list.ejs",
locals: {viewName: "../partials/grid-view.ejs"}
}
That's assuming you're just routing directly to views. If you're using a custom controller action and res.view() to display your content, you'll put the viewName value in the second res.view() argument, like res.view("list.ejs",{viewName: "../partials/list-view.ejs"}).
Now, if you're trying to do this without reloading the page, then #tonejac has the right idea in his comment--either switch them using Javascript/CSS, or use AJAX to load content on-demand. Sails can only help on the backend!
Related
i am using this bootstrap masonry template: bootstrap masonry
and it is working fine but overlapps the cards on first load if i use the attribute "data-masonry" in my row.
<div class="row" data-masonry='{"percentPosition": true, "itemSelector": ".col-sm-6" }'>
i figured out that i have to use the imagesloaded function. for get this working i need to call the masonry from vanilla js instead the "data-masonry" attribut. But this is not working at all.
if i delete the attribute and add the js code the masonry is not working anymore.
<script>
var msnry = new Masonry('.row', {
itemSelector: '.col-sm-6',
percentPosition: true
});
</script>
</head>
<body>
<main class="container py-5">
<div class="row">
i appreciate any help. thank you in advance!
I created a gallery plugin, which collect images from server.
This plugin use jQuery 3.6.1, and bootstrap 5.2 (after v5 masonry is deprecated in BS)
The plugin create "coverimage" divs from the cover flagged images, and push these divs into a grid, and create "masonry" layout.
At first I can't find the solution for overlapping, main reason of the problem was the timing of "masonry" function call.
You have to call the "masonry" function after the images loaded and displayed.
$("img").load( function(){ $("#mason_grid").masonry({ itemSelector: ".cover_wrapper"}) });
"#mason_grid" is the parent div of gallery,
".cover_wrapper" is a div with an image.
For more info:
https://getbootstrap.com/docs/5.2/examples/masonry/
I have two different kinds of indexes both are working fine at least in the search preview of my local index.
I added both of them to my smart search part in indexes area, one is a page crawler and the second is a custom index that searches in the media library.
The issue is that the results just match with the results of the crawler and are not showing anything of the custom index.
I think the problem is my smartSearchResults transformation because each time that I try to add a field from the custom index I'm getting an error that the value does not exist.
my question is how to use both indexes to retrieve all the results in the same web part?
this is how looks the trasformation
<div class="result">
<!-- Search result title -->
<div>
<a href='<%# SearchResultUrl() %>'>
<%#SearchHighlight(HTMLHelper.HTMLEncode(CMS.Base.Web.UI.ControlsHelper.RemoveDynamicControls(DataHelper.GetNotEmpty(Eval("Title"), "/"))), "<span style='font-weight:bold;'>", "</span>")%>
</a>
</div>
<p class="content">
<%#
IfCompare(GetSearchValue("UseCustomContent"), true,
SearchHighlight(LimitLength(HTMLHelper.StripTags(Eval<string>("Content")), 280), "<strong>", "</strong>"),
SearchHighlight(LimitLength(HTMLHelper.StripTags(GetSearchValue("CustomContent").ToString()), 280), "<strong>", "</strong>")
)
%>
</p><!-- content -->
<%-- MEDIA LIBRARY CONTENT--%>
<div>
<%#GetSearchValue("FileName") %>
</div>
<div class="file">
<i class="<%# GetFileIconClass(Eval<string>("documentExtensions")) %>"></i>
</div><!-- file -->
</div>
</div>
But I'm getting no results message
When getting specific field values from a search index you cannot use the simple Eval("ColumnName"). You have to use another method, GetSearchValue("ColumnName"). The Eval() method works mainly with the following columns Title, Content, Image. If you're already using the GetSearchValue() method then you need to update your question to reflect what you're using or have already tried.
You will have to check if the value exists before you try to use it. You can use IfEmpty for this. An Example:
<%# IfEmpty(GetSearchValue("Email"),"","<span class='label'>Email</span>")%>
<%# IfEmpty(GetSearchValue("Email"),"",GetSearchValue("Email"))%>
I am building an electron app where I am loading an html file using this code in development:
<webview id="foo" src="/src/documents/example.html" style="display:inline-flex; width:100%; height:550px"></webview>
This works well in development but once the app is packaged it shows a blank page.I have researched around and it seems using __dirname might fix the issue.
I am still very new to electron and can't figure out how to reach this path (src="/src/documents/) using __dirname.
Any help will be highly appreciated.
I thought I would share the solution I found around this.Basically ,you need to create a route for the page you want to load like this:
{
path:'/example',
name:'example',
component: require('#/components/example').default
},
If you are using electron-vue,make sure the page extension is ".vue" and enclose the page content like this:
<template>
<html>
**Put the page content in here**
</html>
</template>
In my case,I wanted to go to the page by clicking on a button,so i used Vue-router like this:
<button type="button" class="btn btn-light"><a id="home"><router-link :to="{ name: 'example' }"> Button text </router-link></a>
</button>
Et voila!
Example:
dashboard.html.twig:
<% extends layout.twig.html %>
<% include ('filter.html.twig') %>
<% block javascripts %>
< %endblock >
filter.html.twig:
filter form definition and html
filter form definition and html
filter form definition and html
<% block javascripts %>
javascript for use in filter form
javascript for use in filter form
<% endblock %>
I want the filter's javascript to be set in the layout, because that way it is loaded AFTER the JQuery.
But the Javascript is rendered right after the filter form, so getting $ is undefined.
So whatI want is the Javascript defined in filter.html.twig to override the block in layout.html.twig, same as extends.
Thanks!
Included templates can't alter the blocks of their includer. The "best" way I found i using the deferred block extension. It delays the render of a block. If you follow the advanced example in my link you can see how you could solve it
Using Express with Don Park's HBS as the view engine, with the intention of using the same templating style for both client and server code. However I have run into a bit of a snag.
With the index.hbs shown here,
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
Heres what renders to the browser:
<h1>Express</h1>
<p>Welcome to Express</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
</ul>
</script>
The Express View render process seems to have consumed the template block intended for use in the browser. As far as I can tell, the view renderer just takes the entire file.hbs as a string tempate to render, not distinguishing the script block from server view.
Any ideas/workarounds for this?
I'm using Handlebars in the same way and ran into the same problem.
I worked around it by storing this part:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
In a separate static file and then loading it via ajax after the page has rendered. This way my client-side template doesn't get mistakenly rendered by Express.
It would be nice though if there were a way to add a tag to let Express know to ignore blocks like that and leave them for the client-side.
If handlebars is truly compatible with Mustache, then this should work:
Change your delimiter first by putting this somewhere at the top of your template ( before any template placeholders )
{{=<% %>=}}
So now anything you want rendered by the server you will do:
<% foo %>
And anything you want rendered on the client like so:
{{ bar }}
More info is at the bottom of the Mustache manual here - http://mustache.github.com/mustache.5.html
For handlebars, uou can use backslash to escape the double braces, like so:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
\{{#lines}}
<li>\{{name}}</li>
\{{/lines}}
</ul>
</script>