In Rails 3.2 I was able to rename a extension to .handlebars.erb in order to be able to use erb tags (mainly <%= image_tag 'image.jpg' %>) in my handlebars templates.
I'm unable to get this going in Rails 4. Im using
gem 'ember-rails'
gem 'handlebars-source'
The error I'm getting:
undefined method `image_tag'
The view in question is the one below, same for any other view:
<div class="row-fluid">
<div class="span12">
<div class="row-fluid distance_0">
<div class="row-fluid divider slide_divider base_color_background">
<div class="container">
<span class="bottom_arrow"></span>
</div>
</div>
<!-- Title and Description -->
<div class="row-fluid slide_content fullwidth">
<div class="container">
<div class="row-fluid text_bar_pattern themeple_sc">
<div class="content_bar">
<h3>
</h3>
<p>
</p>
</div>
{{#linkTo "user.new" class="button_bar"}}{{/linkTo}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="container">
<div class="bottom_shadow_full"></div>
</div>
</div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid">
<div class="container">
<img src="images/old_letters_blur.jpg" alt="">
</div>
</div>
<%= image_tag 'old_letters_blur.jog' %>
<!-- TextBar -->
<!-- TextBar End -->
</div>
</div>
</div>
Any suggestions?
Related
I want to pass the value in the comment text area when the a tag is clicked.Is there any other methods to pass both the comment and rating into the get method.I saw some similar questions but the answers where suggesting to use hidden input field to pass the value.But in my case i want the rating number in the clicked tag too.so i won't be able to use the hidden input method.
<form method='post'>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Review</h4><br>
<div >
<textarea class="textarea p-3 w-100" placeholder="Write a review" cols = "40" rows="5"></textarea>
{{form.comment}}
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Rating</h4><br>
<div class="rating rating2">
★
★
★
★
<a href="{% url 'ratings' 1 id %}" title="Give 1 star" data-value="1" type="submit">★
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I've this html page. I'm trying to extract the following information of this div:
<div class="clearfix">
<div class="container left">
<div class="logo">
<a href="/teams/belarus/fc-bate-borisov/200/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/200.png" alt="FC BATE Borisov" />
</a>
</div>
</div>
<div class="container middle">
<div class="details clearfix">
<dl>
<dt>Gara</dt>
<dd>Premier League</dd>
<dt>Data</dt>
<dd><span class='timestamp' data-value='1466877600' data-format='d mmmm yyyy'>25 giugno 2016</span></dd>
<dt>Game week</dt>
<dd>14</dd>
<dt>calcio di inizio</dt>
<dd>
<span class='timestamp' data-value='1466877600' data-format='HH:MM'>20:00</span>
(<span class="game-minute">FP'</span>)
</dd>
</dl>
</div>
<div class="details clearfix">
<dl>
<dt>Stadio</dt>
<dd>Borisov Arena (Barysaw (Borisov))</dd>
</dl>
</div>
</div>
<div class="container right">
<div class="logo">
<a href="/teams/belarus/fc-vitebsk/204/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/204.png" alt="FC Vitebsk" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
in particular the tab calcio di inizio - game week - stadio
Actually I've tried this regex: <div[^<>]*class="clearfix"[^<>]*>(?<content>.*?)
but when I test it on https://regex101.com/ I can't run the regex.
I think that the class of the div is associated on multiple divs, so this could be the problem.
And also the doesn't have any class for take it, any idea?
If you add an id to the div you want to get the contents of (for example "myDiv"), you could run the following javascript function to return it's HTML contents:
document.getElementById("myDiv").innerHTML
I am not exactly sure if this is what you want, since its not regex, but if so, I hope this helps!
This question is similar to one I asked earlier, but this time I am trying to achieve the layout using a different approach: grids, not block-grids.
I read ZURB's article on How to bridge rows in Foundation, but the end result deviates from my expectation. There is no margin between the first and the second row. So how do I get that margin to work, that you see in the picture at the article?
This is what I got so far: http://jsfiddle.net/NPUHy/
First approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
Second Approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
add a class to the row div<div class="row custom">, and then add a padding to the class
.row .custom {
padding-bottom: 10px;
}
updated fiddle http://jsfiddle.net/NPUHy/1/
I have this html page
<page>
<div class="results-list">
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
</div>
</page>
and Inside each "item paid-featured-item", I have this:
<div class="item paid-featured-item">
<div class="somethign">
<div class="title">
This is the title
</div>
</div>
<div class="anotherthing">
</div>
</div>
I want to extract the title using xpath.
what I have tried
Container = "//div[#class='results-list']"
for item in Container:
title = "//div[#class='title']/text()"
I get 8 titles but each one is the title of the first item.
i am sure that is because i used //
what should I do please?
first
I don't want to use css selectors because it is not allowed in my work
second
I don't want to use class="something" because this div not always exist in my page.
third
i am using scrapy with python
fourth
appreciate your help
Say your page looks like (page.html):
<page>
<div id="results-list">
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 1</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 2</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 3</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 4</div>
</div>
<div class="anotherthing"></div>
</div>
</div>
</page>
To extract each title, you do:
from scrapy.selector import Selector
sel = Selector(text=open('page.html').read())
container = sel.xpath('//div[#id="results-list"]')
items = container.xpath('.//div[#class="item paid-featured-item"]')
for item in items:
# *extracted* is a single-item list containing the title.
extracted = item.xpath('.//div[#class="title"]/text()').extract()
title = extracted[0]
print title
This will output:
Title 1
Title 2
Title 3
Title 4