We Keep Coding

How to show loading spinner in on ajax request? [duplicate]

This question already has answers here:
How to show loading spinner in jQuery?
(25 answers)
Closed 6 years ago.
Hello I have included given html code
#expressShippingCalculation
%li.list-group-item
%label
%input#shipping_method3{:name => "shipping_method", :type => "radio", :value => "1"}
Shipping
%small (Delivery within 4-5 days)
%li.list-group-item#method4
%label
= form_for #order, :url => update_express_shipping_path,:method => 'patch', :html => { :id => "shippingDetails" }, :remote => true do |form|
= form.radio_button :express_shipping, true, :value => true, :id => 'shipping_method4', :name => 'shipping_method'
Express Shipping
%small.maroonColorText (Additional Charge of USD 10 applicable.)
#spinner.spinner{:style => "display:none;"}
%img#img-spinner{:alt => "Loading", :src => "spinner.gif"}/
and js code is
$('#expressShippingCalculation input').change ->
if $('#shipping_method4').is(':checked')
additionalAmountExpress()
data = $('#shippingDetails').serialize()
expressValue = true
else
$('#additional-charge').hide()
expressValue = false
$.ajax
url: '/update_express_shipping?expressShipping=' +expressValue
type: 'PATCH'
return
Now I need to show loading spinner on my ajax request. lease guide me how I will include given code in my ajax request
$('#spinner').bind('ajaxSend', ->
$(this).show()
return
).bind('ajaxStop', ->
$(this).hide()
return
).bind 'ajaxError', ->
$(this).hide()
return
Please guide me how to include this code.

$(document).ajaxStart(function(){
$('#spinner').show();
});
$(document).ajaxComplete(function(){
$('#spinner').hide();
});
$(document).ajaxError(function(){
$('#spinner').hide();
});
► ajaxStart
► ajaxError
► ajaxComplete

Generate link_to using :url =>

I'm generating a link with a confirmation message and am having trouble with how the confirmation message is getting included.
I have tried this with both rails 4.0.10 and rails 4.2.2 and it produces the same output.
Here is my link_to code:
<%= link_to 'Destroy Comment', :url => [comment.article, comment], :method => :delete, :remote => true, :confirm => "are you sure?" -%>
And it generates the following link:
<a data-remote="true" href="/articles/4?confirm=are+you+sure%3F&method=delete&url%5B%5D=4&url%5B%5D=5">Destroy Comment</a>
This is obviously doesn't work because it's putting the javascript confirm message right into the url of the link.
I've found that if I remove the :url => from the link_to it seems to work fine.
<%= link_to 'Destroy Comment', [comment.article, comment], :method => :delete, :remote => true, :confirm => "are you sure?" -%>
<a confirm="are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/articles/4/comments/5">Destroy Comment</a>
Is there a way to fix this and keep the :url => in the link_to? I really like having the :url => in there for specificity purposes. I looked through the api docs but couldn't find a specific answer. There was one comment made that claims something like this should work. http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#1227-link-to-with-as-routing

In your first example, you are passing a hash as second parameter, which matches this method signature:
link_to(body, url_options = {}, html_options = {})
causing Rails to interpret it as url_options, which is why you get that link you get.
If you really want to user the :url=>, then you can create your own helper method, say link_to_with_url that that expects hash containing :url key as the second parameter:
def link_to_with_url(body, options={})
url = options.delete(:url);
if url.nil?
raise "Can't link to something that doesn't have a URL"
else
link_to body, url, options
end
end
You can also overload Rails' link_to method, but I would advise against that.

Try this:
<%= link_to 'Destroy Comment', :url => [comment.article, comment], :method => :delete, :remote => true, :data => {:confirm => "are you sure?"} %>

Delete item in form and persist to the database

I have a delete button in my form that looks like this:
%td
%button.btn.btn-default{class: "delete-btn", "data-id" =>booking.id} Delete
How should I write my javascript to make it delete the row in the table when the Delete button is clicked?
Basically, how do I modify this in my application.js file
$(".delete-btn").on("click", function(e) {
var bkId = $(e.target).data("id");
//line to delete it from my form and the db
});
Previously, I had this in my html form to perform the deletion
'Delete', booking, :method => :delete, :data => { :confirm => 'Are you sure?' }
Please can someone show me how the .js/ajax equivalent would be?
I have developed this code so far (it executes but i keep getting my error message):
$(".delete-btn").on("click", function(e) {
var bkId = $(e.target).data("id");
$.ajax("/bookings", {
data: {
booking: {
id: bkId
}
},
method: "DELETE"
}).done(function(resp){
window.location = location.href;
}).fail(function(resp){
console.log("Error. Unable to delete");
alert("Error. Unable to delete this booking");
})
});

