How to fetch data-attr value in javascript and rails5?

Question

In rails5, I have the following in the index page:

<tbody>
  <% @properties_payments.each do |properties_payment| %>
    <tr>
      <td><%= properties_payment.property_id %></td>
      :
      :
      <td>
        <a class="property-update"  data-toggle="modal" data-
     target="#property-modal" data-attr='<%= properties_payment.id %>'>Update 
     Payment Transcation</a>
      </td>
    </tr>
  <% end %>
</tbody>

I have a modal header:

<div class="modal fade" id="property-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content"> 
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Property Payment Update</h4>
      </div>
      <div class="modal-body" id="test"></div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-default property-submit-status">Update</button>
       </div>
     </div>
   </div>
 </div>

Now using a script tag:

<script>
  $(document).ready(function (e) {
    $('.property-submit-status').on('click', function(e) {
      var payment_id =  $('#property-update').data('attr');
      e.preventDefault();
      e.stopPropagation();
      var postdata = { payment_id:payment_id };

      $.ajax({
        type: 'post',
        url: '/admin/properties/payments/update_transaction',
        data: postdata,
      }).done(function (data, textStatus, jqXHR) {
        $('.result').html(data);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        setNotification('error', 'Unknown Error. Try Again');
      });
    })
  });
</script>

I am not able to fetch the value of data-attr i.e properties_payment.id in var payment_id. How do I achieve this? Newbie to JavaScript.

fdomn-m · Accepted Answer · 2017-07-10 18:40:18Z

1

The issue is that your php loop creates multiple

a.property-update

so you can't simply use $('a.property-update').data('attr'); as you'll always get the first link, not the one clicked on.

You can 'remember' which link was clicked with:

$('#property-modal').on('show.bs.modal', function (e) {
    $('#property-modal').data("link", $(e.relatedTarget));
});

then in your submit handler:

$(document).on("click", ".property-submit-status", function(e) {
    var payment_id = $($('#property-modal').data("link")).data('attr');

Edit: additional info:

<a class="property-update" data-toggle="modal" data-target="#property-modal"
   data-payment-id='<%= properties_payment.id %>'
   data-bill-id='<%= properties_payment.bill_id %>'
   data-customer-inarreas='<%= properties_payment.customer_overdue %>'>
    Update Payment Transcation
</a>

read the same way, using a variable to improve efficiency:

$(document).on("click", ".property-submit-status", function(e) {
    var button = $($('#property-modal').data("link"));
    var payment_id = button.data('payment-id');
    var showOverdueWarning = button.data('customer-inarreas') == 'true';

    load_bill(button.data("bill-id"));
});

edited Jul 10, 2017 at 18:40

answered Jul 10, 2017 at 8:25

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahesh Mesta Over a year ago

Freedomn-m Ok...Thanks for the update. I am using Ruby loop here. what if I need to use multiple data attributes. Like for example along with data-attr, I want to use data-bill-id. Could you show me an example please with the same solution which you gave

SAMUEL · Accepted Answer · 2017-07-10 08:20:08Z

0

The issue is due to wrong selector for data.

You may pls try

$('a.property-update').data('attr');

answered Jul 10, 2017 at 8:20

SAMUEL

8,6223 gold badges46 silver badges44 bronze badges

Comments

Shabini Rajadas · Accepted Answer · 2017-07-10 08:21:54Z

0

Please replace your code as this,

<td>
 <a class="property-update"  data-toggle="modal" data-target="#property-modal" data-property='<%= properties_payment.id%>'>Update 
     Paym

And in the js method,

$('.property-update').attr("data-property")

property-update is a class and not an ID in the html view so use '.' instead of '#'

answered Jul 10, 2017 at 8:21

Shabini Rajadas

7718 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to fetch data-attr value in javascript and rails5?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related