I currently use a simple EJS template to display blog posts:
<main>
<% results.forEach(function(results){ %>
<article>
<section>
<h2><%= results.title %> </h2>
<p>
<%= results.body %>
<label for="<%= results.id %>" class="margin-toggle sidenote-number"></label>
</p>
<input type="checkbox" id="<%= results.id %>" class="margin-toggle"/><span class="sidenote"><%= results.date%></span>
</section>
</article>
<% }) %>
I would like to trim the date field
<%= results.date%>
I did try results.date.substring(1,10) but it returns substring not defined.
May be results.date is not string. You should convert date value to string
<%= results.date.toString().substring(1,10)%>
Or:
<%= '' + results.date.substring(1,10)%>
Try
String(results.date).substring(_,_)
It should work, I had the same issue
String(results.date).slice(_,_)
Worked for me in this situation.
I hadn't realized at first that my date was not a string and thus needed to be casted as one. MYSQL was inserting -0400 GMT EASTERN TIME and wanted to remove that portion, thus my need for this.
Related
I need the following HTML output exactly as shown below:
<section id='option1'>
<a href='#option1'><h6>Option1</h6><span>></span></a>
<div class='content'>Option1 content...</div>
</section>
I am using a Ruby block to create multiple sections like the one shown above in order to build an accordion UI. However, the problem is that the <span> tag won't nest inside the <a> tag properly. I have checked out other SO queries on the subject, but can't seem to find a solution.
What I hope to end up with is a Ruby block that looks something like this:
<% %w[option1 option2].each do |act| %>
<%= tag.section do %>
<%= link_to("#{act}".capitalize, "##{act}", {class: 'centered', data: { turbo_frame:"content"}}) do %>
<%= tag.h6 act do %>
<%= tag.span raw ">" %>
<% end %>
<% end %>
<% end %>
<% end %>
But I get a undefined method 'stringify_keys' for "option1":String
Can someone help me construct a nested content_tag that puts all the required elements in the right place?
Ok, so with some fiddling with the HTML structure, I came up with the following that works:
<div id='accordion'>
<% %w[option1 option2 ... optionN].each do |act| %>
<%= tag.h2(id:"accordion_header", class: "ui-accordion-header") do %>
<%= link_to("#{act}".capitalize, "#{act}") %>
<% end %>
<%= tag.div(id: "#{act}", class: "ui-accordion-content") do %>
<%= render "/sidebars/content/#{controller_name}/#{act}", formats: :html, handlers: :erb %>
<% end %>
<% end %>
</div>
<script>
$("#accordion").accordion();
</script>
I still haven't figured out how to get the anchor tags to respond to the click event and render the appropriate content via turbo-frames yet, so feel free to comment on how to do that. The documentation for Turbo is (at the present) woefully inadequate.
<% var percentage = (data.skills[i].rating / 10) * 100 %>
<div class="progress">
<% var style = `style=width: percentage%` %>
<div class="progress-bar color-1" role="progressbar" aria-valuenow="%= percentage %>"
aria-valuemin="0" aria-valuemax="10" <%= style %>>
<span><%= percentage %>%</span>
</div>
</div>
You need to use <%- for unescaped strings instead of <%= for style to work <%- style %>.
You forgot a < in front of %= here aria-valuenow="%= percentage %>
Also i'm not sure what you think this does style=width: percentage% since percentage% is just a string which will not be replaced by ejs engine.
So the correct code should look like bellow:
<% var percentage = (5 / 10) * 100 %>
<div class="progress">
<% var style = `style="width: ${percentage}px"` %>
<div class="progress-bar color-1" role="progressbar" aria-valuenow="<%= percentage %>"
aria-valuemin="0" aria-valuemax="10" <%- style %>>
<span><%= percentage %>%</span>
</div>
</div>
You can paste the code in this playground to see what the output is.
Here is my EJS code:
<form action="/" method="POST">
<% items.forEach((item)=>{ %>
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onchange="this.form.submit()">
<p><%= item.name %></p>
</div>
<% }) %>
</form>
And here is the app.js:
app.post('/',(req,res)=>{
console.log(req.body.checkbox);
})
My questions are:
1) Why does it only log the value of the selected checkbox (assumed that there are 3 items) instead of 3 values, is it because of the post method only post the checkbox's value that has the property checked == true?
2) If I add another checkbox like below, why does it return undefined if I try to console.log(req.body.item_id)?
<form action="/" method="POST">
<% items.forEach((item)=>{ %>
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onchange="this.form.submit()">
<p><%= item.name %></p>
<input type="checkbox" name="item_id" value="<%=item._id%>">
</div>
<% }) %>
</form>
3) I've tried to do the same thing above but this time it is using input type of text. Why does the console.log(req.body.item_id) show 3 values instead of 1 (which corresponds with the selected checkbox like in question 1)?
<form action="/" method="POST">
<% items.forEach((item)=>{ %>
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onchange="this.form.submit()">
<p><%= item.name %></p>
<input name="item_id" value="<%=item._id%>">
</div>
<% }) %>
</form>
All response are appreciated. Thank you!
That is the default behaviour of the checkbox, it only gets
passed as data if its checked, if it doesn't get passed, we can
assume it wasn't checked
However if you still want the checkbox in data even if it was not checked, one hack would be
Create a hidden element with same name as your checkbox & set value as 'off'
Before submit, if the checkbox is checked, disable the hidden input element
this will give your checkbox value 'on' when checked & 'off' when its not
As mentioned above, it will only added to formdata if its
checked, when its not checked, the element is not added to formdata
at all, so you will get undefined if its not checked
Again this is default behaviour of input types, the reason it
does not do same for checkbox is because, maybe you are only
selecting 1 checkbox with same name before submit, if you do select
multiple checkbox with same name in checkboxes, you'll get same
result for checkboxes too, but due to the reason mentioned in first
answer, it only get's us the element selected which is 1 in your
case
I haven't enabled Search on SilverStripe before, but it seems pretty easy. I've followed steps from 2 other projects (although they are 3.5 version projects but not sure that makes a difference or not) that have search enabled as well as the tutorial offered on SilverStripe's site, and for some reason, I'm getting asset folder items (i.e. images) in my search results. It only seems to happen if I click to search and nothing has been entered into the search field.
There should be no asset items returned at any time for search, and if there is no search query, then there should be a message saying nothing was entered or something. I noticed that using the default $SearchForm setup provided by the basic install gives me the desired results, but not for the form I'm using (which does work on 2 other SilverStripe sites--I checked and confirmed).
I'm not sure what I'm missing? I feel like everything is done correctly, and I would like to use the setup I have now to give me more styling ability:
From _config.php:
FulltextSearchable::enable();
From my Header.ss file:
<!-- SEARCH BAR -->
<form class="navbar-form navbar-left nav-right-left search-form" id="SearchForm_SearchForm" action="/home/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
<fieldset style="font-size: 0;">
<div class="field text nolabel search-holder">
<input name="Search" placeholder="Search" class="form-control search-field text nolabel active search-box" />
</div>
<div class="ja-search-box">
<button class="icon search-button smiths-search-btn" type="submit"><i class="glyphicon glyphicon-search pull-right"></i></button>
</div>
</fieldset>
</form>
The Search Results page:
<div class="main" role="main">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="Content" class="searchResults">
<h1 class="brand-red">$Title</h1>
<% if $Query %>
<p class="searchQuery">You searched for "{$Query}"</p>
<% end_if %>
<% if $Results %>
<ul id="SearchResults">
<% loop $Results %>
<li>
<h4>
<a href="$Link">
<% if $MenuTitle %>
$MenuTitle
<% else %>
$Title
<% end_if %>
</a>
</h4>
<% if $Content %>
<p>$Content.LimitWordCountXML</p>
<% end_if %>
<a class="readMoreLink" href="$Link" title="Read more about "{$Title}"">Read more about "{$Title}"...</a>
</li>
<% end_loop %>
</ul>
<% else %>
<p>Sorry, your search query did not return any results.</p>
<% end_if %>
<% if $Results.MoreThanOnePage %>
<div id="PageNumbers">
<div class="pagination">
<% if $Results.NotFirstPage %>
<a class="prev" href="$Results.PrevLink" title="View the previous page">←</a>
<% end_if %>
<span>
<% loop $Results.Pages %>
<% if $CurrentBool %>
$PageNum
<% else %>
$PageNum
<% end_if %>
<% end_loop %>
</span>
<% if $Results.NotLastPage %>
<a class="next" href="$Results.NextLink" title="View the next page">→</a>
<% end_if %>
</div>
<p>Page $Results.CurrentPage of $Results.TotalPages</p>
</div>
<% end_if %>
</div>
</div>
</div>
</div>
</div>
By default, the full text search will search array('SiteTree', 'File')
http://api.silverstripe.org/en/3.1/class-FulltextSearchable.html
I would try changing your FulltextSearchable::enable(); line to FulltextSearchable::enable(array('SiteTree'));
I haven't tried this before and am not sure if it will work.
I am having a bit off difficulty implementing the ransack gem I have a pages controller with an index action and post controller also with an index action. However when I perform a search in the index action of the pages controller (pages#index) the results are rendered in the index action of the post controller(posts#index). Does this mean i can only search from within the views of a particular resource or am I making a mistake ?
pages#index
def index
#q = Post.search(params[:q])
#posts = #q.result(distinct: true)
end
pages#index
<%= search_form_for #q do |f| %>
<div class="field">
<%= f.label :title_cont %><br>
<%= f.text_field :title_cont, :class => "input text" %>
</div>
<div class="actions">
<%= f.submit "Search"%>
</div>
<% end %>
<%= search_form_for #q,:url=>pages_path do |f| %>
<div class="field">
<%= f.label :title_cont %><br>
<%= f.text_field :title_cont, :class => "input text" %>
</div>
<div class="actions">
<%= f.submit "Search"%>
</div>
<% end %>
Modify the code in the search form like this. It will work now.