Working on Rails 5,
I am trying to render nested form (same model) in each dynamic tab,
but now the same fomr is rendering in the all the tabs,how to render different fieldset in different tabs
views/material_masters/new.html.erb
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<% #part_locations.each.with_index do |l, i| %>
<li <%= 'class="active"' if i == 0 %>>
<%= l.location_name %>
</li>
<% end %>
<li><button type="button" class="fa fa-plus btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"></button> </li>
</ul>
<div class="tab-content">
<% #part_locations.each.with_index do |l, i| %>
<div class="tab-pane <%= 'active' if i == 0 %>" id="<%= l.location_name %>">
<%= f.fields_for :material_locations do |builder| %>
<%= render 'material_location_fields', :f => builder %>
<% end %>
<%= link_to_add_association "Add", f, :material_locations, class: "btn btn-primary btn-xs" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
views/material_masters/_material_location_fields.html.erb
<fieldset>
<div class= "nested-fields">
<div class="col-sm-3">
<%= f.label :material_location, "Material Location" %>
<%= f.text_field :mat_location,class:"form-control",required: true %>
</div>
<div class="col-sm-3">
<%= f.label :opening_stock %>
<%= f.text_field :opening_stock ,class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required: true %>
</div>
<div class="col-sm-3">
<%= f.label :reorder_qty %>
<%= f.text_field :reorder_qty, class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required:true %>
</div>
</div>
</fieldset>
model/material_master.rb
class MaterialMaster < ApplicationRecord
has_many :material_locations
accepts_nested_attributes_for :material_locations,allow_destroy: true
end
https://i.stack.imgur.com/b6Ssr.png
https://i.stack.imgur.com/69h3X.png
Hear i am trying to add location in bangalore tab i am addling mumbai location and in delhi tab i want to add one more material location but the same form is coming in the next tab
What is obviously on your code is that you have space here in a line:
<%= l.location_name %>
as you can note l .location_name can you remove the space?
Related
So I am having an issue creating a user in a modal from my navbar. I want to add the link to allow an administrator to create a new user from a link as opposed to going to users index and use the modal button there.
My nav-bar link:
<li><%= link_to "Add User", new_user_path, remote: true %></li>
My Modal so far:
found in: _create.html.erb
<%= content_tag :div, class: "modal fade", id: "createUser" do %>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<%= form_for(#user, remote: true) do |f| %>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
FORM HERE
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<%= f.submit "Create New User", :class => 'btn btn-primary' %>
</div>
<% end %>
</div>
</div>
</div>
my create.js.erb
$('#createUser').modal('hide');
$(".email").val('');
$(".password").val('');
$(".f_name").val('');
$(".l_name").val('');
$(".primary_tel").val('');
$('#table_body').prepend('<%= j render partial: 'user_row', locals: {user: #user} %>');
$('#user_row_<%= #user.id %>').hide().fadeIn(1000);
users controller / new action
def new
#user = User.new
end
User form I want to turn into a modal:
<%= form_for(user) do |f| %>
<% if user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :user_ident %>
<%= f.text_field :user_ident %>
</div>
<div class="field">
<%= f.label :f_name %>
<%= f.text_field :f_name %>
</div>
<div class="field">
<%= f.label :l_name %>
<%= f.text_field :l_name %>
</div>
<div class="field">
<%= f.label :primary_tel %>
<%= f.text_field :primary_tel %>
</div>
<div class="field">
<%= f.label :role_id %>
<%= collection_select(:user, :role_id, Role.all, :id, :name, {prompt: true}) %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I assume you want to display the modal in the index view of UsersController. Add your code in _create.html.erb to the top of users/index.html.erb. Your modal won't display unless you explicitly ask it to. Since you're rendering a form in the modal for #user, you need to define what #user is in index action.
# users_controller.rb
def index
#users = User.all
#user = User.new
end
You have specified remote:true in your link to new_user_path, you have to render a js response in the new action.
def new
#user = User.new
respond_to do |format|
format.js #Looks for `users/new.js.erb`
#other formats
end
end
Since we already have the modal template in index.html.erb, all you need to do in new.js.erb is to display the modal.
# new.js.erb
$("#createUser").modal('show');
Since you have create.js.erb ready, thats all to be done.
EDIT: If you want to place this link in the navigation bar, you should add the modal template to a partial(say layouts/_new_user_modal.html.erb) and render it in application.html.erb which is common to all the views. Also, you need to make a change to your form. Instead of
<%= form_for(#user, remote: true) do |f| %>
use
<%= form_for(User.new, remote: true) do |f| %>
This way you don't have to define #user in every action of your application (DRY).
Hope this helps!
I have the following cart view that i addapted with bootstrap.
<div class="row line_item">
<div class="col-md-4 cart-item-image" data-hook="cart_item_image">
<% if variant.images.length == 0 %>
<%= link_to small_image(variant.product), variant.product %>
<% else %>
<%= link_to image_tag(variant.images.first.attachment.url(:product)), variant.product %>
<% end %>
</div>
<div class="col-md-4 cart-item-image" data-hook="cart_item_description">
<h4><%= link_to line_item.name, product_path(variant.product) %></h4>
<%= variant.options_text %>
<% if line_item.insufficient_stock? %>
<span class="out-of-stock">
<%= Spree.t(:out_of_stock) %> <br />
</span>
<% end %>
<span class="line-item-description" data-hook="line_item_description">
<%= line_item_description_text(line_item.description) %>
</span>
</div>
<div class="col-md-1 cart-item-price" data-hook="cart_item_price">
<%= line_item.single_money.to_html %>
</div>
<div class="col-md-1 cart-item-quantity" data-hook="cart_item_quantity" valign="center">
<%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
</div>
<div class="col-md-2">
<div class="cart-item-total" data-hook="cart_item_total">
<%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
</div>
<div class="cart-item-delete" data-hook="cart_item_delete">
<%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
</div>
</div>
</div>
and the following coffeescript that goes along with it
Spree.ready ($) ->
if ($ 'form#update-cart').is('*')
($ 'form#update-cart a.delete').show().one 'click', ->
($ this).parents('.line-item').first().find('input.line_item_quantity').val 0
($ this).parents('form').first().submit()
false
($ 'form#update-cart').submit ->
($ 'form#update-cart #update-button').attr('disabled', true)
Now the delete button does not work with this cart html ( while it is working with the original view a following)
<div style="margin-top: 35px;">
<div class="row">
<tr class="line-item">
<td class="col-md-4 cart-item-image" data-hook="cart_item_image">
<% if variant.images.length == 0 %>
<%= link_to small_image(variant.product), variant.product %>
<% else %>
<%= link_to image_tag(variant.images.first.attachment.url(:small)), variant.product %>
<% end %>
</td>
<td class="col-md-4 cart-item-description" data-hook="cart_item_description">
<h4><%= link_to line_item.name, product_path(variant.product) %></h4>
<%= variant.options_text %>
<% if line_item.insufficient_stock? %>
<span class="out-of-stock">
<%= Spree.t(:out_of_stock) %> <br />
</span>
<% end %>
<span class="line-item-description" data-hook="line_item_description">
<%= line_item_description_text(line_item.description) %>
</span>
</td>
<td class="col-md-1 lead text-primary cart-item-price" data-hook="cart_item_price">
<%= line_item.single_money.to_html %>
</td>
<td class="col-md-1 cart-item-quantity" data-hook="cart_item_quantity" valign="center">
<%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
</td>
<td class="col-md-1 lead text-primary cart-item-total" data-hook="cart_item_total">
<%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
</td>
<td class="col-md-1 cart-item-delete" data-hook="cart_item_delete">
<%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
</td>
</tr>
</div>
</div>
It seems to me that the coffeescript should work in both cases!
What am i missing after i modify the view ? It seems to me that the coffeescript should perform the search in both cases...
It doesn't look like you've done anything wrong when it comes to keeping the markup for the javascript the same. My guess would be that Spree.ready ($) -> isn't actually firing. That could be caused by you removing javascript files during your view customization by accident. You should try checking your web developer console to see if there are any javascript errors like Spree not being defined or something like that.
I want make <div class="row">.
if <div class="col-md-4"> is three or more,
I want make <div class="row">.
Because I use twitter bootstrap grid view.
My View is
<% #account_products.order(created_at: :desc).each do |product| %>
<div>
<div class="col-md-4">
<div = "icons-right">
<span class = "icons-right">
<%= link_to image_tag("like.png", size: "30"),
line_items_path(product_id: product),
:class => "cart_image", method: :post %>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- edit_product_path, product.id로 했으나 id값을 전달하지 않았다. -> 전달은 매개변수로 ! -->
<li role="presentation"><%= link_to "edit", edit_product_path(product.id) %></li>
<li role="presentation"><%= link_to "destory", product, method: :delete %></li>
</ul>
</span>
</div>
<div class="fixed-size-image">
<a href = "<%= product.image_url %>" target = "blank" >
<%= image_tag(product.item.url) if product.item? %>
</a>
</div>
<div class = "brand">
<%= product.brand %>
</div>
<div class = "description">
<%= product.title %>
</div>
<div class = "price">
<%= product.price %>
</div>
<!-- line_item_path -> line_items_path class="btn btn-primary btn-lg active -->
<!-- like.png -->
</div>
</div>
<% end %>
If I understand correctly, you're trying to output a <div class="row"> for every three columns, is that right?
There are two ways to do it:
<% #account_products.order(created_at: :desc).each_with_index do |product, i| %>
<% if i%3 == 0 %>
<div class="row">
<% end %>
... (The rest of your code)
<% if i%3 == 0 %>
</div>
<% end %>
<% end %>
Or:
<% #account_products.order(created_at: :desc).in_groups_of(3) do |product_group| %>
<div class="row">
<% product_group.compact.each do |product| %>
... (The rest of your code)
<% end %>
</div>
<% end %>
---edit---
As requested, jQuery solution:
var a = $('.col-md-4');
while(a.length) {
$(a.splice(0,3)).wrapAll("<div class='row' />")
}
Trying to add stripe payments to my app, but its not connecting.
installed the stripe gem , restarted the server & added my stripe API keys (test)
Added the javascript info so it connects the my stripe account
So when i buy something enter CC details it should connect to stripe.
Have also turned off turbolinks but still does the same. What i need is a pop up from stripe to i know its working.
orders.js.coffee
jQuery ->
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
payment.setupForm()
payment =
setupForm: ->
$('#new_order').submit ->
$('input[type=submit]').attr('disabled', true)
Stripe.card.createToken($('#new_order'), payment.handleStripeResponse)
false
handleStripeResponse: (status, response) ->
if status == 200
alert(response.id)
else
alert(response.error.message)
show.html.erb
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<%= image_tag #listing.image.url %>
</div>
</div>
<div class="col-md-6">
<h3><%= #listing.name %></h3>
<p><%= number_to_currency(#listing.price) %></p>
<p><%= #listing.description %></p>
<br>
<div class="center">
<%= link_to "Buy it Now", new_listing_order_path(#listing), class: "btn btn-primary", data: { no_turbolink: true } %>
</div>
</div>
<% if current_user == #listing.user %>
<%= link_to 'Edit', edit_listing_path(#listing), class: "btn btn-link" %> |
<% end %>
<%= link_to 'Back', listings_path, class: "btn btn-link" %>
orders._form.html
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<%= image_tag #listing.image.url %>
</div>
<h3><%= #listing.name %></h3>
<h4><%= number_to_currency(#listing.price) %></h4>
</div>
<div class="col-md-8">
<%= form_for([#listing, #order]) do |f| %>
<% if #order.errors.any? %>
<div id="error_explanation" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><%= pluralize(#order.errors.count, "error") %> prohibited this order from being saved:</h4>
<ul>
<% #order.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label :address %>
<%= f.text_field :address, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :city %>
<%= f.text_field :city, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :state %>
<%= f.text_field :state, class: "form-control" %>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<%= label_tag :card_number, "Credit Card Number" %>
<%= text_field_tag :card_number, nil, { :name => nil, :'data-stripe' => "number", class: "form-control" } %>
</div>
<div class="col-md-4">
<%= label_tag :card_code, "CVC" %>
<%= text_field_tag :card_code, nil, { :name => nil, :'data-stripe' => "cvc", class: "form-control" } %>
</div>
</div>
</div>
<div class="form-group">
<%= label_tag nil, "Expiration Date" %>
<div class="row">
<div class="col-md-3">
<%= select_month nil, { use_two_digit_numbers: true }, { :name => nil, :'data-stripe' => "exp-month", class: "form-control" } %>
</div>
<div class="col-md-3">
<%= select_year nil, { start_year: Date.today.year, end_year: Date.today.year+10 }, { :name => nil, :'data-stripe' => "exp-year", class: "form-control" } %>
</div>
</div>
</div>
<div class="form-group">
<%= f.submit "Complete Order", class: "btn btn-success" %>
</div>
<% end %>
</div>
</div>
It looks like you're trying to trigger the Stripe function from a form that doesn't exist. You have several references to:
$('#new_order')
It looks like your form id is actually new listing order:
$('#new_listing_order')
But check the generated HTML, or inspect element, to be sure.
I am trying to create a button that shows/hides a div. It seems relatively easy, but whenever I click this button, it just does a refresh, and when I keep clicking it, it hides most of my page. Here is what I have so far. Also, I dont know if it matters but I am using foundation for most of the css
application.js
$(function() {
$(document).foundation();
});
$(document).ready(function() {
$('#message_button').click(function() {
$("#messages").toggle();
});
});
_userindex.html
<div class="row">
<div class="small-12 columns new-button">
<%= link_to 'New Job', new_job_path, class: 'button' %>
</div>
</div>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>Active Jobs</p>
<div class="content" data-section-content>
<% if #active.present? %>
<ul>
<% #active.each do |job| %>
<li class='panel'>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="large-6 columns">
<span id="location"><strong>location</strong>: <%= job.location %></span>
</div>
<div class="large-6 columns">
<span id="status"><strong>status</strong>: <%= job.status %></span>
</div>
</div>
<div class='light panel bottom'>
<strong>job: <%= link_to job.name, job %></strong><br>
<%= job.description %>
</div>
</div>
</div>
<div class="row job-buttons">
<div class="small-6 columns">
MESSAGES BUTTON -->>> <%= link_to 'messages', '', class: 'button small secondary', id: "message_button" %>
</div>
<div class="small-6 columns">
<%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %>
</div>
</div>
<br />
I WANT TO HIDE THIS ENTIRE DIV ---->>>> <div id="messages">
<div class="row">
<div class="small-12 columns">
<div class="panel">
<%= form_for(#message) do |f| %>
<%= f.label :body, "Description" %>
<%= f.text_area :body %>
<%= f.hidden_field :job_id, value: job.id %>
<%= f.submit 'Create message', class: 'button small secondary' %>
<% end %>
</div>
</div>
</div>
<% jobs_messages = job.messages %>
<% if jobs_messages.present? %>
<ul>
<% jobs_messages.each do |m| %>
<% if m.user_id.present? %>
<% user = m.user %>
<% else %>
<% user = m.runner %>
<% end %>
<li class='panel'>
<div class='row'>
<div class='small-12 columns'>
<p> From: <%= user.login %> </p>
<p> Body: <%= m.body %>
</div>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="empty panel">
<p>no messages at the moment</p>
</div>
<% end %>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="empty panel">
<p>no active jobs at the moment</p>
</div>
<% end %>
</div>
</section>
<section>
<p class="title" data-section-title>Completed Jobs</p>
<div class="content" data-section-content>
<% if #completed.present? %>
<% else %>
<div class="empty panel">
<p>no completed jobs yet</p>
</div>
<% end %>
</div>
</section>
</div>
I am trying to an $().click action to the link_to button with id "message_button". Whenever this button/link is clicked, I want it to show/hide the "messages" div.
I am new to jQuery, rails, and foundation, so I left most of the code just in case anything was important. But I marked the message_button and the message div to help you better find it.
2 problems:
It looks to me as though you have a bad case of the "multiple IDs"!
You are not preventing the default behaviour of the link. (so when you click it, the page refreshes or navigates away)
Problem #2 is easy: call preventDefault() (usage example below).
Problem #1 is a little trickier...
You are creating <li> content within a loop, inside each of those <li> tags you have elements with the IDs #messages and #message_button. Multiple instances of an ID on the same page is not allowed. If you want, you can use classes instead of ids as you can have multiple instances of a class.
However, switching from IDs to Classes won't fix your problem, as if you use classes you'll just be toggling ALL messages when any message button is clicked.
Referring to this question here, you can easily get the index of the loop in your rails template:
<% #active.each do |job, index| %>
Your template/html code here
<% end %>
This exposes a new variable, index which you can use to decorate each of your messages and buttons with an index value to then specify which message you wish to show.
Note: I'm not sure if this is the best approach, but this should work. It's been a while since I've used Rails, so there might be errors. I've included the code below just to demonstrate the possible solution:
application.js:
$(function() {
$(document).foundation();
});
$(document).ready(function() {
//NOTE that I am selecting on a class here
$('.message_button').click(function(e) {
//You also need to prevent the default behaviour of
//the link. That is why the page keeps refreshing.
e.preventDefault();
//get the index value I appended to this elements ID
var msgButtonIndex = $(this).attr("id").replace("message_button_","");
//select and toggle the respective message
$("#messages_" + msgButtonIndex).toggle();
});
});
_userindex.html:
<div class="row">
<div class="small-12 columns new-button">
<%= link_to 'New Job', new_job_path, class: 'button' %>
</div>
</div>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>Active Jobs</p>
<div class="content" data-section-content>
<% if #active.present? %>
<ul>
<% #active.each do |job,index| %>
<li class='panel'>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="large-6 columns">
<span id="location"><strong>location</strong>: <%= job.location %></span>
</div>
<div class="large-6 columns">
<span id="status"><strong>status</strong>: <%= job.status %></span>
</div>
</div>
<div class='light panel bottom'>
<strong>job: <%= link_to job.name, job %></strong><br>
<%= job.description %>
</div>
</div>
</div>
<div class="row job-buttons">
<div class="small-6 columns">
<%# Adding a "message_button" class and a decorated "message_button_{index}" ID! %>
<%= link_to 'messages', '', class: 'button small secondary message_button', id: "message_button_" + index.to_s %>
</div>
<div class="small-6 columns">
<%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %>
</div>
</div>
<br />
<%# decorating this ID too %>
<div id="messages_<%= index.to_s %>">
<div class="row">
<div class="small-12 columns">
<div class="panel">
<%= form_for(#message) do |f| %>
<%= f.label :body, "Description" %>
<%= f.text_area :body %>
<%= f.hidden_field :job_id, value: job.id %>
<%= f.submit 'Create message', class: 'button small secondary' %>
<% end %>
</div>
</div>
</div>
<% jobs_messages = job.messages %>
<% if jobs_messages.present? %>
<ul>
<% jobs_messages.each do |m| %>
<% if m.user_id.present? %>
<% user = m.user %>
<% else %>
<% user = m.runner %>
<% end %>
<li class='panel'>
<div class='row'>
<div class='small-12 columns'>
<p> From: <%= user.login %> </p>
<p> Body: <%= m.body %>
</div>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="empty panel">
<p>no messages at the moment</p>
</div>
<% end %>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="empty panel">
<p>no active jobs at the moment</p>
</div>
<% end %>
</div>
</section>
<section>
<p class="title" data-section-title>Completed Jobs</p>
<div class="content" data-section-content>
<% if #completed.present? %>
<% else %>
<div class="empty panel">
<p>no completed jobs yet</p>
</div>
<% end %>
</div>
</section>
</div>