Unable to retrieve data attribute value

Question

I'm trying to get the value of a data-* attribute to make a delete confirmation using bootstrap. The problem is I am unable to get the value of data-userid.

Html Code

<a href="#" 
   class="delete" 
   data-userid="{{ $adm->operator_id }}" 
   style="color:red;" 
   id="deleteuseradmin"  
   data-toggle="modal" 
   data-target="#deleteuseradmin"><i class="fas fa-times"></i></a>

Javascript Code

<script>
$('#deleteuseradmin').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var userid = button.data('userid')
    // var user_id = '2'
    var modal = $(this)
    console.log(button);

    modal.find('.modal-body #userid').val(userid);
});
</script>

when I console button the result is

Admin-view:488 init proto: Object(0) DataTable: ƒ (t) add: ƒ (e,t) addBack: ƒ (e) addClass: ƒ (e) affix: ƒ (c) after: ƒ () ajaxComplete: ƒ (e) ajaxError: ƒ (e) ajaxSend: ƒ (e) ajaxStart: ƒ (e) ajaxStop: ƒ (e) ajaxSuccess: ƒ (e) alert: ƒ (b) andSelf: ƒ (e) animate: ƒ (e,t,n,r) append: ƒ () appendTo: ƒ (e) attr: ƒ (e,t) bdatepicker: ƒ (t) before: ƒ () bind: ƒ (e,t,n) blur: ƒ (e,n) button: ƒ (c) carousel: ƒ (c) change: ƒ (e,n) children: ƒ (n,r) clearQueue: ƒ (e) click: ƒ (e,n) clone: ƒ (e,t) closest: ƒ (e,t) collapse: ƒ (c) combodate: ƒ (n) constructor: ƒ (e,n) contents: ƒ (n,r) contextmenu: ƒ (e,n) css: ƒ (e,t) data: ƒ (e,t) dataTable: ƒ (t) dataTableExt: {buttons: {…}, classes: {…}, build: "bs4/dt-1.10.18", errMode: "alert", feature: Array(0), …} dataTableSettings: [{…}] datepicker: ƒ (t) dblclick: ƒ (e,n) delay: ƒ (e,t) delegate: ƒ (e,t,n,r) dequeue: ƒ (e) detach: ƒ (e) domManip: ƒ (e,t,n) dropdown: ƒ (b) each: ƒ (e,t) editable: ƒ (n) editableContainer: ƒ (r) editableform: ƒ (n) editabletypes: {abstractinput: ƒ, list: ƒ, text: ƒ, textarea: ƒ, select: ƒ, …} editableutils: {inherit: ƒ, setCursorPosition: ƒ, tryParseJson: ƒ, sliceObj: ƒ, getConfigData: ƒ, …} empty: ƒ () end: ƒ () eq: ƒ (e) error: ƒ (e,n) extend: ƒ () fadeIn: ƒ (e,n,r) fadeOut: ƒ (e,n,r) fadeTo: ƒ (e,t,n,r) fadeToggle: ƒ (e,n,r) filter: ƒ (e) find: ƒ (e) finish: ƒ (e) first: ƒ () focus: ƒ (e,n) focusin: ƒ (e,n) focusout: ƒ (e,n) get: ƒ (e) has: ƒ (e) hasClass: ƒ (e) height: ƒ (r,i) hide: ƒ (e,r,i) hover: ƒ (e,t) html: ƒ (e) index: ƒ (e) init: ƒ (e,t,n) innerHeight: ƒ (r,i) innerWidth: ƒ (r,i) insertAfter: ƒ (e) insertBefore: ƒ (e) is: ƒ (e) jquery: "2.0.3" keydown: ƒ (e,n) keypress: ƒ (e,n) keyup: ƒ (e,n) last: ƒ () length: 0 load: ƒ (e,t,n) map: ƒ (e) modal: ƒ (c) mousedown: ƒ (e,n) mouseenter: ƒ (e,n) mouseleave: ƒ (e,n) mousemove: ƒ (e,n) mouseout: ƒ (e,n) mouseover: ƒ (e,n) mouseup: ƒ (e,n) next: ƒ (n,r) nextAll: ƒ (n,r) nextUntil: ƒ (n,r) not: ƒ (e) off: ƒ (e,t,n) offset: ƒ (e) offsetParent: ƒ () on: ƒ (e,t,n,r,i) one: ƒ (e,t,n,r) outerHeight: ƒ (r,i) outerWidth: ƒ (r,i) parent: ƒ (n,r) parents: ƒ (n,r) parentsUntil: ƒ (n,r) popover: ƒ (c) position: ƒ () prepend: ƒ () prependTo: ƒ (e) prev: ƒ (n,r) prevAll: ƒ (n,r) prevUntil: ƒ (n,r) promise: ƒ (e,t) prop: ƒ (e,t) push: ƒ push() pushStack: ƒ (e) queue: ƒ (e,t) ready: ƒ (e) remove: ƒ (e,t) removeAttr: ƒ (e) removeClass: ƒ (e) removeData: ƒ (e) removeProp: ƒ (e) replaceAll: ƒ (e) replaceWith: ƒ () resize: ƒ (e,n) scroll: ƒ (e,n) scrollLeft: ƒ (i) scrollTop: ƒ (i) scrollspy: ƒ (c) select: ƒ (e,n) selector: "" serialize: ƒ () serializeArray: ƒ () show: ƒ (e,r,i) siblings: ƒ (n,r) size: ƒ () slice: ƒ () slideDown: ƒ (e,n,r) slideToggle: ƒ (e,n,r) slideUp: ƒ (e,n,r) sort: ƒ sort() splice: ƒ splice() stop: ƒ (e,t,n) submit: ƒ (e,n) tab: ƒ (c) text: ƒ (e) toArray: ƒ () toggle: ƒ (e,r,i) toggleClass: ƒ (e,t) tooltip: ƒ (c) trigger: ƒ (e,t) triggerHandler: ƒ (e,t) typeahead: ƒ (c) unbind: ƒ (e,t) undelegate: ƒ (e,t,n) unload: ƒ (e,n) unwrap: ƒ () val: ƒ (e) width: ƒ (r,i) wrap: ƒ (e) wrapAll: ƒ (e) wrapInner: ƒ (e) proto: Object

references from https://www.youtube.com/watch?v=DAitIOhxOOA

Answer 1

The problem is with your usage of the show.bs.modal event. Your are binding it to your delete button #deleteuseradmin, when it should be bound to the modal window itself.

You need to make sure your delete button and delete modal have different id attributes.

Button HTML

<a href="#" 
   class="delete" 
   data-userid="{{ $adm->operator_id }}"
   id="deleteButton"
   data-toggle="modal" 
   data-target="#deleteModal"><i class="fas fa-times"></i></a>

Note that the data-target attribute is set to the id of the modal window deleteModal.

Modal HTML

<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 ...
</div>

Note that the id attribute is set to deleteModal.

Javascript

<script>
$('#deleteModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var userid = button.data('userid')

    var modal = $(this)
    console.log(button);
});
</script>

Note that we bind the show.bs.modal event to the id of the modal window deleteModal, not the id of the button.

Answer 2

In blade file:

<a href="javascript:void(0);" 
   class="delete _delete_data" 
   data-userid="{{ $adm->operator_id }}" 
   style="color:red;" 
   <i class="fas fa-times"></i>
</a>

In js code

<script>
    $(document).on('click', '._delete_data', function(){
         var user_id = $(this).attr('data-userid');

         console.log('user_id::', user_id); //your data attribute value

         //now open your modal
         $('#deleteuseradmin"').modal('show');
    });
</script>