Right now i have a search field and right next to it a submit search button.
But want to delete the button so that the user can just hit enter. What do i need to change ?
<%= form_tag search_path, method: :get do %>
<div class="row">
<div class="col-md-5">
<%= text_field_tag :search, params[:search], placeholder: "z.B. New York", class: "suchfeld", id: "autolocation" %>
</div>
<div class="row">
<div class="col-md-2">
<%= submit_tag "Search", class: "btn btn-normal btn-block" %>
</div>
</div>
</div>
<br/><br/>
<% end %>
Can be done using jquery or javascript
1 -> Provide a unique id to form and input field which will be submitted on hit enter
<%= form_tag(search_path, method: :get, id: 'search_form') do %>
<div class="row">
<div class="col-md-5">
<%= text_field_tag :search, params[:search], placeholder: "z.B. New York", class: "suchfeld", id: "autolocation" %>
</div>
</div>
<br/><br/>
<% end %>
2 -> Using jQuery check if enter button is pressed, then submit this form
<script>
$(document).ready(function() {
$('#autolocation').keydown(function(event) {
// enter has keyCode = 13
if (event.keyCode == 13) {
$('#search_form')submit(); // submit the form
return false;
}
});
});
</script>
You can simple hide the button using css. {display: none}. But don't delete the button. (If you are using boostrap try adding d-none class to the submit button.) This will submit your form with enter key.
Related
<div class="form-group">
<label><%= (I18n.t 'user.form.your_avatar')%></label>
<div class="push">
<%= image_tag #user.avatar, class: 'img-avatar' if #doctor.avatar.attached? %>
</div>
<div class="custom-file">
<%= form.file_field :avatar, class: 'custom-file-input', data: { toggle: 'custom-file-input' } %>
<%= form.label :avatar, I18n.t('doctor.form.choose_new_avatar'), class: 'custom-file-label' %>
</div>
</div>
I want to inform user once he chooses image image uploaded successfully , before submitting the data. How can this be handled? Any logic?
Then you just need a little jQuery script to add a notification after an image was chosen.
$(document).ready(function () {
$(document).on('change', '.custom-file-input', function (_e) {
alert("You've added an image!");
});
});
I have a checkbox outside a form and for this to work I use the form with an id, like this:
My form with the id:'check-form'
<%= form_for(:execution, url:{controller:"executions", action:'create_multiple'}, html:{id:"check-form", class:"form-inline"}) do |form| %>
<div class="input-group mb-3">
<%= form.select :collaborator_id,#collaborators.collect
{ |collaborator| [collaborator.name, collaborator.id] },
{prompt: 'Selecione'}, {class:'form-control', required:true} %>
<div class="input-group-append">
<%= button_tag(type: "submit", class: "btn btn-raised btn-primary", form:'check-form') do %>
<span><i class="far fa-play-circle"></i> Play</span>
<% end %>
</div>
</div>
<% end %>
My checkbox with form:'check-form'
<%= check_box_tag 'execution[status_id][]', item.sector_status(sector.id).id, checked:false,
{id:"check-#{item.sector_status(sector.id).id}", form:'check-form'}%>
What I want is to be able to use the value of the checkbox in another form with another method. Is there any way I could do this or maybe use a function to make the form "work" with two possible methods?
I would set up a hidden field in both of the forms, and add a class to them:
<%= hidden_field_tag('execution[status_id][]', item.sector_status(sector.id).id, {class: 'my_checkbox_value'}) %>
Then create a dummy checkbox outside the forms that, when clicked, assigns a value to those hidden fields:
<%= check_box_tag('dummyCheckbox', someValue , yourClickedValue, {id: 'my_dummy_checkbox') %>
Finally bring it all together with a jQuery click handler:
$("#my_dummy_checkbox").click(function() {
if ($(this).prop("checked") == true) {
$(".my_checkbox_value").val($(this).attr("value"))
} else {
$(".my_checkbox_value").val("")
}
})
Now when your forms are submitted, the hidden field will have the value of the checkbox if it was clicked, or it will be empty if it was not.
You can use one form and submit it with differnt methods using the attribute "formmethod" for buttons with type=submit since HTML5.
<form .....>
<button type='submit' formmethod='post'>Sends a POST request</button>
<button type='submit' formmethod='get'>Sends a GET request</button>
</form>
Formmethod attribute can be ignored for the buttons that matches the form's method attribute.
Running into a strange issue. I using jQuery's .append() to place a <div> containing a Rails form next to the paragraph tag a user selects in my Rails app.
First off, before adding the jQuery effect, I tested this by placing a the form on the page. It loaded, worked, and posted the user's text to my database correctly.
Second, I added this effect, and the <div> with the form does load, but weirdly, you cannot click into it. The text cursor will appear for a moment, disappear, and the user can not actually enter anything in the text_field.
Here's what I am running:
view.html.erb
<% #posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<div id="paragraph"><%= markdown(post.content) %></div>
<% end %>
<div class="exampleToggle"> <!-- div that should append -->
<%= form_for :comments do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :username %><br>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$("p").click(function(){
$(this).append(whatever);
});
});
</script>
As I mentioned, the form does load and looks how it should after clicking on a paragraph element; however, the form will not accept text input.
Also, for clarity's sake, here is the CSS involved with the placing the <div> to the right of the clicked paragraph:
{
position: relative;
}
.exampleToggle {
position: absolute;
top: 0;
margin-left: 8%;
left: 100%;
width: 35%;
height: 100px;
}
Any idea why this is breaking the form/form helper?
EDIT 1: For clarity, the central issue here seems to be the Focus effect. To try and fix this, I updated the Javascript to allow for value entry when the .field class is activated, but it did not fix it. Here's what I tried.
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$("p").click(function(){
$(this).append(whatever);
});
$('.field').click(function () {
var val = $(this).val();
if (val == "") {
this.select();
}
});
});
</script>
You have given $("p"), but there is no p tag in your question.
Also you are looping the same id to different fields which is not correct, ID should be unique. Instead take the class instead of id.
You should take a class to the paragraphed_id field and should write the jquery functions based on the required classes.
Try this,
<% #posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<div class="paragraph"><%= markdown(post.content) %></div>
<% end %>
<div class="exampleToggle"> <!-- div that should append -->
<%= form_for :comments do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :username %><br>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$(".paragraph").click(function(){
$(this).append(whatever);
});
});
</script>
I am writing an application using Rails 4.1 and Ruby 2.1.2. It has the following show.html.erb view for an Assignment Model:
<h1><%= "#{'Source URL'}"%> <div class="source-url"><%= #assignment.source.url %></div></h1>
<%= link_to new_assignment_contact_path(#assignment), id: 'display_modal', class: "add-btn btn-big" do %>
<i class="i15"></i> Add Contact
<% end %>
<br />
<br />
<table>
<thead>
<tr>
<th>Contact Email Address</th>
<th>Contact Name</th>
<th>Title</th>
<th>Phone</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<% #contacts.each do |contact| %>
<tr>
<td><%= contact.contact_email %></td>
<td><%= contact.contact_name %></td>
<td><%= contact.contact_title %></td>
<td><%= contact.contact_phone_number %></td>
<td><%= contact.notes %></td>
</tr>
<% end %>
</tbody>
</table>
<br />
<%= link_to "Completed", change_status_assignment_path(#assignment, status: "Completed"), method: :patch, class: "action-btn" %>
When a user clicks the New Contact button, a modal is displayed using the following form:
<%= form_for(#contact, url: assignment_contacts_path(#assignment), remote: true) do |f| %>
<div class="cols">
<div class="col">
<div class="field">
<%= f.email_field :contact_email, autofocus: true, placeholder: "Contact email" %>
</div>
<div class="field">
<%= f.text_field :contact_name, placeholder: "Contact Name" %>
</div>
<div class="field">
<%= f.text_field :contact_title, placeholder: "Contact Title", class: "ico-doc" %>
</div>
<div class="field">
<%= f.text_field :contact_phone_number, placeholder: "Contact Phone Number", class: "ico-phone" %>
</div>
</div>
<div class="col">
<div class="field">
<%= f.text_field :contact_domain, placeholder: "Contact Domain", class: "ico-www" %>
</div>
<div class="field">
<%= f.select :notes, ["404 Not Found", "Page Not Loading", "Site Error", "Web Page Not Available", "Log In Required", "Privacy Error", "Blank Page", "Redirect Url Change >>", "Contact Form Only >>", "Irrelevant >>"], { prompt: "Notes" }, { class: "ico-globe" } %>
</div>
<div class = "field">
<%= f.text_field :redirect_url_change, placeholder: "Enter Redirect URL" %>
</div>
<div class = "field">
<%= f.text_field :contact_form_only, placeholder: "Enter Contact Form URL" %>
</div>
<div class = "field">
<%= f.select :irrelevant, ["Foreign Site", "Lead Gen Site", "Job Listing", "Domain For Sale", "Forum", "FAQ", "Other >>"], { prompt: "Select Reason Irrelevant", style: 'display:none'} %>
</div>
<div class = "field">
<%= f.text_field :other, placeholder: "Enter other reason" %>
</div>
</div>
</div>
<div class="actions">
<%= f.submit "Submit", class: "action-btn" %>
</div>
<% end %>
The :redirect_url_change, :contact_form_only, :irrelevant, and :other fields on the modal are hidden by css using display:none. But, based on the option chosen in the :notes select element, the app needs to display one of these fields when a corresponding option with that value is selected.
The only way to do this in Rails that I know of is with jQuery or Coffeescript.
But, I'm not sure how to write the jQuery/Coffeescript to do this. And just as importantly, since this form is on a modal, where should this jQuery or Coffeescript be written? I've tried to just add a simple alert in the app/assets/javascript/contacts.js.coffee, but that doesn't get triggered to display. Am I putting this in the wrong place?
Please share some code you think would work for this and tell me where it should be placed.
EDIT: Thanks to Lanny I got the following jQuery working in the javascript console in the browser:
$("select[name='contact[notes]']").change(function () {
if ($(this).val() == "Redirect Url Change >>") {
$("input[name='contact[redirect_url_change]']").show();
$("input[name='contact[contact_form_only]']").hide();
$("select[name='contact[irrelevant]']").hide();
$("input[name='contact[other]']").hide();
}
else if ($(this).val() == "Contact Form Only >>") {
$("input[name='contact[redirect_url_change]']").hide();
$("input[name='contact[contact_form_only]']").show();
$("select[name='contact[irrelevant]']").hide();
$("input[name='contact[other]']").hide();
}
else if ($(this).val() == "Irrelevant >>") {
$("input[name='contact[redirect_url_change]']").hide();
$("input[name='contact[contact_form_only]']").hide();
$("select[name='contact[irrelevant]']").show();
$("input[name='contact[other]']").hide();
}
else {
$("input[name='contact[redirect_url_change]']").hide();
$("input[name='contact[contact_form_only]']").hide();
$("select[name='contact[irrelevant]']").hide();
$("input[name='contact[other]']").hide();
}
})
$("select[name='contact[irrelevant]']").change(function () {
if ($(this).val() == "Other >>") {
$("textarea[name='contact[other]']").show();
}
else {
$("textarea[name='contact[other]']").hide();
}
})
When I open up the dialog modal, paste the above into the console and then press Run it works perfectly. But, it still doesn't run in the application. I've tried to put it in the application.js and also in the contact.js, but neither one works. At this point, since the code works in the console, I suspect it might be either something needs to be run to load the code into the browser, or else something is interfering. I am running Turbolinks right now, but I don't think it is necessary for the application.
Can someone please help me get the rest of the way by showing where this needs to be put and how to call it, or assisting me in troubleshooting what is interfering?
Thanks
Let's walk through this...
I'm going to implement this rule: If a user selects, say '404' from the Notes select, make the 'redirect_url_change' input appear.
I know your exact logic might be different. Hopefully mixing-and-matching jQuery selectors can get you the rest of the way.
Using jQuery...
application.js
$(document).on("page:load", function() {
$("select[name='contact[notes]']").change(function () {
alert("Howdy!");
if ($(this).val() == "404") {
$("input[name='contact[redirect_url_change]']").css("display", "block");
}
});
});
One line up there is for debugging. Sometimes JS can fail in somewhat silent ways and it's hard to determine why events aren't firing. I use alert() to help highlight which things are happening, and which aren't. YMMV.
This script doesn't explicitly have to go in application.js, but it should go into a .js file in your javascripts folder so Rails compiles it into your app's JavaScript.
Some references:
jQuery Attribute Equals Selector
jQuery .change() method
Javascript if ()
jQuery .val() method
jQuery .css() method
I am trying to set up a form so that it submits via ajax when I hit enter. To do this I wanted to trigger the form to submit when the enter key is pressed on the input field. However the keyup event for the enter key keeps firing multiple times if the key is held down any longer than a split second which in turn sends lots of ajax requests causing the browser to crash.
I cannot figure out why the event keeps firing multiple times. Here is the view for the page:
<div class="page-content">
<div class="l-edit-header">
<h1>Edit</h1>
<div class="piece-header">
<%= image_tag #piece.user.avatar_url(:small), class: "avatar-small" %>
<div class="piece-header-info">
<h1><%= #piece.title %></h1>
<em>
By <%= link_to #piece.user.username, user_path(#piece.user) %>
<%= #piece.created_at.strftime("%B %d, %Y") %>
</em>
</div>
</div>
</div>
<div class="l-edit-main">
<div class="piece-main">
<%= image_tag #piece.image_url %>
<p id="piece-description" class="piece-main-description"><%= #piece.description %></p>
<div class="piece-main-links">
<%= link_to "Delete", piece_path(#piece), method: :delete if current_user == #piece.user %>
</div>
</div>
</div>
<div class="l-edit-side">
<div class="form-container">
<%= form_tag piece_tags_path(#piece), id: "new_tag", remote: true do %>
<%= label_tag :new_tag, "New Tag"%>
<%= text_field_tag :tag, "", data: {autocomplete_source: tags_url}, placeholder: "Add a tag and press Enter" %>
<div id="tags" class="piece-tags">
<%= render partial: "tags/delete_tag_list", locals: {piece: #piece, method: :delete} %>
</div>
<% end %>
</div>
<div class="form-container">
<%= simple_form_for #piece do |f| %>
<%= f.association :category, include_blank: false %>
<%= f.input :published, as: :hidden, input_html: {value: true} %>
<%= f.input :title %>
<%= f.input :description %>
<div class="form-submit">
<%= f.button :submit, "Publish" %>
</div>
<% end %>
</div>
</div>
</div>
and here is the Javascript for the tag form I am trying to work with:
var tagReplace = {
init: function(){
//Replace "#tags" with new updated tags html on tag create
$("#new_tag").on("ajax:success", function(e, data, status, xhr){
$("#tags").html(data);
tagReplace.init();
$("#tag").val("");
});
//Replace "#tags" with new updated tags html on teg delete
$("#tags a[data-remote]").on("ajax:success", function(e, data, status, xhr){
$("#tags").html(data);
tagReplace.init();
});
$("#new_tag").on("keydown", function(e){
if (e.which == 13){
event.preventDefault();
}
});
$("#tag").on("keyup", function(e){
if (e.which == 13){
$("#new_tag").submit();
console.log("pressed enter on new tag");
}
});
},
getTags: function(){
$.get( $("#tag").data("autocomplete-source"), tagReplace.initAutocomplete);
},
initAutocomplete: function(tagsArray){
$("#tag").autocomplete({
source: tagsArray
});
}
};
//Initalize
$(document).on('ready page:load', function () {
tagReplace.init();
});
As you can see I have prevented the default behaviour for the return key being pressed on the form and have added a console.log to count the number of times the event is being triggered.
I thought this could be to do with the fact I am using turbolinks but I can't seem to figure out why.
How can I ensure that the event only gets triggered one time for each time the enter key is pressed? At the moment the Javascript is crashing the browser when I hit enter.
You are calling tagReplace.init(); 2 times within itself and, as #Dezl explains in his answer related to this topic, "If you have delegated events bound to the document, make sure you attach them outside of the ready function, otherwise they will get rebound on every page:load event (causing the same functions to be run multiple times)."