I tried to display the images in Backbone.js view page.
My show_view.js.coffee is
Myapp.Views.Checklists ||= {}
class Myapp.Views.Checklists.ShowView extends Backbone.View
template: JST["backbone/templates/checklists/show"]
render: ->
#$el.html(#template(#model.toJSON() ))
return this
My show.jst.ejs file is
<p>
<b>Title:</b>
<%= title %>
</p>
<p>
<img src="<%= how_to_show_photo_url %>" alt="No image">
</p>
Back
I am using paperclip gem. I tried using <%= photo.url %> in image tag but it is not working. How do I show the photo in image tag?
I altered the response in rails before sending it to backbone.js. I updated the photo_file_name attribute with original path of the file. I updated the code as
#checklists = Checklist.find(:all)
#checklists.map{|k,v| k.photo_file_name = k.photo.url }
Now my Json response is
{"comments":"Backbone attachment","created_at":"2013-03-12T23:41:40Z","id":16,"photo_content_type":"image/jpeg",
"photo_file_name":"/system/checklists/photos/000/000/016/original/IMG_0011.JPG?1363131700",
"photo_file_size":2714495,"photo_updated_at":"2013-03-12T23:41:40Z","title":"Test Attaachment using backbone","updated_at":"2013-03-12T23:41:40Z"}
I used photo_file_name attribute in image src tag
Any better solutions are most welcome
Related
I only see an icon, and not the real image (also on the index page).
제목:<%= #food.title %> <br> <br>
<img src="<%= #food.image %>"><br> <br>
내용:<%= #food.content %> <br> <br>
<form action="/food/edit/<%= #food.id %>"> <input type="submit" value="수정"></form>
<form action="/food/destroy/<%= #food.id %>"> <input type="submit" value="삭제"></form>
I don't understand how an image can be saved in the database. I found a method that saves a url, but I upload the image file usually. I made an input tag that has the file type. How can I save the image? I have installed carrierwave.
What is #food.image? Is it a url, or the image itself? If it is a url, <img src="<%= #food.image %>"> should work. If it is the image itself, perhaps uploaded by carrierwave, you should use <%= image_tag(#food.image) %>.
I'm not sure what your Food model looks like, but try this (since you are using CarrierWave, add .url):
<img src="<%= #food.image.url %>"><br> <br>
or:
<%= image_tag #food.image.url %>
The icon you are seeing is the default icon shown by the browser if the image path is not found.
Reference: CarrierWave ActiveRecord
Is there a functionality to render partial templates in the Beego? I used this functionality in RoR.
Ruby on Rails partials:
Partial templates - usually just called "partials" - are another device for breaking the rendering process into more manageable chunks. With a partial, you can move the code for rendering a particular piece of a response to its own file.
Example from RoR:
<!-- html.erb -->
<h1>New zone</h1>
<%= render partial: "form", locals: {zone: #zone} %>
and
<!-- _form.html.erb -->
<%= form_for(zone) do |f| %>
<p>
<b>Zone name</b><br>
<%= f.text_field :name %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
Yes, though they are not explicitly referenced as partials in the documentation, you can compose templates like you described.
From the documentation for views.
{{template "header.html"}}
Logic code
{{template "footer.html"}}
Because Beego is an MVC framework, it will automatically look for your "partials" in the views directory.
If you had another subdirectory called views/base then your partial would look like this:
{{template "base/header.html" .}}
A good reference implementation that will provide more examples in the context of a real world app, check out the wetalk project on github
Im building a simple practice Sinatra app which allows users to enter urls via a form, and once submitted the app will open each of these urls in a new table (similar to urlopener.com)
My app.rb file
require 'sinatra'
get '/' do
erb :'index.html'
end
post '/' do
urls = params[:urls]
end
My View file
<h1>Enter URLs Below </h1>
<form action="/" method="post">
<textarea rows="40" cols="50" id="urls" name="urls" ></textarea>
<br/>
<input type= "submit" value="Open 'em up!">
</form>
I am able to print the urls to the console in the post action, but am unsure how to redirect back to the index, and display each of the urls before opening them in new tabs (which I plan on using JS to do).
You don't have to redirect back to the original page (in fact, the URL hasn't changed, so redirecting doesn't make sense). Instead, you render the same template. Simply insert erb :'index.html' in the second block (post '/') as well, and put the URLs in a class variable, so that they will be available to the template:
#urls=params[:urls].split
(The split is there so you get an array of strings, rather than one long string with linebreaks.)
Finally, you add some logic to the template to check whether there are any URLs to display, and if so render them as a list:
<% if #urls && !#urls.empty? %>
<h1>URLs</h1>
<ul>
<% for #url in #urls %>
<li>
<%= #url %>
</li>
<% end %>
</ul>
<% end %>
<h1>Enter URLs Below </h1>
...etc...
I'm porting an existing app to rails that makes extensive use of stylized anchors for form submission:
<a class="lozenge-button h25 blue" href="#">
<span class="left"></span>
<span class="center">Send</span>
<span class="right"></span>
</a>
However in Rails these anchors won't work for Ajax form submission, since Rails' UJS seems to require an input tag rather than an anchor (i.e. submit_tag("Submit", remote: true)).
Is there a way to make my anchors fire the Ajax form submission? I managed to get the anchor to submit the form with the following:
$('#my_anchor').click(function() { $(this).closest('form').submit();});
... but it bypasses Ajax and does a normal form submit that reloads the page.
I ended up solving it in a way very similar to this question:
<%= f.submit id: 'hidden_submit_button', style: 'display: none;' %>
<a class="lozenge-button h25 blue" href="#" onclick="$('#hidden_submit_button').click(); return false;">
<span class="left"></span>
<span class="center">Send</span>
<span class="right"></span>
</a>
You can try this
var form = $(this).closest('form');
$.post(form.attr('action'), form.serialize());
In Rails, you add remote:true to your link helper method. Then rails_ujs, (Rails unobtrusive javascript) takes care of sending it via ajax. See The Rails Ajax Guide so your code would become (in ERB)
<%= link_to the_rails_path,remote:true,class:"lozenge-button h25 blue" do %>
<span>etc</span>
<span>etc</span>
<%end%>
I have a partial which returns results from the Amazon-ecs API (searches for books). It takes about 2.5 seconds to return values, so I want to add a spinner (and ideally hide the search button) but I've had a tough time getting it to work.
I already have javascript refreshing the partial with the results. I'd just like the button to give me a spinner (and hide the search button) until the partial finishes reloading.
Here is my main view (index.html.erb) which renders a partial of search results, each of which is added temporarily as an object in AmazonItems:
<%= form_tag amazon_items_path, :method => :get, :remote => true do %>
<p>
<%= text_field_tag :query, params[:query] %>
<span id="spinner" style="display:none">
<%= image_tag 'ajax-loader.gif' %>
</span>
<span id="search_button">
<%= submit_tag "Search" %>
</span>
</p>
<% end %>
<h1>Searching Amazon</h1>
<div id="amazon_returned">
<%= render 'amazon_returned' %>
</div>
My only JS code is in the update.js.erb file, which looks like:
$("#amazon_returned").html("<%=j render 'amazon_returned' %>");
I'm sure this is easy, but I can't get it work. Thanks!
EDIT: my partial "_amazon_returned.html.erb" looks like
<table>
<% for amazon_item in #amazon_items %>
<td> amazon_item.title </td>
...ETC...
<% end %>
</table>
You can hook into the before event to do this:
$(function() {
$("form").on("ajax:before", function() {
$("#spinner, #search_button").toggle();
});
});
Then, in your update.js.erb, add this again to toggle them back:
$("#spinner, #search_button").toggle();
Went with Dylan's answer, added the toggle to the update.js.erb and inserted the following into the view:
<script>
$(function() {
$("#search_button").click(function() {
$("#spinner, #search_button").toggle();
});
});
</script>
Very cool! Thanks again for the help.