I want to have my javascript/coffescript files load only on the pages that use them. So in my application.html.erb file I have the following code in my head
<%= yield :head %>
Then in the specific view that I want to load the javascript I have
<% content_for(:head) do%>
<%= javascript_include_tag 'application' %>
<% end%>
This appears to work initially. When I first go to pages that I do not want javascript in, there are no links to the js files. However, once I've visited the page that has the above code block, the links show up in all subsequent pages I visit (for example the home page). If I then refresh the browser in the home page the links go away again...
This in and of itself isn't really a problem, but I also have this in my application.html.erb head section
<style><%= yield :stylesheets %></style>
and in some layouts, there is css that gets yielded to in there. Here's where it gets really weird. Let's say page A has no js and no additional css, page B has no js but does have additional css, and page C has both js and additional css. Then I do teh following in order:
Visit page A => everything is fine
Visit page B => everything is fine (additional css is loaded)
visit page A again => everything is fine (additional css is not loaded)
visit page C => everything is fine (additional css and js loaded)
visit page A again => NOT GOOD!!! (additional css and js still loaded)
somehow the javascript include tag is also causing my content_for(:stylesheets) stuff to persist even tho i don't want it to. If I do a manual refresh on page A everythign goes back to normal again until I visit page C. I've even tried putting this in my page A view to get rid of the links and still no good
<% content_for(:head) do%>
<% end%>
Any ideas?
With turbolinks enabled, it won't work. What you need to do is either disable turbolinks or put your javascript and css inside the body of your page.
Update your config/initializers/assets.rb
Either add your filename.js file or **/*.js inside
Rails.application.config.assets.precompile += %w( filename.js)
Run RAILS_ENV=production rake assets:precompile depends on your environment. If you are working locally, skip that command as it will precompile on the fly, as per your config.
Restart your app, should work with turbolinks off and yield from head or body.
I used
<% content_for :head do %>
<% end %>
But didn't use <%= content_for :head %> in my relevant layout's head tag which was the problem for me.
More these are equal
<%= content_for :head %>
or
<%= yield :head %>
Related
I have a FAQ page i have created with many questions and answers in the form of
<div>
<h4 id="anchor-name">question</h4>
<p>answer</p>
</div>
This works as expected if i have a button or clickable link in the form of
Click here to go to anchor
which takes me directly to my question with that id (expected behaviour)
The problem is when i try to access this from a URL from another tab by doing something like
https://my-app-url/#/FAQ/#anchor-name
it redirects me to my FAQ page but not to my question. Instead, it just loads the FAQ and stays on the top.
Some context:
frontend is in react
the first # in the url https://my-app-url/#/FAQ/#anchor-name is mandatory. Apparently if i just go with https://my-app-url/FAQ/#anchor-name it never loads the page
I have tried enclosing the <div> tags and the <h4> tags by an <a> tag but it didn't work. In those cases what i did was
<div>
<a href="#anchor-name">
<h4 id="anchor-name">question</h4>
<p>answer</p>
</a>
</div>
What i wish to know and cannot seem to find it by doing research a lot is:
Is it possible to access this anchor via URL from an external link by using react-router library?
Could it be that by using react the html way to anchor is not working as expected?
Is my first # in the URL interfering with the anchor linking feature?
You don't need that last / right before the #anchor-tag.
so the URL would be:
https://my-app-url/#/FAQ#anchor-name
For anyone who might be interested, I fixed this issue. The problem was fixed by replacing HashHistory with BrowserHistory. With HashHistory, the URL gets an # that interferes with anchors. By using BrowserHistory, that # is never there so the issue is gone. Hopes this helps.
I have a problem about changing the main page, I use Tornado, and in Tornado, there is a special value which is generated everytime the server is reached, it is a token to avoid xsrf attack, but when I use .appcache file, the problem is that it caches everything! and I only show to cache static like css, js, fonts, here is what it contains:
CACHE MANIFEST
# v = 2
/static/css/meteo.css
/static/css/semantic.min.css
/static/js/jquery-2.1.1.min.js
/static/css/main.css
/static/js/semantic.min.js
/static/js/geo.js
/static/js/meteo.js
/static/fonts/icons.woff2
/static/fonts/icons.woff
/static/fonts/WeatherIcons-Regular.woff
NETWORK:
/
FALLBACK:
It doesent work, the / get cached!
So how to do this with new Framework, where it we dont make the html file in the route, but the uri that is bound to a function/class?
Here is a video I made about it
And it seems that the master is always cached :
Update: From this page, it is noway!
But, you say, why don’t we not cache the HTML file, but cache all the rest.
Well. AppCache has a concept of “master entries”. A master entry is an HTML file that includes a manifest attribute in the html element that points to a manifest file (which is the only way to create an HTML5 appcache BTW). Any such HTML file is automatically added to the cache. This makes sense a lot of the time, but not always. In particular, when an HTML document changes frequently, we won’t want it cached (as a stale version of the page will most likely be served to the user as we just saw).
Is there no way to over-ride this? Well, AppCache has the idea of a
NETWORK whitelist, which instructs the appcache to always use the
online version of a file. What if we add HTML files we don’t want
cached to this? Sorry, no dice. HTML files in a master entry stay
cached, even when included in the NETWORK whitelist. See what I mean.
Poor AppCache didn’t make these rules. He’s just following them
literally. He’s not a douchebag, he’s a pain in the %^&*, a total
“jobs-worth”.
I got the solution from here:
I made a hack.html which contains:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Hack 4 Manifest</title>
</head>
<body>
{% raw xsrf_form_html() %}
</body>
</html>
And then
Add this in the main page:
<iframe style='display: none;' src='/hack'></iframe>
And then in Tornado:
(r"/hack", handlers.Hack),
class Hack(MainHandler):
#tornado.gen.coroutine
def get(self):
self.render("hack.html")
And then I use the javascript call:
xsrf = $("iframe").contents().find("input").val()
$("#laat").html('<input id="lat" type="hidden" name="lat"></input><input type="hidden" name="_xsrf" value='+xsrf+'><input id="lon" type="hidden" name="lon"></input><input class="ui fluid massive yellow button" value="Get forecast" type="submit"/>');
I am trying to use an "Infinite Ajax Scrolling" Orchard module.
https://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.jQuery.Ias
I installed the module through admin interface. I made necessary modifications described on the given link. Also, I had to do an extra modification that is described in the comments.
The infinite scrolling thing is just not functioning. I created about 30 blog posts in order to test it. When I scroll through blog posts through public website, first page og blog posts is loaded and when I scroll to the bottom, nothing happens. Pager is not visible (expected), but no new content is appended to the bottom of the list (not expected).
When I scroll through blog posts using Admin interface and I scroll down sufficiently, Chrome console reports couple of things:
Uncaught Error: Syntax error, unrecognized expression: <!DOCTYPE html>
<html lang="en-US" class="static orchard-blogs">
<head>
<meta charset="utf-8" />
<title>Proba - Manage Infinite Blog</title>
<link href="/OrchardLocal/Modul...<omitted>...l> jquery-1.9.1.js:4421
Sizzle.error jquery-1.9.1.js:4421
tokenize jquery-1.9.1.js:5076
select jquery-1.9.1.js:5460
Sizzle jquery-1.9.1.js:3998
jQuery.fn.extend.find jquery-1.9.1.js:5576
jQuery.fn.jQuery.init jquery-1.9.1.js:196
jQuery jquery-1.9.1.js:62
jQuery.fn.jQuery.init jquery-1.9.1.js:201
jQuery jquery-1.9.1.js:62
(anonymous function) jquery.ias.min.js:210
fire jquery-1.9.1.js:1037
self.fireWith jquery-1.9.1.js:1148
done jquery-1.9.1.js:8074
callback
A moment after:
GET http://localhost:30321/modules/orchard.jquery.ias/styles/images/loader.gif 404 (Not Found) jquery-1.9.1.js:6469
jQuery.extend.buildFragment jquery-1.9.1.js:6469
jQuery.extend.parseHTML jquery-1.9.1.js:531
jQuery.fn.jQuery.init jquery-1.9.1.js:149
jQuery jquery-1.9.1.js:62
get_loader jquery.ias.min.js:266
show_loader jquery.ias.min.js:279
paginate jquery.ias.min.js:167
scroll_handler jquery.ias.min.js:99
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750
In the admin interface I checked Blog properties and it seems to be configured fine. All default values are in place for [Container, Item, Pager, NextAnchor], and these values are also present in the html file I'm viewing when reported errors occur.
EDIT (after justrhysism's answer)
After implementing justrhysism's answer, I focused on why infinite scrolling works in the dashboard but not in front-end.
When I opened a list of blog posts in dashboard, I located .pager element.
<ul class="pager">
<li class="first"><span>1</span></li>
<li>2</li>
<li class="last">></li>
</ul>
I opened a list of blogs in front-end, and also located .pager element.
<ul class="pager" shape-id="92" style="display: none;">
<li class="first" shape-id="92"><span shape-id="93">1</span></li>
<li shape-id="92">2</li>
<li shape-id="92">></li>
<li class="last" shape-id="92"></li>
</ul>
Then I inspected javascript in charge for triggering async loading of content.
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href"); // evaluates to $(".zone-content .pager .last a").attr("href")
...............
}
And found out that the urlNextPage variable always gets set to undefined in front-end view.
Problem
I've come across this before. It's a document parsing error. There is a whitespace character (of some description) at the top of the document which Orchard returns instead of the <! which is expected. Somebody with more knowledge of AJAX and document parsing could better describe this.
Solution
To fix this, find the view Document.cshtml within Orchard's Core (located in src\Orchard.Web\Core\Shapes\Views) and copy it to your Theme's View directory.
In this file, look to Line 10 where <!DOCTYPE html> starts. Above this, remove the line break between the closing brace } and the DOCTYPE declaration.
Before:
}
<!DOCTYPE html>
After:
}<!DOCTYPE html>
This should fix your issue.
The Infinite Ajax Scrolling module for Orchard CMS is on Github
https://github.com/grapto/js.Ias
In response to my last edit where urlNextPage was being set to undefined.
I changed the NextAnchor selector in Blog properties:
From default value of ".zone-content .pager .last a" ----> To ".zone-content .pager a".
Also I went into Orchard.jQuery.Ias module -> Scripts/jquery.ias.min.js
Changed paginate function.
Old:
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href");
....
New:
function paginate(curScrOffset, onCompleteHandler)
{
if ($(opts.pagination).find(".last span").length)
return; // if span element exists in .last element, that means we are on the last page
urlNextPage = $(opts.next).last().attr("href");
....
It works fine now, both in dashboard and in front-end. This is not a very reliable solution, because I made an assumption that last anchor tag in .pager will always lead to the next page. That assumption is based merely on my observations of module's behavior.
I'm using express.js and EJS as template engine.
I don't understand how to use partials, I have seen at the examples but the author used JADE template engine, so I don't know how to apply it with EJS.
I have a simple view named: test.ejs and another .ejs file named part1.ejs
I need to show part1.ejs inside test.ejs.
I tried putting <% partial('part1', {}) %> (into test.ejs) but nothing happen, It does not include that file.
Could someone give me an example?
Thank you!
The correct code in your situation would be:
<%- partial('part1') %>
If you want to include unescaped HTML use <%- and if you want to escape HTML (unlinkely though when including a partial) you can use <%=.
Resources:
Node.js - EJS - including a partial
http://groups.google.com/group/express-js/browse_thread/thread/62d02af36c83b1cf
Its an old thread, but here is how you do it in the newer version of EJS.
<% include part1 %>
given part1.ejs contains the html you wish to include.
I've been customising refinerycms with my limited knowledge of ruby/rails, and I've come across a problem:
After changing the application.html.erb to my preferred look, I have removed
<%= yield %>
And replaced it with
<%= #page.content_for(:body).html_safe %>
Now in my application.html.erb, I have a navigation menu. I'd like to get a list of contructed pages and parse them into the menu, ie Home, About Us, Contact Us etc...
Ok, found the answer, I put the <% yield %> back in the application.html.erb file.
Then I accessed the list of pages by using
<% #Pages = Page.in_menu %>
<% #Pages.in_menu.each do |p| %>
<li><a>p.title</a></li>
<%end%>
Still not sure how to generate a link href though, it works if you do /p.title, but if you have a space in the title it breaks, I'll update the answer when I find it.
#parndt: Thanks for pointing me in the right direction on IRC