<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!");
});
});
Related
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.
My spinner show but only from the second search occurence on...
When I search for a stock the first time nothing appears. Here's my repo: https://github.com/Ardzii/finance-tracker and the heroku: https://finance-tracker-ardzii.herokuapp.com/
And, so that you don't have to look the repo:
Here's the view: _lookup.html.erb (partial)
<div id="stock-lookup">
<h3>Search for stocks</h3>
<%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form', spinner: true do %>
<div class="form-group row no-padding text-center col-md-12">
<div class="col-md-10">
<%= text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg' %>
</div>
<div class="col-md-2">
<%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %>
<i class="glyphicon glyphicon-search"></i> Look up a stock
<% end %>
</div>
</div>
<%= render 'common/spinner' %>
<div id='stock-lookup-results'></div>
<% end %>
</div>
The spinner partial: _spinner.html.erb
<div id="spinner" class="row col-md-12 text-center spinner" style="display: none;">
<i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Processing...
</div>
My Javascript file: search.js.erb
var init_stock_lookup;
init_stock_lookup = function(){
$('#stock-lookup-form').on('ajax:before', function(event, data, status){
show_spinner();
});
$('#stock-lookup-form').on('ajax:complete', function(event, data, status){
hide_spinner();
});
$('#stock-lookup-form').on('ajax:success', function(event, data, status){
$('#stock-lookup-results').html("<%= j render 'stock', {stock: #stock} %>");
init_stock_lookup();
});
}
$(document).ready(function() {
init_stock_lookup();
})
The view it renders: _stock.html.erb
<div class="well results-block">
<% if stock.present? %>
<strong>Symbol:</strong> <%= stock.ticker %>
<strong>Name:</strong> <%= stock.name %>
<strong>Price:</strong> <%= stock.price %>
<% else %>
<i>Stock not found</i>
<% end %>
</div>
My application.js file:
var hide_spinner = function (){
$("#spinner").hide();
}
var show_spinner = function (){
$("#spinner").show();
}
I'm not sure the problem was stated really clearly, so I will restate it here:
The spinner works only after a first search. On the first lookup, I have no spinner being displayed...
Thanks in advance and as usual for your help!
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 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)."
I have the magnific popup on my app and I need help with adding a action to the lightbox. I have added my code to the javascript and outside of it but it never appears inside the lightbox.
I need to add several pieces to the lighbox such as a link that will allow user to make ProfileImage, messages compose box, and short bio of the user. If I can learn how to do one then I am confident I can do the rest.
The action is <%= button_to('Set as Profile Image', [:avatar, #photo]) %>
show.html.erb:
<h1><%= #user.username %></h1>
<script type="text/javascript">
$(document).ready(function() {
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'image',
gallery:{enabled:true}
});
});
</script>
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<% end %></div></p>
Tell Magnific Popup to open inline content (a div with the image and your extra content), e.g.:
<script>
$(document).ready(function () {
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'inline',
gallery: { enabled: true }
});
});
</script>
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo) %>
<div id="<%= dom_id(photo) %>" class="mfp-hide">
<%= image_tag(photo.image_url) %>
<%= button_to('Set as Profile Image', [:avatar, #photo]) %>
</div>
<% end %>
</div>
You will need to style the popup; the documentation link above has some sample CSS.
(Apologies if the Ruby code is broken; I'm not really a RoR person.)
According to the magnific popup documentation, you can load anything you want into the popup (I thought it might have been an image-only "lightbox" plugin)
This means if you place the code you need in your popup div, you should be able to do what you want with it:
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<%= button_to('Set as Profile Image', profile_path(photo)) %>
<% end %>
</div>