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
Related
Ruby on Rails 4.1
The form is placing the parameters into an array when POST is done. I am making a script to auto fill the billing address the same as the shipping address. When the script runs it is assigning the values as html values.
How do you put these values into the payment array being sent?
The log where cc_name and ship_name are outside the payment array, I want them inside:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"x", "cc_name"=>"Bobby", "payment"=>{"telephone"=>"555", "email"=>"drfernandez1#yahoo.com", "address1"=>"641 W Rt 66", "address2"=>"", "city"=>"Glendora", "state"=>"CA", "postal_code"=>"91740", "country"=>"USA", "cc_type"=>"Visa", "cc_number"=>"5555555588884444", "ccv"=>"321", "expires_on(1i)"=>"2014", "expires_on(2i)"=>"9", "expires_on(3i)"=>"1", "ship_address1"=>"641 W Route 66", "ship_address2"=>"", "ship_city"=>"Glendora", "ship_state"=>"c", "ship_postal_code"=>"91740", "ship_country"=>"u", "card_holder_auth"=>"1", "charge_auth"=>"1", "name_auth"=>"David Duke", "date_auth"=>"7"}, "billingtoo"=>"on", "ship_name"=>"Bobby", "commit"=>"Send Payment"}
The form (minus clutter):
<%= form_for #payment do |f| %>
<%= render 'shared/payment_error_messages' %>
<h1>Fill in all blank areas with payment information:</h1>
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Applicant Information</h3>
</div>
<div class="panel-body">
<%= f.label :cc_name, "Name as it appears on credit card:" %><br>
<%= f.text_field :cc_name, class: "input-lg", :name => "cc_name" %> <%#= #payment.errors.get(:cc_name) %>
<%= f.label :telephone, "Telephone Number:" %><br>
<%= f.text_field :telephone, class: "input-lg" %>
...
<div class="panel-body">
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)"><em>Shipping Address is the same as the Billing Address</em>
<p>Please Note: This cannot be a P.O box address</p>
<%= f.label :ship_name, "Name:" %><br>
<%= f.text_field :ship_name, class: "input-lg", :name => "ship_name" %>
<%= f.label :ship_address1, "Address 1:" %><br>
<%= f.text_field :ship_address1, class: "input-lg" %>
...
<%= f.submit "Send Payment", class: "btn btn-lg btn-primary", id: "commit" %>
</div>
</div>
</div>
<% end %>
<br/>
<%= link_to 'Back', session[:last_page] %>
</div>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.ship_name.value = f.cc_name.value;
}
}
</script>
You are overwriting the field's name:
:name => "cc_name"
That's the reason why it is sent outside of the array. Try removing the :name assigning:
<%= f.text_field :cc_name, class: "input-lg" %>
and
<%= f.text_field :ship_name, class: "input-lg" %>
I have this as Javascript code for my Ticket Model.
$(document).ready(function() {
$('#submitForm').click(function(e) {
$('#form1').submit();
$('#form2').submit();
});
});
On my ticket edit view, i have both ticket and its comments to update. Ticket form its named form1 and comment form is named form2. If I only have form1 on my javascript code, it updates perfectly, when I add form2 only form2 updates, so only the comment gets added, the Ticket Atributes (from form1) are not being updated.
Here is my Ticket View code (its actually a partial i'm loading on the edit view")
<%= form_for #ticket, :html => { :class => 'form-horizontal', :id => 'form1' } do |f| %>
<div class="control-group">
<%= f.label :subject, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :subject, :class => 'text_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :content, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :content, :class => 'text_area' ,:style => 'height:190px; width:655px', disabled: true %>
</div>
</div>
<div class="control-group">
<%= f.label "Assigne", :class => 'control-label' %>
<div class="controls">
<%= f.collection_select(:user_id, User.all, :id, :email) %>
</div>
</div>
<div class="control-group">
<%= f.label :department_id, :class => 'control-label' %>
<div class="controls">
<%= f.collection_select(:department_id, Department.all, :id, :name) %>
</div>
</div>
<div class="control-group">
<%= f.label :status, :class => 'control-label' %>
<div class="controls">
<%= f.select :status, options_for_select(["Open", "In Progress", "Waiting-for-Info", "Closed"]), :class => 'from-control' %>
</div>
</div>
<div class="control-group">
<%= f.label :priority, :class => 'control-label' %>
<div class="controls">
<%= f.select :priority, options_for_select([ "Normal", "High", "Immediate", "Low"]), :class => 'from-control' %>
</div>
</div>
<div class="control-group">
<%= f.label :due_date, :class => 'control-label' %>
<div class="controls">
<%= f.date_select :due_date, :class => 'date_select' %>
</div>
</div>
<% end %>
<h4>Comments</h4>
<div id="comments">
<%= render :partial => #ticket.comments %>
</div>
<%= form_for [#ticket, Comment.new], :html => { :class => 'form-horizontal', :id => 'form2' } do |f| %>
<p>
<%= f.text_area :content, :class => 'text_area' ,:style => 'height:75px; width:600px' %></p></br>
<% end %>
<%= submit_tag nil, :class => 'btn btn-primary', :id => 'submitForm' %>
Am I doing something wrong?
When you call $('#form1').submit();, the page performs an http request. What this means is the page stops executing its javascript and begins performing the actions associated with said http request. (Usually this would be an http post to the form's target, where the data from the form is sent to the server.)
To bypass this, you need to look into ajax calls. An ajax call is an "Asynchronous JavaScript and XML" call, whereby you can perform http requests through your javascript code without interrupting anything else.
Ajax is a bit much to cover in an answer, so I will point you towards some ajax documentation, and the jQuery ajax documentation. You might also want to glance at the HTTP page on wikipedia just to get a better understanding of how the web works.
In my TestimoniesController I have written a render js: line in the event that #testimony.save is not successful.
if #testimony.save
redirect_to #testimony
else
render js: "alert('Please make sure you feel out every field of the Testimonial!');"
end
Instead of rendering the alert that I write, it redirects me to the /testimonies route and just displays the string that was supposed to be rendered as javascript and nothing else. Is my JS disabled somehow?
Here is my new.html.erb file:
<h1> New Testimonial</h1>
<%= form_for :testimony, url:testimonies_path do |f| %>
<p>
<%= f.label :first_name %><br>
<%= f.text_field :first_name %>
</p>
<p>
<%= f.label :last_name %><br>
<%= f.text_field :last_name %>
</p>
<p>
<%= f.label :email %><br>
<%= f.text_field :email %>
</p>
<p>
<%= f.label :contact_number %><br>
<%= f.text_field :contact_number %>
</p>
<p>
<%= f.label :country %><br>
<%= f.text_field :country %>
</p>
<p>
<!--bunch of the same stuff -->
<p>
<%= f.submit %>
</p>
<% end %>
In order tor respond with js, you have to add remote: :true in your form_for, and submit your request as ajax
<%= form_for :testimony, url:testimonies_path, remote: :true do |f| %>
but then your
redirect_to #testimony
will not work as it only works on html format, so in that scenario replace this line with
render js "location.href = '#{testimony_path}'";
I am displaying a list of messages group by sender.
I'm also displaying a form after each group of messages so that I can reply to that particular sender.
<% #grouped_messages.each do |sender, messages| %>
<% messages.each do |msg| %>
<p><%= msg.content %></p>
<% end %>
<div class="reply-container", id='reply-container'>
<%= form_for #message do |f| %>
<%= f.text_field :content %>
<%= f.submit "Reply" %>
<% end %>
</div>
<%= link_to "Reply", '#', class: 'reply-link', id: 'reply-link' %>
<% end %>
I want to be able to show the form only when the 'Reply' link is clicked.
$(".reply-link").click(function(e){
e.preventDefault();
$('#reply-container').toggle();
$('#reply-link').toggle();
});
This doesn't work as there can only be one id on the page and all the reply-container's have the same id.
How can I specify which container to hide when the elements are dynamically generated in a loop?
you can try something like:
$(".reply-link").click(function(e){
e.preventDefault();
$(this).closest( '.reply-container').toggle();
$(this).toggle();
});
and you can remove ids: "reply-link" and "reply-container"
edit:
but you can make it better:
<div class="reply-container", id="reply-sender-#{sender.id}-container">
<%= form_for #message do |f| %>
<%= f.text_field :content %>
<%= f.submit "Reply" %>
<% end %>
</div>
<%= link_to "Reply", '#', class: 'reply-link', id: "reply-sender-#{sender.id}" %>
and then it could look like:
$(".reply-link").click(function(e){
e.preventDefault();
$("#" + $(this).attr("id") + "-container").toggle();
$(this).toggle();
});
$(".reply-link").click(function(e){
e.preventDefault();
$(this).siblings('.reply-container').toggle();
$(this).toggle();
});
Edit:
You should also separate groups into divs:
<% #grouped_messages.each do |sender, messages| %>
<div class='message_group'>
<% messages.each do |msg| %>
<p><%= msg.content %></p>
<% end %>
<div class="reply-container", id='reply-container'>
<%= form_for #message do |f| %>
<%= f.text_field :content %>
<%= f.submit "Reply" %>
<% end %>
</div>
<%= link_to "Reply", '#', class: 'reply-link', id: 'reply-link' %>
</div>
<% end %>
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());
});