jquery $('div').html not working with third party modules (Angular)

Question

I am having trying to show content of a <div id="right"> when a mouse is hovered on another div. #right contains a graph from Angular-charts (http://jtblin.github.io/angular-chart.js/).

Here is my jQuery:

                    <div>
                       <div>
                          <canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick">
                          </canvas>
                       </div>
                       <h3>Some text</h3>
                    </div>

I tried implementing this to show in #right when hovered over my other div in my jQuery.

 $(function(){

          $('#some_other_div').on('mouseover', function(){
            $('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');
            })     
    });

When hovering on some_other_div, Only a blank space and Some text shows at the bottom. I made sure the graph works elsewhere when implementing it directly in HTML. Only facing this problem through .html.

Is there a way to fix this? Thank you.

If you're using angular then you should check some things that doesn't play well with it, like using jquery in the bad way, you should use it the angular way — Jonathan Solorzano
– Jonathan Solorzano, Commented Sep 30, 2015 at 4:06
Check out this post (Don't care about the -1, read the content) i posted some links to understand it. — Jonathan Solorzano
– Jonathan Solorzano, Commented Sep 30, 2015 at 4:12

Charlie · Accepted Answer · 2015-09-30 05:57:26Z

0

Changing the html outside the Angular system doesn't tell Angular that the DOM is changed for it to act. Try doing the change via $apply() function.

angular.element("#some_other_div").scope().$apply($('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');)

answered Sep 30, 2015 at 5:57

Charlie

24k12 gold badges65 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

jquery $('div').html not working with third party modules (Angular)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related