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

A screenshot of your console would be more informative than that wall of text — Phil, May 20 '19 at 02:21
Also, since `button` is a jQuery object, you'll get a better console result with `console.log(button[0])` — Phil, May 20 '19 at 02:22
What is the actual problem? Does your code not work? What do you expect to happen vs what actually happens? — Phil, May 20 '19 at 02:23
The result of what? Where do you see this `undefined`? What do you expect to see and where? — Phil, May 20 '19 at 02:26
That code is not in your question anywhere. Please read all the comments above and address each question carefully. [Edit your question](https://stackoverflow.com/posts/56213483/edit) to provide more details — Phil, May 20 '19 at 02:28
This is a duplicate of [how-to-get-the-data-id-attribute](https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) I guess. My only guess why it is not working is that relatedTarget is not the button you actually want, or is not being transformed to JQuery element correctly. anyway I suggest you do this the native way `button.getAttribute('data-userid')` — SaMiCoOo, May 20 '19 at 02:30
@AbdullahTayel OP should not have any issue using jQuery's `.data()`. Their code is almost exactly the same as the [Bootstrap docs example](https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content) — Phil, May 20 '19 at 02:32
remove the casting `$(nativeHTMLElement)` `var button = event.relatedTarget` not `var button = $(event.relatedTarget)` then use `button.getAttribute('data-userid')` and again please be sure that `relatedTarget` is referring to the correct button — SaMiCoOo, May 20 '19 at 02:36
And you made sure that `relatedTarget` is the button you want? — SaMiCoOo, May 20 '19 at 02:41
@AbdullahTayel i get error like this Uncaught TypeError: Cannot read property 'getAttribute' of undefined — M Romi Muhtarom, May 20 '19 at 02:42
oh I forgot to said that I am using http://code.jquery.com/jquery-2.0.3.min.js library @Phil — M Romi Muhtarom, May 20 '19 at 02:45
I have a feeling that your usage of `show.bs.modal` isn't correct. If you add a `console.log('TEST')` in the top line of the `$('#deleteuseradmin').on('show.bs.modal', function (event) {` function, does it echo TEST in the console When you expect it to? — Jeemusu, May 20 '19 at 03:50

score 1 · Accepted Answer · answered May 20 '19 at 04:02

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>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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.