I created an app following this tutorial (without scaffolding).
After I create an item I can click on it and it shows me a big list of parameters. Like here: http://s15.postimage.org/j6at9koiz/parameters.png .
The code which does that is:
<% if (todos && todos.length) { %>
<% for (var i in todos) { %>
<div class="row todo-item">
<div class="span8">
<h3><%- linkTo(todos[i].title, todoPath(todos[i].id)) %></h3>
</div>
<div class="span4"><h3><i class="icon-list-alt"></i><%= todos[i].status; %></h3></div>
</div>
<% } %>
<% } %>
To be more specific, the following line is the one which displays the links with the titles which take me to the list of the parameters for each item:
<%- linkTo(todos[i].title, todoPath(todos[i].id)) %>
Can I do something to display only some of the parameters and not the entire list which is displayed now?
Thank you!
You need to add view files for todo resource. If you're scaffolding, then geddy creates them by default. But otherwise, you have to add view files for todo in app/views/todos.
View files
_form.html.ejs
edit/new form
add.html.ejs
new resource view
/todos/add
edit.html.ejs
edit view
/todos/:id/edit
index.html.ejs
index view
/todos
show.html.ejs
show individual resource
/todos/:id
You can edit them manually. For changing how a individual todo item should appear on /todos/:id route, edit show.html.ejs
<div class="hero-unit">
<%- linkTo('Edit this todo', editTodoPath(params.id), {class: 'btn pull-right'}); %>
<h3>Params</h3>
<ul>
<li>todo.title</li>
<li>todo.property1</li>
<li>todo.property2</li>
</ul>
</div>
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.
I'm trying to get display users name from mongodb and I figured out how to do so, but now I want to design it for the admin panel and I want to display each user in a separated div
"The code below it works fine with me, all I need to know is how to set each name in a div"
here is a snippet from the ejs code
<h4>
Users </h4>
<% for(let i=0; i<Users.length; i++) {%>
<ul> <li> <%= Users[i].name %></li></ul>
<% } %>
</div>
</div>
</div>`
I am trying to get for Each to enumerate through an object's properties and show up unique results. For example I'm trying to iterate through all the messages in a server and only display those where the current user is a sender
. And while doing that I want, to pull up all the receivers, create a group for each and display every message that interacts with that receiver. However I can only get to the point where I am displaying all messages but if a receiver comes twice it will create two separate groups with the same receiver instead of one.
I've tried to enumerate through the properties, but I get an error saying that you cannot apply a for Each on an object's properties.
<% message.forEach(function(message){%>
<% message.sender.id.forEach(function(message){ %>
<% if(currentUser._id.equals(message.sender.id)) {%>
<div>
<p>Message sent to <%= message.receiver.username %></p>
<ul>
<li><%= message.text %></li>
</ul>
</div>
<% }); %>
<%}%>
<%});%>
I'm expecting a div with each receiver and its correspondence instead I get multiple groups(one group per message found with the same receiver
I think you misplaced a bracket. Please try code below.
suggested code
<% message.forEach(function(message){%>
<% message.sender.id.forEach(function(message){ %>
<% if(currentUser._id.equals(message.sender.id)) {%>
<div>
<p>Message sent to <%= message.receiver.username %></p>
<ul>
<li><%= message.text %></li>
</ul>
</div>
<%};%> //I moved a bracket from this line to the next line
<%})%>
<%});%>
I have a route that looks like this:
app.get('/Search', function (req, res) {
var searchString = req.query.SearchString;
var request = require('./cstapi')(searchString, onBody);
function onBody(body) {
res.render('index', { output: body });
}
});
and an index.ejs that looks like this:
<div id="searchDiv">
<% include ../partials/search %>
<br>
<% include ../partials/results %>
</div>
search looks like this:
<form action="./search" method="GET">
<input type="text" name="SearchString" class="form-control" >
<input type="submit" value="Search" class="form-control">
</form>
and results looks like this:
<p>Search returned the following: <%= output %></p>
I'm trying to get the search results to display in a partial view after the user submits the form. With the above I get output is not defined when attempting to render index and the subsequent partial views.
I found a work around although I'm not 100% sure this is the best way of doing it:
By adding 'null check' to output in index I can avoid the output not defined error when accessing the results partial without search results.
So index now becomes:
<div id="searchDiv">
<% include ../partials/search %>
<br>
<%if (typeof output !== 'undefined') { %>
%> <% include ../partials/results %>
<% } %>
</div>
Hopefully someone can provide a better way?
i m posting a form in geddy. i need to update my meta data according to posted data by the form, for this i have to pass post to
<%= partial('layout_header', {post: post}); %>
<div class="mainContain">
<div class="container">
<div class="wrapper">
<% console.log(post.title); %>
<%- displayFlash(flash); %>
<%- render(); %>
</div>
</div>
</div>
for the above implementation i need my 'post' data on application.html.ejs.
thanks
Use Session variables to pass data to header and required page. i used this for dynamic meta tags.
=========================== EDIT ======================
in controller
self.respond({
key: value,
headerTags: {
"pageTitle": "title",
"h1Tag" : "h1"
}
});
and in application.html.ejs
<%= partial('layout_header', {session: session, headerTags : headerTags }); %>