Implementing ajax request to create/edit rails object

Question

I am trying to create a add/edit credit card form within my edit user page. To do so I am trying to implement an ajax call to the edit and create functions in my customers controller.

This is the code I have for the update button within the modal window:

<%= button_tag "Update", :class =>"btn submit-button", :type => 'button', :onclick => "onUpdateCard('#{current_user.id}');"%>

This is the function that it calls:

function onUpdateCard(id) {
this.id = id;

// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
var card_number = document.getElementById('card_number').value;
var card_code = document.getElementById('card_code').value;
var card_month = document.getElementById('card_month').value;
var card_year = document.getElementById('card_year').value;

var response = Stripe.createToken({
    number: $('#card_number').val(),
    cvc: $('#card_code').val(),
    exp_month: $('#card_month').val(),
    exp_year: $('#card_year').val()
}, stripeResponseHandler);        
// allow the form to submit with the default action
return false;
};

function stripeResponseHandler(status, response) {
if (response.error) {
    $(".payment-errors").text(response.error.message);
    $(".submit-button").removeAttr("disabled");
} else {
    var token = response['id'];
    var new_url = "/users/" + this.id + "/customers/new";
    var edit_url = "/users/" + this.id + "/customers/1/edit";
    $.ajax({
        type:'GET',
        url:  edit_url,
        data: {'stripe_card_token': token}
    });
}
return false;
};

And in the controller there is the edit function:

def edit
    @user = current_user
    @customer = @user.customer    
    stripe_customer = Stripe::Customer.retrieve(@customer.stripe_customer_token)
    stripe_customer.card = params[:stripe_card_token]
    stripe_customer.save
end

Can you help me figure out how to handle the ajax correctly? I'm not sure how to debug this properly...

Nitesh · Accepted Answer · 2015-09-08 10:16:33Z

Here I'm suggesting the alternative to handle update request using AJAX.

I'm not improving or correcting your code but giving you a way to handle AJAX requests in Rails 3.

a. view

Whatever information you wants to update in Database using AJAX call you will pass through a form. So for making a AJAX request you need to add :remote => true in your form. Rails provides this helper.

<%= form_for @customer, :url => admin_customers_path, :method => :post, :remote => true, :html => { :id => "customer-form" } do |form|-%>
      <%= render :partial => 'admin/customers/form', :object => form %>
      <%= form.submit 'Update' %>
<% end %>

In the _form.html.erb you can add textfield or other this whatever you wants to add in your edit form

b. controller

Because of " :remote => true " you form submission will make a JS request so in update action after saving the data of customer control will for to format.js and then it will look for update.js.erb in views.

def update
  if @customer.update_attributes(params[:customer])
    respond_to do |format|
      format.html {
                  flash[:success] = "customer's info was updated Successfully."
                  redirect_to customers_path
      }
      format.js
    end
  else
    respond_to do |format|
      format.html {
                  flash[:error] = @customer.errors.present? ? @customer.errors.full_messages.join('<br />') : "Oops! There is some problem with category update."
                  render :edit
      }
      format.js
    end
  end
end

c. update.js.erb

You can do stuffs after successful update. Suppose you want to highlight some div then you can do like this.

  $('.target-div').effect("highlight", {}, 2500);

Thank you. The whole error was from trying to nest on form into another. So I rendered the content in a modal and rearranged the forms.

Collectives™ on Stack Overflow

Implementing ajax request to create/edit rails object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related