I found an easy to accomplish this:
%td= link_to 'Delete', booking, :method => :delete, class: "btn btn-danger"
Yet, I'm looking for the more complicated one which involves modifying my application.js (see above) to develop my understanding of how the communication between front and back end works.

Model validation on Popup Login form

I stuck here need help
Ruby on rails
I have one Pop-up for login it is coming when i click on link "Sign in" using jquery
Now i want to validate username and password entered by user from database
Login popup is a partial page sign in.html.erb
any solutions. plz

depends on which validation framework you are using.
the key is to keep the dialog not closed once server responses.
(NOT RECOMMENDED) if you are not using any javascript validation framework, you have to make the "form" a "remote form", then submit it, then display the error messages if validation failed.
(MY EXPERIENCE) if you are using an javascript validation framework such as RSV(really simple validation), just define the validation rules, then implement 2 ajax methods: 1 is used for validating the form, another is a callback function used to process the response from remote and display it in the dialog.
anyway, dealing with the error message for a dialog is not very easy and straightforward than dealing with it for a regular page. Anyway, I hope you got my idea.

Here is my login partial which i have render and also validate it.
<div class="clost_holder"> <%= link_to image_tag("/assets/close-new.png"), "javascript:;", :onclick => "close_popup()" %>
</div>
<%= form_for(#user, :as => #user, :url => session_path(#user), :html => {:id => 'sign_in_form', :onsubmit => "return false;"}) do |f| %>
<div class="login_input_holder mtop20 flt">
<label>Email</label>
<p><%= link_to 'dont have an account ?', :controller => 'devise/registrations', :action => 'new' %></p>
<%= f.email_field :email %>
</div>
<div class="login_input_holder mtop10 flt">
<label>Password</label>
<%= f.password_field :password %>
</div>
<div class="fogot_password "><%= link_to 'forgot password ?', :controller => 'devise/passwords', :action => 'new' %></div>
<div class="login_btn frt"><input type="submit" value="signin" id='sign_in_btn'></div>
<% end %>
And then validate it.But you need to add jquery.validate and jquery.form files also.
<script type="text/javascript">
$("#sign_in_btn").click(function() {
if (!jQuery("#sign_in_form").valid()) {
return false;
}
else {
var container = $("#home1_content");
$("#sign_in_form").submit(function() {
$(this).unbind('submit').ajaxSubmit({
success: function(data) {
container.html(data);
window.location.reload();
}
})
});
}
});
$(document).ready(function() {
$("#sign_in_form").validate({
rules:{
"user[email]":
{
required: true ,
email: true
},
"user[password]":
{
required: true
},
messages: {
"user[email]": "This field is required",
"user[password]": "This field is required"
}
}
});
});
</script>

text field with dropdown in rails

I'm trying to build a form field that can either accept a text entry, or select an option from a dropdown. In rails, the autocomplete plugin is close to what I need, except I want the dropdown to be available before the user types anything in the text field. Is there an example of this out there somewhere?
thx for the help,
-C

I have used this code on a view to select a date or enter a name (I hope you read HAML):
%center
- form_remote_tag :update => 'filter_counts', :url => { :action => 'name_filter', :controller => 'dictated_exams', :method => :post } do
Please enter part of a name ('%' is the wildcard character):
= text_field_tag 'search', nil, :maxlength => 15, :size => 15
= submit_tag 'Search'
%b OR
pick the exam date:
= calendar_date_select_tag "date", Date.today, :time => false, :valid_date_check => "date < (new Date()).stripTime()"
= image_tag "spinner.gif", :align => "absmiddle", :border => 0, :id => "spinner", :style => "display: none;"
= observe_field :date, :with => :date, :frequency => 1, :url => {:action => 'filter_widget', :controller => 'dictated_exams', :method => :post }, :update => :filter_counts, :before => "Element.show('spinner')", :success => "Element.hide('spinner')"
On the other hand, maybe you're just looking for this:
Rails' observe_form method
Basically, the question is : do you need to have those two methods of entry in a single form, or can they be separate? If so, you can also watch them separately.