I have a search form for an index page following the tabular demo. It works perfectly. The list I have that I want to filter by is quite long and I wanted to make it searchable so I added selectize.js, that piece also works just fine.
The problem is they don't work together. After selecting an item now it doesn't fire off the call to TabularReflex#search to filter the results.
#app/views/foo.index.html
<%= form_with scope: :search, url: '/search', html: { "data-reflex" =>"debounced:change->TabularReflex#search"} do |f| %>
<%= f.select :foo, options_for_select(#search.foo), {include_blank: 'Select a Foo'}, {class: 'selectize'} %>
<% end %>
Related
i have this code in rails
<%= button_to "Destroy this post", #post, method: :delete %>
and it is returning <button .... /button> but I want to return <bx-btn .... /bx-btn> instead. How can I achieve that and where exactly I can modify the code? Thank you!
I tried to search but nothing results in sufficient explanatory to mi issue or I could not comprehend the answer. I tried rails guides but I cant seem to find the documentation or I cant decribe what I am searching for.
If what you want is to monkey-patch button_to, probably isn't a good idea.
A better choice might be to create a helper that works as a content_tag extension, like:
def bx_button(content_or_options_with_block = nil, options = nil, escape = true, &block)
content_tag('bx-btn', content_or_options_with_block, options, escape) do
block.call if block_given?
end
end
then use it as:
<%= bx_button "Destroy this post", method: :delete %>
or as a block:
<%= bx_button method: :delete do %>
Destroy this post
<any-other-tag-you-need-inside-bx-btn/>
<% end %>
Context: a form has a collection_select, but without a value that interests the user.
A second form allows to create a new entry that would populate the collection_select with a desired value.
Class Article has_many :tags
The create turbostream does render the object, but the form does not display the change & I suspect it is due to the atomicity of the form. the IDed div tag was tried both outside and inside the form_fields tag to the same neutered effect.
<%= form.fields_for :tags do |tag| %>
<div id='tags'>
<%= f.collection_select(:tag, #tags, :id, :name) %>
</div>
<% end %>
The turbo_stream file tris to replace the target. If f.collection_select is used, this generates an error as rails, handling the snippet does not know of the form's existence. Using select_tag, a tag is rendered and delivered but the div is not refreshed
<%= turbo_stream.replace "tags" do %>
<div class='fade-in-div'>
<%= select_tag :tag, options_from_collection_for_select(#tags, :id, :name) %>
</div>
<% end %>
How can these options for select be updated with hotwire?
Functional answer that does not answer the question:
• the new data needs its own field
• make that an allowed attribute with the relevant accessor atrr_accessor
• process the new value
• update the record
• choose preferred path: redirect or turbo_stream a partial as a replacement of entire form.
I have form_with form, i want to send the data by Ajax remote:true request.
What works:
- when i click submit button, everything is fine, i receive an alertbox (this is what i've put in my .js.erb file)
What doesn't work:
- i have search form with many fields, i want to submit form when any of the fields is changed. Without ajax it works fine, the code "onchange="this.form.submit();" works perfectly.
But when i use Ajax, this.form.submit() is still reloading the page.
Expected results:
- When i change any field, it will send data without reloading page. If it is possible, i want to avoid regular Ajax and use remote:true form_with method.
What i've tried
- i've used many jquery variations f.e.:
this.form.submit();
$('#id_of_submit_button').click(); // it works but i want to make it without using submit button
$(this).closest("form").submit();
My code:
show.html.erb
<%= form_with(url: "/cars/" + #car.id.to_s + "#formcarsection", id: "filterform", remote: true, method: "get") do |f| %>
<%= f.text_field :vin, onchange: "this.form.submit();", class: "form-control" %>
<input type="submit" id="submitbtn" value="Count" class="car__submit-btn">
<%= end %>
cars_controller.html.erb
def show
respond_to do |format|
format.html
format.js { render 'cars/show.js.erb' }
end
end
cars/show.js.erb
alert("Hello! I am an alert box!!");
The remote: true needs to be added to each field.
<%= f.text_field :vin, data: { url: "/cars/" + #car.id.to_s + "#formcarsection", remote: true, class: "form-control" } %>
I have a form and I'm setting a field to be required before submitting, however nothing is showing up when I hit the Search button. What do I need to do to style the form?
<%= form_tag search_path, :method => :get, class: "form-search-home" do %>
<%= text_field_tag :q, :class => "term form-control" %>
<%= text_field_tag :loc, :class => "loc form-control", :required => true %>
<%= button_tag :type => :submit, :class => "btn" do %>Search<% end %>
<% end %>
Thanks!
nothing is showing up when I hit the Search button
The problem here is likely a Rails / HTML issue than CSS (as mentioned in your question)
Syntax
As pointed out in the comments, you have a series of problems with your code syntax, specifically with submit_tag & text_field_tag:
<%= form_tag search_path, method: :get, class: "form-search-home" do %>
<%= text_field_tag :q, nil, class: "term form-control" %>
<%= text_field_tag :loc, nil, class: "loc form-control", required: true %>
<%= submit_tag "Search", class: "btn" %>
<% end %>
This should fix any of the syntax issues you have on your form, allowing it to submit. The reason why it doesn't at the moment is likely down to the syntax being incorrect. If you use the above code, it should render the form correctly, allowing you to submit it as required!
--
CSS
CSS is cascading style sheets - meaning they're only meant to style your page. They can't fix any syntax, backend or HTML rendering issues - only how the HTML appears in the browser
If you've still got trouble with your CSS, you'll be best styling the form with the inputs inheriting from the main class styling:
#app/assets/stylesheets/application.css
form {
/* form code */
}
form input.required {
/* required form element styling */
}
Does your form code generate a valid HTML?
As far as I see from documentation, text_field_tag method has three arguments:
text_field_tag(name, value = nil, options = {})
Your example ommits the second argument (value), so may be that is the case. Wonder if this could help:
<%= text_field_tag :loc, nil, :class => "loc form-control", :required => true %>
I am writing a form with three text input fields. I have used text_field_tag to create them
<%= text_field_tag(:input_first) %>
<%= text_field_tag(:input_second) %>
<%= text_field_tag(:input_first) %>
Am using bootstrap css. I want to make the second input larger than the first and the third input. How can I achieve that?
I have tried the below, and even more and the input field size is not changing.
first
<%= text_field_tag(:input_second, :input_html => { :class => "input-large"}) %>
second
<%= text_field_tag(:input_second, nil, :class => "input-large") %>
third
<%= text_field_tag(:input_second, nil, :size=> 30) %>
fourth
<span class="input-large">
<%= text_field_tag(:input_second) %>
</span>
What wrong am I doing? Am a beginner in rails/css/html
ps: should I use text_field_tag or text_field ?
Bootstrap utilizes specific classes to control the width of input elements:
In a Rails template, you'd invoke a text_field_tag in the following manner:
<%= text_field_tag('input_second', nil, class: 'input-large') %>