Develop Reference

Appending a form in jQuery

Im trying to append a form_for to a div with no luck, I've been through everything in the javascript console inside the div that holds the form but can't seem to find the contents to target. Please let me know if this is hard to understand and i'll try to explain myself better. I have also tried
$('.admin-right-content').innerHTML = "<%= render 'products/add_products' %>"
$(".admin-right-content").append("<%= escape_javascript(render(:partial => #add_products) %>");
$(".admin-right-content").append("<%= escape_javascript(render(:partial => add_products) %>");
$(".admin-right-content").append("<%= escape_javascript(render add_products %>");
$('.admin-right-content').append($('.add-products-form'))
The list goes on and on.
I'm a newbie to Rails, so apologies if this turns out to be something simple or some silly mistake on my end.
The partial containing the form is _add_products.html.erb.
Instead of printing the form out its actually appending the code to the div.
<div class="add-products-form">
<%= form_for #product do |form| %>
<%= form.label 'Product name' %>
<%= form.text_field :product_name %>
<%= form.label 'Type'%>
<%= form.text_field :type %>
<%= form.label 'Price' %>
<%= form.text_field :price %>
<%= form.label 'Description' %>
<%= form.text_area :description %>
<%= form.label 'Add photos' %>
<%= form.data_field :photos %>
<%= form.submit "Submit" %>
<% end %>
</div>

You can try this:
$('.admin-right-content').append($('.add-products-form').children().clone())

Error: ActionController::Unknown Format (for format.js)

I'm completing a project. I have a search field that accepts a url. Upon submit, my code scrapes data from a website and saves it in a variable. I want to use that data to automatically fill in form fields for the user on that same page.
Here's what I currently have in the view:
<%= provide(:title, "New Deal") %>
<h3 class="create">Step 1: <span class="text">Enter the wholesale URL and click add button to create a new deal.</span></h3>
<%= form_tag new_deal_path, id: "search-form", method: :get do %>
<p>
<%= label_tag(:search, "Enter the URL:") %>
<%= text_field_tag :search, params[:search] %>
<%= submit_tag "Add Deal", name: nil, class: "scrape-trigger", remote: true %>
</p>
<% end %>
<% end %>
Here's my controller action:
def new
if params[:search]
#response = Deal.search(params[:search])
respond_to do |format|
format.js
end #currently, can't get this to work.
end
#deal = Deal.new
#deal.orders.build
#user = User.new
end
And here is the form I want to fill:
<div class="manual-deal">
<%= f.label :url %><br>
<%= f.url_field :url %><br><br>
<%= f.label :title %><br>
<%= f.text_field :title %><br><br>
<%= f.label :image %><br>
<%= f.file_field :image %><br><br>
<%= f.label :retail_price_cents %><br>
<%= f.text_field :retail_price_cents %><br><br>
<%= f.label :wholesale_price_cents %><br>
<%= f.text_field :wholesale_price_cents %><br><br>
<%= f.label :minimum_bids %><br>
<%= f.number_field :minimum_bids %><br><br>
<%= f.label :estimated_delivery %><br>
<%= f.date_field :estimated_delivery %><br><br>
<%= f.label :delivery_method %><br>
<%= f.select :delivery_method, ['USPS', 'UPS', 'FedEX', 'Shyp', 'Local Pickup'] %><br><br>
<%= f.label :description %><br>
<%= f.text_area :description %><br>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
data-description="Charge"
data-amount="<%=#deal.wholesale_price_cents%>">
</script>
<% end %>
Following the advice on another question, I created a new.js.erb file in the view where I want this to happen. I thought I could fill the fields from there using:
function ready() {
$('.scrape-trigger').on("click", function() {
$('#deal_url').val(params[:search]);
$('#deal_title').val(title);
$('#deal_image').val(image);
$('#deal_wholesale_price_cents').val(price_range);
$('#deal_description').val(description);
});
};
$(document).on('ready page:load', ready)
Not quite sure about this last part. Can someone point me in the right direction? I've been stuck on this for hours and haven't found a decent solution. I've found some other resources on Ajax, but nothing that works with what I need with this scraped data.
Cheers.

