CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
AshanD
AshanD

Reputation: 527

jquery appended html is not working

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!

Upvotes: 3

Views: 112

Answers (3)

John R
John R

Reputation: 2791

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();

Upvotes: 0

Bilal
Bilal

Reputation: 265

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

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

Upvotes: 0

DDan
DDan

Reputation: 8286

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

Upvotes: 1

Related Questions