Jquery data attribute value undefined

Question

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?

For what purpose you are using modal?

Ravi gohil
– Ravi gohil

2017-09-12 12:10:33 +00:00
Commented Sep 12, 2017 at 12:10 — Ravi gohil
– Ravi gohil, Commented Sep 12, 2017 at 12:10
@Ravigohil What does that matter?

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-09-12 12:11:17 +00:00
Commented Sep 12, 2017 at 12:11 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Sep 12, 2017 at 12:11

Carsten Løvbo Andersen · Accepted Answer · 2017-09-12 12:07:20Z

5

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>

answered Sep 12, 2017 at 12:07

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

4 Comments

Rushabh Shah Over a year ago

Sir it working here but not working on my link can you please check it. ec2-52-66-146-251.ap-south-1.compute.amazonaws.com/Purvi/…

Carsten Løvbo Andersen Over a year ago

@RushabhShah You get the following error in your console jQuery is not defined means your jquery is not loaded correctly

Rushabh Shah Over a year ago

Actually I forgot to add obj in this line show_modal(obj) now I added and it working fine thanks for your help.

Carsten Løvbo Andersen Over a year ago

@RushabhShah No problem, happy to help

Parvez Rahaman · Accepted Answer · 2017-09-12 12:17:51Z

0

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>

answered Sep 12, 2017 at 12:17

Parvez Rahaman

4,3973 gold badges24 silver badges39 bronze badges

Comments

Parvez Rahaman · Accepted Answer · 2017-09-12 12:21:05Z

0

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'); 
}

edited Sep 12, 2017 at 12:21

Parvez Rahaman

4,3973 gold badges24 silver badges39 bronze badges

answered Sep 12, 2017 at 12:15

Adil Amanat

701 silver badge6 bronze badges

3 Comments

Carsten Løvbo Andersen Over a year ago

using this in show_modal(this) will not work, since this is a reserved word.

Carsten Løvbo Andersen Over a year ago

Your still missing to add something to show_modal()

Adil Amanat Over a year ago

if #basic is your model then you have to use $('#basic').show() instead of $('#basic').modal('show');

Ravi gohil · Accepted Answer · 2017-09-12 12:37:45Z

0

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>

answered Sep 12, 2017 at 12:37

Ravi gohil

895 bronze badges

Collectives™ on Stack Overflow

Jquery data attribute value undefined

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related