jquery appended html is not working

Question

I tried to empty a svg and append some it's inner divs back, it doesn't work but can see the html parts are loaded in the browser in faded colour. When i edited it in the browser and add it back it works.

The div part,

<li class="chart">
    <svg id="lineChartSVG" class="lineChart--svg">
       <defs>
           <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
                            <stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
                            <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </linearGradient>
         </defs>
     </svg>               
 </li>

this is the way i did,

$('#lineChartSVG').empty();
 var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
 $('#lineChartSVG').append(html);
 inFlightRequestCountChart();

Any help will be really appreciated.

Thank You!

I remember some problems with jQuery ans svg I had once. Problem was jQuery treats attributes not as case sensitive, but svg requires case sensitive attributes. Maybe check on that. — user3154108, Aug 05 '15 at 07:59
why don't you simply use `li` element to insert html and re initiate chart instance. if problem occur for chart — Noman, Aug 05 '15 at 08:01

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

It is because the SVG element is not updated dynamically. It should update once you refreshed your container element. In this case <li> i.e. give it id='chart1', but I suggest to use a specified (by you) container for it.

$("#chart1").html($("#chart1").html());

Explanation: jquery's append not working with svg element?

Example: http://jsbin.com/ejifab/1/edit

edited May 23 '17 at 12:08

Community

1
1

answered Aug 05 '15 at 08:08

DDan

8,068
5
33
52

score 0 · Answer 2 · answered Aug 05 '15 at 08:11

0

Please Try also, to empty the contents of the tag.

 $('#lineChartSVG').text('');

answered Aug 05 '15 at 08:11

Bilal

265
8
20

score 0 · Answer 3 · answered Aug 05 '15 at 08:53

Try with html() like this.

$('#lineChartSVG').empty();
var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
$('#lineChartSVG').html(html);
inFlightRequestCountChart();

jquery appended html is not working

3 Answers3