I'm assuming #response has all the information you're going to need when filling out the form. (Also note that #deal and #user will not be available to new.js.erb because they are defined after you render that file.)
This .js.erb file is rendered exactly once, exactly when it is rendered. Because of that, you don't need to worry about any $(document).on('ready page:load', ready) nonsense. You don't want this code to run when the page has loaded, you want it to run when the file is rendered. Get rid of it!
You should be left with just the .val() lines. This is a fine way to go about setting the value of things, but this file has no idea what params[:search] or title is. The only variable you passed to this file is #response. Use it!
So you should end up with something like the following:
$('#deal_url').val(#reponse.url);
$('#deal_title').val(#reponse.title);
$('#deal_image').val(#reponse.image);
$('#deal_wholesale_price_cents').val(#reponse.price_range);
$('#deal_description').val(#reponse.description);

Braintree Drop-In UI requires reload to work properly

I'm just getting started with the Braintree drop-in UI. Client side is javascript, server side is ruby on rails.
My system is very simple right now. The user is given a list of invoices that pertain to them. When the invoices have not yet been paid, they can click 'pay' and be taken to a new page that includes the Braintree Drop-In UI. My issue is this: When the user is taken to the 'pay' page, the drop-in UI does not appear. If the user reloads the page, the drop-in UI appears.
Why?
Here's some relevant code. It's pretty vanilla and not done yet - just roughed in.
From invoices/index.html.erb
<td>
<% if invoice.paid %>
<%= 'Paid' %>
<% else %>
<%= link_to 'Pay', payment_path(invoice.id) %>
<% end %>
</td>
From payments_controller:
class PaymentsController < ApplicationController
skip_before_action :verify_authenticity_token
before_action :set_invoice, only: [:pay, :checkout]
def pay
Braintree::Configuration.environment = :sandbox
Braintree::Configuration.merchant_id = 'merchant id'
Braintree::Configuration.public_key = 'public key'
Braintree::Configuration.private_key = 'private key'
gon.client_token = Braintree::ClientToken.generate()
end
def checkout
nonce = params[:payment_method_nonce]
result = Braintree::Transaction.sale :amount => #invoice.amount, :payment_method_nonce => "nonce-from-the-client"
if result.success?
message='Payment processed successfully. Thank you!'
#invoice.paid=true
#invoice.save
else
message='Unable to process payment. Reason = ' + result.message
end
redirect_to invoices_path, notice: message
end
private
def set_invoice
#invoice = Invoice.find(params[:id])
end
end
pay.html.erb:
<h1>Payments</h1>
<div>
<p>Invoice #: <%= #invoice.id %></p>
<p>Date: <%= #invoice.date %> </p>
<p>Description: <%= #invoice.description %> </p>
<p>Amount: <%= #invoice.amount %> </p>
</div>
<div class="form-container radius-box glassy-bg small-10 small-centered medium-8 large-6 columns">
<h2 class="mbs">New Transaction</h2>
<%= form_tag payments_checkout_path do%>
<%= hidden_field_tag 'id', #invoice.id %>
<p>Please enter your payment details:</p>
<div id="dropin"></div>
<%=submit_tag "Pay #{#invoice.amount}$", class: "button mt1" %>
<%end%>
</div>
and layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Actionable Software</title>
<%= include_gon %>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<%= yield %>
</div>
</body>
</html>

I'm going to guess the script that populates that element isn't written in a way that works with Turbolinks.
Try opting that page or section out of turbolinks. Or just disable it completely and see if it fixes it.

I ran into the same issue in my app.. change on your index page
<%= link_to 'Pay', payment_path(invoice.id) %>
to
<%= link_to 'Pay', payment_path(invoice.id), data: { no_turbolink: true } %>
This should force the pay page to load completeley when you click through.

Rails 4 render js: redirecting to another page and displaying raw js

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}'";

Dynamically add & remove new but the same fields of a form any amount times

I have a form that has no nested models.
class UserProductsController
def new
#user_product = current_user.user_products.build
end
end
With jquery/javascript i want to add and remove new #user_product fields on the same form. This how it would look normally:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= f.submit %>
<% end %>
And I'm trying to achieve:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
---New ID(New generated ID, could be any new number in the database)
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %> # ajax style, this link removes this product entirely
----ID 3----
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %>
-----Add link------
<%= Add Another Field %> # ajax style adding
<%= f.submit %>
<% end %>
Notice the new IDs that aren't preset and the one submit button so this way more then one Product can be created at a time by a User. How do i achieve the above?
Thank you.
Answer:
Using the User.rb model you can do what James said. Here is my form that works.
<%= form_for(current_user, :url => user_products_path) do |f| %>
<%= f.error_messages %>
<%= f.fields_for :user_products do |builder| %>
<%= render "user_product_fields", :f => builder %>
<% end %>
<%= link_to_add_fields "Add a UserProduct", f, :user_products %>
<%= f.submit "Create" %>
<% end %>
_user_product_fields.html.erb
<div class="fields">
<%= f.label :product, "Product" %>
<%= f.text_field :product %>
<%= f.label :address, "Address" %>
<%= f.text_field :address %>
<%= f.label :price %>
<%= f.text_field :price %>
<%= link_to_remove_fields "remove", f %>
</div>

As others have suggested (somewhat unhelpfully), use nested forms.
You need the form to be based on the current_user object with fields_for declaration for :user_products. You will need to set the url for the form to post back to the user_product controller not the user controller using url_for and you will need to adjust the user_product controllers update and create actions to make use of params[:user] instead of params[:user_product]
If you have your accepts_nested_attributes configured properly all should be good.
BTW if you follow those railscasts you will find that the javascript to add new will not work for Rails 3.x
You should use something like this for your view helpers
module ApplicationHelper
def link_to_remove_fields(name, f)
f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end
def link_to_add_fields(name, f, association)
new_object = f.object.class.reflect_on_association(association).klass.new
fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
render(association.to_s.singularize + "_fields", :f => builder)
end
link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
end
end
and something like this for your javascript in your application.js file
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function remove_fields(link) {
$(link).previous("input[type=hidden]").value = "1";
$(link).up(".fields").hide();
}
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).up().insert({
after: content.replace(regexp, new_id)
});
}
and obviously your form_for need to be refactored to something like this
<%= form_for(current_user, :url => user_product_path) do |f| %>
<!-- add your f.fields_for :user_products here, probably in a rendered partial -->
<%end%>
That should be enough with the rails casts to get you going

Checkout this:
http://railscasts.com/episodes/196-nested-model-form-part-1
http://railscasts.com/episodes/197-nested-model-form-part-2

You can use cocoon for this.