0

I'm new to jQuery. I have link with a data-id attribute which is dynamically updated from select option value

<a id="jabatanID" href="#" data-id="{{$jabatan_id}}" class="btn btn-warning btn-block assigndata">Click</a>

The idea is if data-id is empty, then fire swal.alert, and then if not empty show modal and pass the data-id value to input id

The click button event are work for the first attempt, the problem is when i change the option select value this event $(".modal-body #jabatan_id").val(jabatan_id); not update with the new data-id value, even though data-id="{{$jabatan_id}}" was updated with new value

$(document).ready(function () {
        $(".assigndata").click(function () {
            var jabatan_id = $(this).data('id');
            if(jabatan_id == ''){
                Swal.fire({title: "Warning", text: "Please Choose jabatan ID", icon:"warning"});
            }
            else {
                $('#attachsertifikat').modal('show');
                $(".modal-body #jabatan_id").val(jabatan_id);
            }
        });
    });

Is there any cache on data-id that i have to reset or something??

Update with jsfiddle

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
PNBP
  • 45
  • 7
  • What do you mean by `when i change the option select...` ? Also are that button dynamically generated ? is your button event get called ? – Swati Oct 17 '20 at 09:18
  • Please check my example at given jsfiddle above – PNBP Oct 17 '20 at 10:12

1 Answers1

1

Try getting the data-id value with

    var jabatan_id = $(this).attr('data-id');

This is because you are setting the value with .attr('data-id') when changing the select value. Basically you should either use .data() or .attr() and not mix the two. You can find a more elaborate explanation on this here.

Robert Bisschop
  • 139
  • 5