Using Ajax to replace a div with a partial in Rails - javascript

I'm following Ryan Bates' Railscast #136 and trying to use AJAX to replace a div ('#inviteform1') with a partial ('thankyou') after a form submission. For some reason, when the form is submitted, it's not working -- instead a blank screen appears, and the URL redirects to localhost:3000/inviterequests. What am I missing?
inviterequests_controller
def create
#inviterequest = Inviterequest.new(params[:inviterequest])
respond_to do |format|
format.js
end
end
inviterequests/create.js.erb
$("#inviteform1").hide().after('<%= j render("thankyou") %>')
inviterequests/_form.html.erb -- includes the div to be replaced
<%= simple_form_for(#inviterequest, html: { class: 'form-horizontal'}) do |f| %>
<% if #inviterequest.errors.any? %>
<div id="error_explanation">
<h3><%= pluralize(#inviterequest.errors.count, "error") %> prohibited this inviterequest from being saved:</h3>
<ul>
<% #inviterequest.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<!-- INVITE BOX CONTENT -->
<div class="invitebox">
<div class="invitebox-inner">
<div id="inviteform1">
<br> <br> <br>
<h5> INDIAN WEDDING <BR> PLANNING JUST GOT EASIER </h5>
<%= image_tag("smalldivider.png") %>
<h5> REQUEST AN INVITE </h5>
<div class="field">
<%= f.input :email, :placeholder => 'enter your email, please', label: false %>
</div>
<div class="actions">
<%= f.submit "SUBMIT", class: "btn btn-primary btn-special", remote: true %>
</div>
</div>
</div>
</div>
<% end %>
inviterequests/_thankyou.html.erb -- the partial to replace the div
<div id="thankyou">
<br> <br> <br>
<h3>THANK YOU </h3>
<h4> We are working hard to launch soon <br> and will be in touch. </h4>
<%= image_tag("smalldivider.png") %>
<p class="smallcaps"> <br> SHARE WITH FRIENDS IN THE MEANTIME </p>
<div class="socialbuttons">
<div class="twitter">
<%= link_to (image_tag("twitter2.png")), "https://twitter.com/intent/tweet?screen_name=namastewedding&text=is%20making%20Indian%20wedding%20planning%20easy.%20I%20just%20requested%20my%20invitation.%20%23indianwedding%20www.namastewedding.com", :target => '_blank' %>
</div>
<div class="facebook">
<%= link_to (image_tag("facebook2.png")), "https://www.facebook.com/pages/Namaste-Wedding/359192570873560" %>
</div>
</div>
</div>
LOGS
Started POST "/inviterequests" for 127.0.0.1 at 2013-08-29 22:08:39 -0400
Processing by InviterequestsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"pqDBzdaYKuOfjuVo1ovHvrQJTTrsUptAcQekCn4X+Ho=", "inviterequest"=>{"email"=>"foobar#gmail.com"}, "commit"=>"SUBMIT"}
Completed 406 Not Acceptable in 1ms (ActiveRecord: 0.0ms)

It seems that you should use remote: true in simple_form_for instead of f.submit.
Such as
<%= simple_form_for(#inviterequest, remote:true, html: { class: 'form-horizontal'}) do |f| %>

Related

Replacing text with Jquery works with class but not id

So for the view page I've tried <div id= <%= dom_id(Video.find(x.id)) %>> <%= x.get_upvotes.size %> </div>
For the upvote.js.erb page I've tried Rails.$('#<%=dom_id(Video.find(#video.id))%>').innerHTML = ("<%= j (render partial: 'book', locals: { book: #video }) %>")
On the JS page console.log('#<%=dom_id(Video.find(#video.id))%>')
gives me an output of #video_12
And on the view page <% puts dom_id(Video.find(x.id)) %> gives me an output of video_12
So I'm not sure where I'm going wrong. Any help is much appreciated.
Routes
resources :videos do#, only: [:index, :show] do
member do
put "upvote", to: "videos#upvote"
put "downvote", to: "videos#downvote"
end
end
_book.html.erb
<p> Title: <%= book.get_upvotes.size %> </p>
upvote.js.erb
Rails.$('.random-book')[1].innerHTML = ("<%= j (render partial: 'book', locals: { book: #video }) %>")
console.log('#<%=dom_id(Video.find(#video.id))%>')
console.log(Rails.$('.random-book')[0])
def upvote
def upvote
#video = Video.find(params[:id])
#ip = request.remote_ip
#was_it_upvoted = Ipaddresstracker.find_by(ipaddress: #ip, videoid: #video.id)
if #was_it_upvoted
#video.downvote_by User.first
#was_it_upvoted.delete
else
Ipaddresstracker.create(:ipaddress => #ip, :videoid => #video.id)
#video.vote_by voter: User.first, :duplicate => true
end
end
_index.html.erb
<div class="container">
<% #videos.each do |x| %>
<p> <div class="child">
<video controls width="310" height="230" src="<%= x.file %>"></video>
<p> <%= x.title %> </p>
<div>
<%= link_to upvote_video_path(x), method: :put, remote: :true, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-up"></span>
Upvote
<div class="random-book" id= <%= dom_id(Video.find(x.id)) %> > <%= x.get_upvotes.size %> </div>
<% end %>
<div>
<br><br>
<% if user_signed_in? %>
<p> Contributor: <%= x.contributor %> </p>
<p> Email: <%= x.email %> </p>
<p> Phone: <%= x.phone %> </p>
<p> <%= link_to 'Destroy', x, method: :delete, data: { confirm: 'Are you sure?' } %> </p>
<% end %>
</div>
</div>
</div> </p>
<% end %>
</div>
i think you need to add quotes
instead of
<div class="random-book" id= <%= dom_id(Video.find(x.id)) %> ></div>
do:
<div class="random-book" id="<%= dom_id(Video.find(x.id)) %>" ></div>

How to create jQuery function for replying nested commens in Rails

How to create//change my jQuery function in create.js.erb file for creating nested comments like in the sreenshot. While creation comment using Js from create.js.erb helper method doesn't call? How to fix that?
Comments_helper.rb
module CommentsHelper
def comments_tree_for(comments)
comments.map do |comment, nested_comments|
render(comment) +
(nested_comments.size > 0 ? content_tag(:div, comments_tree_for(nested_comments), class: "replies") : nil)
end.join.html_safe
end
end
Index.html.erb
<div class="jumbotron">
<div class="container">
<h1>Join the discussion</h1>
<p>Click the button below to start a new thread:</p>
<p>
<%= link_to 'Add new topic', new_comment_path, class: 'btn btn-primary btn-lg' %>
</p>
</div>
<%= comments_tree_for #comments %>
</div>
_commnet.html.erb
<div id="comment-cont_<%= comment.id %>" class="well">
<h2><%= comment.title %></h2>
<p class="text-muted"><%= comment.root? ? "Started by" : "Replied by" %> <strong>Alex Petrov </strong> on
<%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p>
<% 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><div id="reply-comment_<%= comment.id%>"><%= link_to 'reply', new_comment_path(comment.id), remote: true %></p></div>
<% end %>
</div>
create.js.erb
$('#reply-comment_<%= #comment.parent_id %>').hide();
$("#comment-cont_<%= #comment.id %>").prepend('<%= j render #comment %>');

How to filter search form drop down menu in Rails?

I'm trying to filter selected options from 3 dropdown menus.
Here are my models:
class Profile < ApplicationRecord
belongs_to :user
has_and_belongs_to_many :skills
has_and_belongs_to_many :jobs
has_and_belongs_to_many :industries
end
and
class Industry < ApplicationRecord
has_and_belongs_to_many :profiles
end
and
class Job < ApplicationRecord
has_and_belongs_to_many :profiles
end
and
class Skill < ApplicationRecord
has_and_belongs_to_many :profiles
end
Views
profiles/index.html.erb
I list all 3 drop down menus
<section class="top-search">
<div class="container">
<%= form_tag #filter, :method => :get do %>
<%= select_tag "skills_id", options_from_collection_for_select(Skill.all, "id", "name"), prompt: "Specialized Skills" %>
<%= select_tag "industries_id", options_from_collection_for_select(Industry.all, "id", "name"), prompt: "Industries" %>
<%= select_tag "jobs_id", options_from_collection_for_select(Job.all, "id", "name"), prompt: "Job Functions" %>
<%= submit_tag "Filter", name: nil, class:"btn btn-primary" %>
<% end %>
</div>
</section>
And in the same page below the above section, I have another section where I want to display the filter result..
<section class="search-result">
<div class="container">
<div class="row flex-container">
<% #profiles.each do |profile| %>
<div class="col-md-5 mentor-profile">
<div class="media">
<div class="media-left">
<%= link_to profile do %>
<%= image_tag profile.avatar.url(:thumb) %>
<% end %>
</div>
<div class="media-body">
<h4 class="media-heading">
<%=link_to profile do %>
<%= "#{profile.first_name }" " #{ profile.last_name}" %>
<% end %>
</h4>
<strong>Works at <%= profile.company %></strong>
<p><%= profile.city %>, <%= profile.country %></p>
</div>
</div>
<div class="dvider"></div>
<div class="profile-section">
<h5>SUMMARY</h5>
<p><%= profile.summary %></p>
</div>
<div class="profile-section">
<h5>SPECIALIZED SKILLS</h5>
<p><%= profile.skills.map(&:name).join(', ') %></p>
</div>
<div class="profile-section">
<h5>CRITERIA MET</h5>
<p>NEED TO WORK ON IT....</p>
</div>
</div>
<% end %>
</div>
</div>
</section>
In Profiles Controller I defined a filter method:
def filter
#profiles = Profile.all
#profiles = Profile.joins(:skills).where('skills.name = ?', params[:skill])
#profiles = Profile.joins(:industries).where('industries.name = ?', params[:industry])
#profiles = Profile.joins(:jobs).where('job.name = ?', params[:job])
end
It seems filters works, the urls shows this http://localhost:3000/profiles?utf8=%E2%9C%93&skills_id=13&industries_id=9&jobs_id=8
But nothing got filtered.
How would I get it to work? I have seen similar cases where filter uses JS to filter the page and append the result (in my case <section class="search-result"> section to the page).
Am I correct?

Rails:In-place editing in edit form with submit button

I want to create my edit form such that it will display the current user information simply as text not in text filed and when user click on the text it will turn into text field and user can edit his information . Changes will be reflect in data base only when user click on submit button.
Simply it is not completely in place editing and not completely like default edit form it is mixture of the behaviour of both the features.
My form looks like following .it is not complete form these are some of the fields of form.
<%= form_for #contact, :html => { :multipart => true, :class => "contact_form"} do |f| %>
<% if #contact.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#contact.errors.count, "error") %> prohibited this contact from being saved:</h2>
<ul>
<% #contact.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :f_name, "First Name" %><br/>
<%= f.text_field :f_name %>
</div>
<div class ="field">
<%= f.label :experience, "Total years of experience "%><br/>
<%= f.select :experience, (0...30),{},{:class => 'select'} %>
</div>
<div class="field">
<%= f.label :l_name, "Last Name" %><br/>
<%= f.text_field :l_name %>
</div>
<div class = "field">
<%= f.label :primary_practice_area, "Primary practice area" %><br/>
<%= f.select :primary_practice_area , MetaPracticeArea.all.collect {|p| [ p.practice_area, p.id ] } %>
</div>
<div class = "field">
<%= f.label :phone, "Phone" %><br/>
<%= f.text_field :phone %>
</div>
<div class="actions">
<%= f.submit :class => "submit_btn" %>
</div>
<% end %>
and controller and model is default.
You can try the REST_in_place gem: https://github.com/janv/rest_in_place
Check below link for in_place_editing :
http://railscasts.com/episodes/302-in-place-editing?view=asciicast

Rails help to preview text area

I am trying to create a preview for my text area:
I have tried this:
My controller:
def preview
post = Post.new(params[:post])
render :text => post.body_html
end
def new
#post = Post.new
respond_to do |format|
format.html # new.html.erb
format.xml { render :xml => #post }
end
end
And my form:
<%= form_for(#post) do |f| %>
<% if #post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% #post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :titel %><br />
<%= f.text_field :titel %>
</div>
<div class="field">
<%= f.label :body_html %><br />
<%= f.text_area :body_html %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
How should I make a preview in my form of the body_html text area?
I want to have a preview when a type something in the body_html text_area it gets previewed instant.
Is the user entering HTML that you want rendered in the preview? Or just the text as is?
I guess either way, add a div for the preview:
<div id='preview'></div>
and then using jQuery:
var $html = $('#body_html');
$html.bind('change keyup',function(){
$('#preview').html($html.val());
});

Categories

Resources