I'm trying something really simple, inside a link I want there to be text and an image.
= link_to 'NVidia Graphics', inventory_url, class: 'lato' do
= image_tag 'list-highlighter.png'
I'd like the output to be something like:
<a href="/inventory">
NVidia Graphics
<img src="list-highlighter.png" />
</a>
How can I achieve this using Slim? My current code causes the website to crash.
undefined method `stringify_keys' for "http://foobar.com/inventory":String
= link_to inventory_url, class: 'lato' do
| NVidia Graphics
= image_tag 'list-highlighter.png'
I think that should work.. just not 100% about the slim syntax. link_to shouldn't have any content when wrapping something as a block -- that is, it should be immediately followed by its url. All the content inside will be wrapped by the <a> tag output. For non-slim, this would look like
<%= link_to inventory_url, class: 'lato %>
NVidia Graphics
<%= image_tag 'list-highlighter.png' %>
<% end %>
Soluction
= button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1', param2: 'value2' })
Rendered
<form class="button_to" method="post" action="/line_items/17">
<input class="btn btn-warning btn-lg" type="submit" value="Add" />
<input type="hidden" name="authenticity_token" value="Qk2sdfgasdfasdfsfa sdfsfsw==" />
<input type="hidden" name="param1" value="value1" />
<input type="hidden" name="param2" value="value1" />
</form>
http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87
Related
In my application I have an form to create new company. Here I have to enter company name and company url.Here is my code for the from.
<%= form_tag(controller: "/company", action: "add_startup_to_index", method: "post") do %>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter the name of the company..." required />
</div>
<div class="form-group">
<label class="control-label">Company URL</label>
<input type="text" class="form-control" id="url" name="url" placeholder="e.g. http://www.company.com..." required />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-conf" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-conf">Add Company</button>
</div>
<% end %>
This is my method for saving above data.
def add_startup_to_index
#url = api_version_root + 'startups/new'
response = RestClient.post #url,
{ startup: { friendly_name: params[:name],
url: params[:url]
}
}, api_token_hash
record = JSON.parse(response.body)
flash[:info] = 'Startup has been added and Crunchbase sync started.'
redirect_to('/startups/' + record['company_id']) && return
rescue RestClient::ExceptionWithResponse => err
handle_rest_error http_code: err.http_code
end
This is working fine and I can save the companies. Now I want to validate the URL. For that I have below method.
def valid_url?(url)
return false if url.include?("<script")
url_regexp = /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix
url =~ url_regexp ? true : false
end
Since I am new for rails I have no idea how to call that method within my form. I had tried nested form_tag. But it is now allowed.
I tried as below.
<%= form_tag(controller: "/company", action: "add_startup_to_index", method: "post") do %>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter the name of the company..." required />
</div>
<%= form_tag(controller: "/company", action: "valid_url", method: "post") do %>
<div class="form-group">
<label class="control-label">Company URL</label>
<input type="text" class="form-control" id="url" name="url" placeholder="e.g. http://www.company.com..." required />
</div>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-conf" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-conf">Add Company</button>
</div>
<% end %>
Can any one help me for this.
Lanka, if I understand you correctly, what you are looking for is client side form validation. Before HTML5 this was a tedious task involving JS. With HTML5, url validation is baked right in. Simply try to change the type of the input to url, i.e. change
<input type="text" id="url" name="url" ...>
to
<input type="url" id="url" name="url" ...>
Then, when a non-conforming url string is entered, the browser will not submit the form and automatically indicate the issue. This even works out of the box with a default url pattern. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url for more information on custom patterns, placeholders and much more.
On on page, I have 2 forms like this:
<%= form_tag(create_car_service_settings_index_path, remote: true, method: :post) do %>
<%= hidden_field_tag "service_type", 1 %>
<%= text_field_tag "service_name", "", id: "service_name_car" %>
<%= submit_tag "Add Service" %>
<% end %>
... some HTML ...
<%= form_tag(create_car_service_settings_index_path, remote: true, method: :post) do %>
<%= hidden_field_tag "service_type", 0 %>
<%= text_field_tag "service_name", "", id: "service_name_car" %>
<%= submit_tag "Add Service" %>
<% end %>
The first form is rendered as POST, but the second one as GET; in routes.rb is following:
resources :settings do
collection do
...
post 'create_car_service'
post 'edit_car_service'
end
end
Why the second form is rendered as GET instead of POST? Stuck on this for a while.
Thanks.
EDIT:
First form:
<form action="/settings/create_car_service" accept-charset="UTF-8" data-remote="true" method="post">
...
Second form:
<form action="/settings/create_car_service" accept-charset="UTF-8" data-remote="true" method="get">
When you do bin/rails routes you should get something like this
Prefix Verb URI Pattern Controller#Action
create_car_service_settings POST /settings/create_car_service(.:format) settings#create_car_service
edit_car_service_settings POST /settings/edit_car_service(.:format) settings#edit_car_service
So that post route should be create_car_service_settings_path not create_car_service_settings_index_path that points to settings#create_car_service
But it is a strange if you get for one method GET and other POST. Can you paste the output from these forms (html)
EDIT
So using the path that you provided generated an error for me. When I use this
<%= form_tag(create_car_service_settings_path, remote: true, method: :post) do %>
I will get this for first
<form action="/settings/create_car_service" accept-charset="UTF-8" data-remote="true" method="post">
for second
<form action="/settings/create_car_service" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="service_type" id="service_type" value="0" />
<input type="text" name="service_name" id="service_name_car" value="" />
<input type="submit" name="commit" value="Add Service" data-disable-with="Add Service" />
</form>
I did long research, but cannot find solution. I want to make a list of toggle-buttons in my form and then save ones checked by user. I know that I can named toggle-button and then find it in controller by params[:togglebutton-name], but it seems that toggle-button hasn't got any value. So for example I have 5 toggle-buttons, and user will check two of them. Then I want to know about it in Controller. What should I do?
toggle-buttons:
<% current_user.type_tags.each do |type_tag| %>
<button name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
<%= type_tag.name %>
</button>
<% end %>
Controller:
def create
#try = params[:type1]
render 'help'
end
Help:
Value: <%= #try %>;
And in result I have this:
Value: ;
I've already found the solution. I used btn-group with data-toggle: "buttons". Inside I have label and input with type=checkbox. That approach allows me to get a true value in my Controller if button is pressed. I can style the buttons on my own too.
I hope it will be useful for somebody.
<div class="btn-group" data-toggle="buttons">
<% current_user.type_tags.each do |type_tag| %>
<label class="btn btn-primary">
<input name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="checkbox" autocomplete="off">
<%= type_tag.name %>
</input>
</label>
<% end %>
</div>
Using the this button_to helper:
<%= button_to "Add Beer", "/growlers/create", method: "get" %>
yields the following HTML:
<form action="/growlers/create" class="button_to" method="get">
<div>
<input type="submit" value="Add Beer" />
</div>
</form>
Which is exactly what is supposed to happen. However, as you can see, the HTML element is a <form>. I am wondering how to render this as a <button> for styling purposes (using Foundation).
I found this:
<%= link_to "<button>Add Beer</button>".html_safe, "/growlers/create", method: "get" %>
yields this HTML:
<a data-method="get" href="/growlers/create">
<button>Add Beer</button>
</a>
Which, though a <button>, doesn't seem perfect to me.
I am curious if there are any other solutions/workarounds to this issue.
If you wrap your button label in the button_to statement:
<%= button_to "/growlers/create", method: "get" do %>
Add Beer
<% end %>
It will render the wrapped text within a element inside the form.
props to apidock: https://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to
Are you looking for button_tag?
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag
I am trying to update a div based on a form submit. I am on Rails 3.1.1. I am trying to adapt someone else's recipe. My code in the view is something like this in main.html.erb:
<%= javascript_include_tag :defaults %>
<div id='seq_search'>
<%= form_tag(:remote => true, :update => 'seq_select', :action => 'select') do %>
<p>
<%= search_field_tag :query, '', :size => 45 %>
</p>
<p>
<%=submit_tag "Submit", :disable_wth => "Adding ..."%>
</p>
<% end %>
</div>
<div id='seq_select'>
</div>
The controller looks like
class SearchAjaxController < ApplicationController
def main
end
def select
render :text => '<li> '+params[:query] + ' </li>'
end
end
However, when I enter something in the text box and press submit, instead of updating the div, it goes off to another page rendering just the output of the select method of the controller.
If I look at the page source of the form, it is something like this:
<div id='seq_search'>
<form accept-charset="UTF-8" action="/search_ajax/select?remote=true&update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
<p>
<input id="query" name="query" size="45" type="search" value="" />
</p>
<p>
<input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
</p>
</form></div>
<div id='seq_select'>
</div>
It seems that the form is simply passing remote=true&update=seq_select as arguments to the controller's method/function. Is this what is supposed to happen?
Update:
So I tried to add to follow Mike Campbell's sugggestion and added the following code to my view (`.html.erb') file
<SCRIPT type='text/Javascript'>
$(function(){
$('#form-id').bind('ajax:success', function(xhr, data, status){
$('#seq_select').html(data);
});
}
</SCRIPT>
and also gave an id to the form:
<%= form_tag(:remote => true, :update => 'seq_select', :action => 'select', :id => 'form-id') do %>
Submitting the form still doesn't update the page. It simply skips to a new rendered view as before. The generated HTML reads:
<SCRIPT type='text/Javascript'>
$(function(){
$('#form-id').bind('ajax:success', function(xhr, data, status){
$('#seq_select').html(data);
});
}
</SCRIPT>
<div id='seq_search'>
<form accept-charset="UTF-8" action="/ajax_search/select/form-id?remote=true&update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
<p>
<label> Search by identifiers, accessions, and gene names.. </label>
</p>
<p>
<input id="query" name="query" size="45" type="search" value="" />
</p>
<p>
<input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
</p>
</form></div>
<div id='seq_select'>
</div>
Update:
It seems that the syntax for form_tag was wrong, and the first argument has to be the name of the action. I now have <%= form_tag( 'select', :remote => true, :id => 'form_id') do %> which generates the associated HTML <form accept-charset="UTF-8" action="select" data-remote="true" id="form_id" method="post">. Which is better, but my Ajax is still not working.
I think this has to do with respond to xhr in the controller. you should specify this is a xhr request.
See here for a question on that.