0

I'm trying to add a SVG string received as response in ajax call to a div. But its not working here is my code.

main.js

function update() {
    var axis1Value = $('#axis1 :selected').text().trim();
    var axis2Value = $('#axis2 :selected').text().trim();
    var shapeBy =  $('#shape :selected').text().trim();
    var colorBy =  $('#colorField').val();
    var myData = '{ "column_names":["'+axis1Value+'","'+axis2Value+'"], "color_by":"'+colorBy+'","shape_by":"'+shapeBy+'"}';
    $.ajax({
       type: 'POST',
       url: 'http://localhost:9080/sample-demo/api/samplechart/create',
       data: myData,
       success: function(result) {
         console.log(result);
         var el = $('#mychart');
         el.remove();   
         el.append(result); 
       },
       contentType: "application/json",
       dataType: "html"
    });
}
Community
  • 1
  • 1
Vivek Pathak
  • 7
  • 1
  • 5
  • you need to register a callback function that will be executed when the result arrives: http://api.jquery.com/jquery.ajax/ – mb21 Sep 19 '14 at 10:27
  • should your return type really be html ? jquery doesnt really understand svg/xml especially not namespaced, if you want you could use SVG Canvas (jQuery plugin) – DarkMukke Sep 19 '14 at 10:29
  • @mb21 there is a success function – DarkMukke Sep 19 '14 at 10:29
  • @DarkMukke oh, that's why indentation is important, edited your post, what does the console.log show in the dev console? – mb21 Sep 19 '14 at 10:49
  • @DarkMukke yes type should be html as doing console.log(results) in call back function logs the desired response. Issue is even if i do el.append("text") its not getting reflected in div. Is there any specific way through which append operation can be done in xhml? – Vivek Pathak Sep 19 '14 at 10:49
  • http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element So `document.getElementById('mychart').appendChild(result);` – mb21 Sep 19 '14 at 10:51
  • @mb21 console.log shows shows "...." string which i'm returning as a response from my service. – Vivek Pathak Sep 19 '14 at 10:52
  • @VivekPathak is that the raw result of console.log ? or is that the ff/chrome cleaned up one ? can you inspect what the ajax call actually returns ? like headers, charset etc, jquery might not understand what it is, and if it doesnt understand it will not put it in the DOM as valid xhtml/svg and therefor it will not showup – DarkMukke Sep 19 '14 at 11:56
  • @DarkMukke Its the raw result.Ajax is returning a svg string. http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element solves the problem. – Vivek Pathak Sep 19 '14 at 13:45
  • @VivekPathak which is exactly what I said, jquery does not understand SVG as HTML or DOM so it would not be able to load it as you wanted to (as you can with HTML), if you would have parsed it as text and have a return type text, you could have loaded it directly into your DOM without any jquery html parsing – DarkMukke Sep 19 '14 at 15:06

0 Answers0