Passing dynamic class name to JavaScript function

Question

I have a div inside a foreach loop I'm using to display content in view

<div class="someclass" data-id="[email protected]">
    <p> text1 </p>
    <p> text2 </p>
<span class="otherClass embedIcon"></span>
</div>

I'm trying to target the id attribute using the

$(".embedIcon")
    .click(function () {
        html2canvas($(this).data('data-id'),{
            onrendered: function (canvas) {
                var myImage = canvas.toDataURL("image/png", 1);
                window.open(myImage);
            }
        });
    });

When I click the icon on which embedIcon class is applied to generates an image, I get an image of all divs in the iteration.

How can I get the image of a specific div when I click the icon within the div?

post full code.

Mahi
– Mahi

2016-12-09 05:40:50 +00:00
Commented Dec 9, 2016 at 5:40 — Mahi
– Mahi, Commented Dec 9, 2016 at 5:40
it should be like this html2canvas($(this).data('id')

Bharat
– Bharat

2016-12-09 05:41:36 +00:00
Commented Dec 9, 2016 at 5:41 — Bharat
– Bharat, Commented Dec 9, 2016 at 5:41
@Mahi I posted full code

hello
– hello

2016-12-09 05:48:22 +00:00
Commented Dec 9, 2016 at 5:48 — hello
– hello, Commented Dec 9, 2016 at 5:48

phobia82 · Accepted Answer · 2016-12-09 07:02:56Z

1

Your id is on your parent div, not on the embedIcon, so you can use 2 options

var id = $(this).parent().data('id')
html2canvas(id, {

or

var id = $(this).closest('.someclass').data('id')
html2canvas(id, {

Update:

html2canvas accepts the element as first parameter, not the id, so you only need to pass the parent to your html2canvas call, you don't need the data-id. You can use .parent() or .closest(".someclass")

$(".embedIcon")
    .click(function () { 
        html2canvas($(this).parent(),{
            onrendered: function (canvas) {
                var myImage = canvas.toDataURL("image/png", 1);
                window.open(myImage);
            }
        });
    });

edited Dec 9, 2016 at 7:02

answered Dec 9, 2016 at 6:08

phobia82

1,2578 silver badges10 bronze badges

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

5 Comments

hello Over a year ago

The second option does not achieve desired result. I get this error Uncaught TypeError: node.setAttribute is not a function(…) when I try the first option

phobia82 Over a year ago

sorry I forgot the dot before the class name, updated

phobia82 Over a year ago

same error with both options?, can you do a console.log(id) before passing it to html2canvas?

hello Over a year ago

I get actual value of data-id in log but error still show up in application.

phobia82 Over a year ago

@hello html2canvas accepts the element as first parameter, not the id, check the tested updated answer before.

Mayank Pandeyz · Accepted Answer · 2016-12-09 05:44:51Z

0

If you are using data() than it should be like:

$(this).data('id');

and if using attr() than it should be like:

$(this).attr('data-id');

answered Dec 9, 2016 at 5:44

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

1 Comment

hello Over a year ago

I still get same behaviour as before. Check updated question and sample code.

Collectives™ on Stack Overflow

Passing dynamic class name to JavaScript function

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related