CODEWITHSUNDEEP
jquery
Rushabh Shah
Rushabh Shah

Reputation: 131

Jquery data attribute value undefined

HTML:

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

jQuery:

function show_modal(){
    alert($(this).data("type"));
    $('#basic').modal('show'); 
}

Output:

Undefined

Expected Output:

Invoice Generate

Anyone can please tell me why it alerting undefined and How can I resolve it?

Upvotes: 5

Views: 5091

Answers (4)

Ravi gohil
Ravi gohil

Reputation: 89

Hope this is your solution

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button>

<script>
   function show_modal(ele){

      alert($(ele).data("type"));
      $('#basic').modal('show'); 
   }
</script>

Upvotes: 0

Adil Amanat
Adil Amanat

Reputation: 70

you are calling function you have to pass this will function like

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

And in JS

function show_modal(ob){
    alert($(ob).data("type"));
    $('#basic').modal('show'); 
}

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

Or if you want to use $(this) attach an event handler to the element using it's class or id like this..

$('.filter-submit').on('click', function(){
  alert($(this).data("type"));
})


$('.filter-submit').on('click', function() {
  alert($(this).data("type"));
  //$('#basic').modal('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate"><i class="fa fa-envelope"></i>Show</button>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You show_modal function don't know what $(this) is. so add this to onclick="show_modal()" like onclick="show_modal(this)"

Then you, of course, has to update your function as well as below:

function show_modal(obj){
    alert($(obj).data("type"));
    $('#basic').modal('show'); 
}


function show_modal(obj){
    alert($(obj).data("type"));
    $('#basic').modal('show'); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button>

Upvotes: 5

Related Questions