Jquery appended html not working
I tried emptying the svg and adding some of its inner divs back, it doesn't work but can see parts of the html loading in the browser in a faded color. When I edit it in the browser and add it back, it works.
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>
so 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 would be really appreciated.
Thank!
+3
source to share
3 answers
This is because the SVG element is not dynamically updated. It should update after you update your container element. In that case, <li>
give it to it id='chart1'
, but I suggest using the container you specified for it.
$("#chart1").html($("#chart1").html());
Explanation: jquery app not working with svg element?
Example: http://jsbin.com/ejifab/1/edit
+1
source to share
Try with the html()
following.
$('#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();
0
source to share