Jquery Updating Rails Form Partial Based On Selected Item In Drop Down

Question

In my rails app I have a dropdown menu that a user can select an account to make a payment to: //_payment.html.erb

Solution 1:

If you want to access record information from your model inside of front-end javascript you will indeed want to setup a small api to query the database for that information. In ajax it would be something like this

function processDataFunction(data){
  console.log(data)
}

$.ajax({
  type:"GET",
  dataType:"json",
  url:"/some-path/:some_id",
  success: processDataFunction(data){}
});



#config/routes.rb
Rails.application.routes.draw do
  get "/some-path/:some_id", to:"some_controller#some_view", :defaults => { :format => :json }
end#app/controllers/some_controller.rbclassSomeController < ApplicationControllerdefsome_view@some_records = SomeModel.find_by_id(params[:some_id])
    respond_to do|format|
      format.json { render json:@some_records }
    endendend

Solution 2:

To access the information in the rendered partial without making another controller action, I collected all data I might need in the original action. That way I could get the exact result I was looking for without changing my routes and doing ajax request.

To do this I added methods to the controller new action. You can see from my original question, all accounts I may need information for are in the variable that is in the dropdown menu:

@liability_account_payment_list

This is where the dropdown menu gets its information from

That variable is in the Transaction controller new action. So I created another variable storing an array on the line after the above variable:

@liability_accounts_payment_list_minimum_payments = @liability_account_payment_list.map {|account| account.minimum_payment.to_f + account.minimum_escrow_payment.to_f}

This new variable is an array of all the accounts minimum payments in the order they are listed in the dropdown menu the user will select from.

Baca Juga

Then I changed the jQuery on the page to the following

//_payments.html.erb
<script>jQuery(function(){

  $("#payment-to-account").change(function() {
    var selected_item = $( "#payment-to-account option:selected" ).text();
    var selected_item_index = $( "#payment-to-account option:selected" ).index(); 
    //looks for something in parentheses followed by space moneysign " $"var regExp = /\(([^)]+)\)\s\$/;
    var matches = regExp.exec(selected_item);

    // array of minimum payments from accounts in list converted from ruby to jsvar min_payments = <%= raw @liability_accounts_payment_list_minimum_payments %>;
    // set the js variable to the appropriate minimum paymentvar selected_account_min_payment = min_payments[selected_item_index-1];

    switch (matches[1]) {
      case'Mortgage':
        $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      case'PersonalLoan':
      case'CreditCard':
      case'StudentLoan':
      case'OtherLiability':
        $('#to-account-form').html("<%= j render 'payment_to_all_other_liabilities', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      default:
        $('#to-account-form').html("<br>" + "Contact support, an error has occurred");
        $('#to-account-form').slideDown(350);
    }
  });

});

</script>

The lines that have min-payment-field-hidden are because setting two different divs with the same id does not work. One div is being used to set hidden_field, the other is showing the user what the value is.

//_payment.html.erb
<-- To make sure the appropriate minimum payment is submitted to controller -->
<%= f.hidden_field :amount, :id => "min-payment-field-hidden" %>

<div>
  <%= f.label "Minimum Payment" %>
  <div id="min-payment-field"></div>
</div>

If you look at my switch statement, you can see I set the above value with these lines:

$("#min-payment-field-hidden").val(selected_account_min_payment);
$("#min-payment-field").html(selected_account_min_payment);

Now the user can see the minimum payment for the specific account they choose from the dropdown.

JavaScript Sample

Jquery Updating Rails Form Partial Based On Selected Item In Drop Down

Solution 1:

Solution 2:

Post a Comment for "Jquery Updating Rails Form Partial Based On Selected Item In Drop Down"