I'm experimenting with Raphael, SVG, and rails. I want the gage to dynamically update as a progress indicator of sorts as each task is crossed off via the completed button.
Something like tasks completed/total task created.
Attached is the view in the browser and below is the show page.
<h1 class="page-header"> Getting it up</h1>
<div class="well span9 offset2">
<h2 class="page-header"><%= #list.name %></h2>
<h2 class="lead"><%= #list.description %></h2>
<div class="pull-right" id="smallbuddy" style="width:340px; height:200px;"></div>
<h3>Still Not Finished</h3>
<ul>
<% #list.tasks.incomplete.each do |task| %>
<li style="list-style:none"><%= task.description %> <%= button_to "Completed", complete_task_path(#list.id,task.id), :class =>"btn-mini" %></li>
<% end %>
</ul>
<hr>
<h3>Finished</h3>
<ul id="completed">
<% #list.tasks.completed.each do |task| %>
<li style="list-style:none; opacity:.5; text-decoration:line-through;"><em><%= task.description %></em></li>
<% end %>
</ul>
<hr>
<%= form_for [#list, #list.tasks.new] do |form| %>
<p><%= form.text_field :description %><%= form.submit %></p>
<% end %>
</div>
<span class="btn affix"><%= link_to "Back to all Installs", lists_url %></span>
<div>
</div>
<script>
var g = new JustGage({
id: "smallbuddy",
value: 27,
min: 0,
max: 100,
title: "Until Complete"
});
</script>
Do I need to manipulate the Raphael Lib? or the justgagejs lib?
Still working my way through it but some veteran advice to point me in the correct direction on how to achieve this would be helpful. Thanks in advance.
You need your rails controller to respond to the a JS request, read a little into this: Having trouble rendering Javascript in Rails question.
That way you can update your gauge in the JS returned by your controller.
Related
So I have a list of projects, and I try to make an each do in wich each of them should lead to its own project, but instead I get an error 'unexpected keyword_ensure', expecting end-of-input
, however, I keep checking them all and none seems to be missing.
<h1 id=title>Projects</h1>
<div id="post_wrap" class="skiny_wrap">
<% #projects.each do |project| %>
<div class="post">
<h2 class="name"><%= project.name %> </h2>
<p class="description"><%= project.description %> </p>
<% if project.has_photo? %>
<%= link_to project.name, project do %>
<div class="img_container" style="background-image: url(/photo_store/<%=project1.id%>.<%=project1.extension%>)"></div>
<% end %>
<%else%>
<p> theres nothing here </p>
<%end%>
<p class="category"><%= project1.category %> </p>
<p class="date"><%= project1.created_at.strftime('%A, %B %d') %> </p>
<hr>
</div>
<%end%>
<% end %>
</div>
What is going wrong? I can imagine one, is that that is not how you are meant to link to show however it is what my investigation lead to, please help me out.
<br><br>
<h2><%=#project.name%></h2>
<br>
<%=#project.link%>
<br><br>
<%=#project.description%>
<br><br>
Theme: <%=#project.category%>
<br><br>
<%= link_to "Edit", edit_post_path(#project) %>
<%= link_to "Delete", post_path(#project), method: :delete, data:{ } %>
That is the Erb to the show, as you can see is very simple..
So I am trying to use Lightbox2 on my application. I installed the gem and followed all the steps, but having trouble figuring out where to call it in the application.
This is my post index
<div class="container">
<div id="profuploads">
<div id="posts" class="transitions-enabled">
<% #posts.each do |post| %>
<div class="box panel panel-default">
<%= link_to image_tag(post.image.url(:medium)), post %>
<div class="panel-body">
<strong><%= post.user.username if post.user %></strong><br/>
<%= post.description %>
<% if post.user == current_user %>
<div class="actions">
<%= link_to 'Edit', edit_post_path(post) %>
<%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
This is my post show
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="panel panel-default">
<div class="panel-heading center">
<%= image_tag #post.image.url, height: '300' %>
</div>
<div class="panel-body">
<p><strong><%= link_to(#post.user.username.capitalize, user_path(#post.user.id)) if #post.user %></strong></p>
<p><%= #post.description %></p>
<div class="votes">
<strong>VIEWS</strong>
<%= #post.hits %>
<div class="votes">
<%= link_to like_post_path(#post), method: :put do%>
<button type="button" class="btn btn-info" aria-label="Left Align">
<span class="glyphicon glyphicon-thumbs-up glyphicon-align-center" aria-hidden="true"></span>
<span class="badge"><%= #post.get_upvotes.size %></span>
</button>
<%end%>
</div>
<% if #post.user == current_user %>
<%= link_to 'Edit', edit_post_path(#post) %>
<% end %>
</div>
</div>
</div>
</div>
With Lightbox do I need to just git rid of my post show page altogether?
Lightbox is a javascript library which needs proper html markup in order to do it's work. Your show view looks good except it does not include the markup Lightbox looks for.
From Lightbox Getting Started guide:
Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
When Lightbox initializes, it looks for any image tags that contain data-lightbox attribute and hooks its handlers to them. You need to provide this attribute:
<%= image_tag #post.image.url, height: '300', "data-lightbox" => #post.image.url %>
This should make Lightbox pick up your images.
I currently have a link to tag which should wrap around all the content within it, but currently it's not doing that. It's wrapping around the code until it hits another div with a rails query inside it?
index.html.erb
<% #posts.each do |post| %>
<div class="widget" >
<%= link_to post do %>
<div class="image b-lazy" data-src="<%= post.image %>">
</div>
<div class="caption">
<h4><%= post.title %></h4>
<p>by <%= post.affiliate %></p>
</div>
<!-- LINK TO TAG ENDS HERE FOR SOME REASON -->
<div class="caption-top">
<% post.categories.each do |category| %>
<%= link_to category_path(category) do %>
<div class="tag <%= category.name %>"><%= category.name %></div>
<% end %>
<% end %>
</div>
<% end %>
</div>
Any help is appreciated!
Jonathan
Two things:
You are using link_to inside another call to link_to. That is probably not what you want.
The result of a block will be what you return from a block, normally the last line. Take a look at this question for a solution.
I have created commenting system to provide functions like creating comments and replying them.
I used http://www.sitepoint.com/nested-comments-rails/ guide. Worked just perfect. But in this example to reply to some comment it goes to other path, that is what I want to avoid.
Code so far:
Advertisement#show here I want to create reply to comment.
<%= comments_tree_for #comments %>
<h1>New comment</h1>
<%= render 'comments/form' %>
_comment.html.rb
<div class="well">
<h2><%= comment.title %></h2>
<p class="text-muted"><%= comment.root? ? "Started by" : "Replied by" %> <strong><%= comment.author %></strong> on
<%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p>
<blockquote>
<p><%= comment.body %></p>
</blockquote>
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<% if comment.leaf? %>
<small class="text-muted">There are no replies yet - be the first one to reply!</small>
<% end %>
<p><%= link_to 'reply', new_comment_path(comment.id) %></p>
<% end %>
</div>
_form.html.erb
<%= form_for(#comment) do |f| %>
<% if #comment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
<ul>
<% #comment.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= f.hidden_field :advertisement_id, :value => #advertisement.id%>
<%= f.hidden_field :user_id, :value => current_user.id%>
<%= f.hidden_field :parent_id %>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: 'form-control', required: true %>
</div>
<%= f.submit class: 'btn btn-primary' %>
<% end %>
Is there any trustworthy guide to help me ?
The link_to 'reply', new_comment_path(comment.id) line creates a hyperlink to new comment page and when clicked it takes you to next page to create the comment. Instead you can replace it with a div containing the form the toggles and submits new convo from the same page. Bootstrap comes handy here.
A Mock up of the idea: http://jsfiddle.net/bpya4fce/1/
You can build up using this idea. Hope this helps :)
P.S: Make sure that you fetch the variables required for the form in the action of view where you embed the form, i.e if you're embedding the form in show.html.erb, ensure the necessary variables are fetched in the show action/method of controller. In the earlier scenario, it'll be fetched in the new action of the CommentsController.
<div class="container">
<blockquote>
<h2>Posted Comment</h2>
Lorem Ipsum. You can reply to this below.
</blockquote>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
Click to reply
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
### The comment form comes here ###<br/>
### render :partial => 'comment/form'
</div>
</div>
</div>
</div>
Not sure if this is what you wanted. Hope this example code gives you some idea.
Be sure to complete the code and test it :)
_comment.html.rb
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<% if comment.leaf? %>
<small class="text-muted">There are no replies yet - be the first one to reply!</small>
<% end %>
<!-- HERE adding a hidden DIV that contains a form. -->
<div class='hidden-reply-form-<%= comment.id%>'>
<%= render partial: 'comments/form', locals: {comment: Comment.new} %>
</div>
<p><%= link_to 'reply', new_comment_path(comment.id), class: 'reply', id: comment.id %></p>
<% end %>
</div>
<script>
// HERE use reply link to toggle the hidden div.
$(function(){
$(".reply").click(function(){
// toggle replying div.
// .....
});
})
</script>
I'm trying to display a simple collapsible set from a rails app. It works perfectly the first time, giving me the output below.
However, when I go back to the page (via the "Save changes" form submit), additional labels are appearing, and I can't work out why:
My index.html.erb file is as follows:
<div data-role="page" data-url="<%= request.path %>">
<div data-role="header">
<h1> CB </h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<% #gr.each do |g| %>
<div id=" <%= g %>" data-role="collapsible">
<h3> <%= g %> </h3>
<p>
<%=form_tag "/checkboxen", method: :get do %>
<% #gr2.each do |g2| %>
<%= check_box_tag "#{g}_#{g2}" %>
<%= label_tag "#{g}_#{g2}",g2 %>
<% end %>
<%= submit_tag %>
<% end %>
</p>
</div>
<% end %>
</div>
</div>
While my (very simple) checkboxen_controller.rb is this:
class CheckboxenController < ApplicationController
def index
#gr=["one","two","three"]
#gr2=["a","b","c"]
end
end
As you can probably guess, I'm a newbie to this, and can't work out why it's happening (if it matters, I've turned turbolinks off, and have no unusual javascript in the system).
I've found a work-around: instead of using <%= label_tag %> I explicitly enclosed the check_box_tag in a <label> ... </label>. Why the original didn't work is something I still haven't figured out.