Keyur Patel Keyur Patel - 7 months ago 12
Javascript Question

I am tring to pass SVG in jquery ajax data but it returns "SyntaxError: unterminated string literal"


I am trying to pass a variable $output which contains SVG.

Here is my ajax.


<script>
jQuery.ajax({
url: 'http://hunani-infotech.com/cleanstream/wp-content/themes/phosphor/ajax.php',
type: 'POST',
data: {'pdf001': 'pdf001','attendee_id':'<?php print $attendee_id;?>','graph':'<?php print $output;?>'},
success: function (response)
{
alert(response);
}
});
</script>



My variable $output contains the SVG as below.


<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="600" height="500" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="ee"><rect x="90" y="10" width="420" height="477"/></clipPath><symbol><rect id="ef" cursor="crosshair" fill="yellow" y="-5" x="-5" height="10" width="10"/></symbol><linearGradient id="ed" x1="0" x2="0" y1="0" y2="100%"><stop offset="0%" stop-color="red"/><stop offset="100%" stop-color="yellow"/></linearGradient></defs><rect width="100%" height="100%" fill="#eee" stroke-width="0px"/><path d="M300 248.5L300 248.5 300 248.5 300 248.5 300 248.5 300 248.5 300 248.5 300 248.5 zM300 222.25L300 222.25 277.27 235.38 277.27 261.62 300 274.75 322.73 261.62 322.73 235.37 300 222.25 zM300 196L300 196 254.53 222.25 254.53 274.75 300 301 345.47 274.75 345.47 222.25 300 196 zM300 169.75L300 169.75 231.8 209.13 231.8 287.88 300 327.25 368.2 287.88 368.2 209.12 300 169.75 zM300 143.5L300 143.5 209.07 196 209.07 301 300 353.5 390.93 301 390.93 196 300 143.5 zM300 117.25L300 117.25 186.33 182.88 186.33 314.12 300 379.75 413.67 314.12 413.67 182.87 300 117.25 zM300 91L300 91 163.6 169.75 163.6 327.25 300 406 436.4 327.25 436.4 169.75 300 91 zM300 64.75L300 64.75 140.87 156.63 140.87 340.38 300 432.25 459.13 340.37 459.13 156.62 300 64.75 zM300 38.5L300 38.5 118.13 143.5 118.13 353.5 300 458.5 481.87 353.5 481.87 143.5 300 38.5 zM300 248.5l2.5718E-14 -210M300 248.5l-181.87 -105M300 248.5l-181.87 105M300 248.5l-5.1435E-14 210M300 248.5l181.87 105M300 248.5l181.87 -105M300 248.5l7.7153E-14 -210" stroke="#666" fill="none"/><g clip-path="url(#ee)"><path fill="url(#ed)" fill-opacity="0.5" stroke-dasharray="" stroke-width="2px" stroke="red" d="M300 232.22 L209.07 196 216.11 296.93 300 377.65 439.81 329.22 467.77 151.64 z"/></g><path d="M300 35.5l-3.6739E-16 3M115.54 142l2.5981 1.5M115.54 355l2.5981 -1.5M300 461.5l7.3479E-16 -3M484.46 355l-2.5981 -1.5M484.46 142l-2.5981 1.5M300 35.5l-1.1022E-15 3M303 248.5l-6 -1.1022E-15M303 222.25l-6 -1.1022E-15M303 196l-6 -1.1022E-15M303 169.75l-6 -1.1022E-15M303 143.5l-6 -1.1022E-15M303 117.25l-6 -1.1022E-15M303 91l-6 -1.1022E-15M303 64.75l-6 -1.1022E-15M303 38.5l-6 -1.1022E-15M302 243.25l-2 -3.6739E-16M302 238l-2 -3.6739E-16M302 232.75l-2 -3.6739E-16M302 227.5l-2 -3.6739E-16M302 217l-2 -3.6739E-16M302 211.75l-2 -3.6739E-16M302 206.5l-2 -3.6739E-16M302 201.25l-2 -3.6739E-16M302 190.75l-2 -3.6739E-16M302 185.5l-2 -3.6739E-16M302 180.25l-2 -3.6739E-16M302 175l-2 -3.6739E-16M302 164.5l-2 -3.6739E-16M302 159.25l-2 -3.6739E-16M302 154l-2 -3.6739E-16M302 148.75l-2 -3.6739E-16M302 138.25l-2 -3.6739E-16M302 133l-2 -3.6739E-16M302 127.75l-2 -3.6739E-16M302 122.5l-2 -3.6739E-16M302 112l-2 -3.6739E-16M302 106.75l-2 -3.6739E-16M302 101.5l-2 -3.6739E-16M302 96.25l-2 -3.6739E-16M302 85.75l-2 -3.6739E-16M302 80.5l-2 -3.6739E-16M302 75.25l-2 -3.6739E-16M302 70l-2 -3.6739E-16M302 59.5l-2 -3.6739E-16M302 54.25l-2 -3.6739E-16M302 49l-2 -3.6739E-16M302 43.75l-2 -3.6739E-16" stroke-width="1px" stroke="#333"/><g stroke="#333" stroke-width="2px"><path d="M300 38.5L300 38.5 118.13 143.5 118.13 353.5 300 458.5 481.87 353.5 481.87 143.5 300 38.5 z" fill="none"/><path d="M300 248.5l2.5963E-14 -212"/></g><g font-size="14px" font-family="Georgia" fill="#333"><g text-anchor="end"><text x="295" y="248.5">0</text><text x="295" y="222.25">100</text><text x="295" y="196">200</text><text x="295" y="169.75">300</text><text x="295" y="143.5">400</text><text x="295" y="117.25">500</text><text x="295" y="91">600</text><text x="295" y="64.75">700</text><text x="295" y="38.5">800</text></g><text x="300" y="22.3" text-anchor="middle">category1</text><text x="113.8" y="136.8" text-anchor="end">category2</text><text x="113.8" y="365.8" text-anchor="end">category3</text><text x="300" y="473.3" text-anchor="middle">category4</text><text x="486.2" y="365.8" text-anchor="start">category5</text><text x="486.2" y="136.8" text-anchor="start">category6</text></g><use x="300" y="232.22" xlink:href="#ef" id="eh"></use><use x="209.07" y="196" xlink:href="#ef" id="ei"></use><use x="216.11" y="296.93" xlink:href="#ef" id="ej"></use><use x="300" y="377.65" xlink:href="#ef" id="ek"></use><use x="439.81" y="329.22" xlink:href="#ef" id="el"></use><use x="467.77" y="151.64" xlink:href="#ef" id="em"></use></svg>



It returns the error as given in the image below.
enter image description here

Answer

It seems like the $output variable contains characters which can break your javascript string.
Try to quote the xml string with addslashes function and remove line breaks(if exist) with preg_replace:

...
data: {
       'pdf001': 'pdf001',
       'attendee_id':'<?php print $attendee_id;?>',
       'graph':'<?php print addslashes(preg_replace("/[\n\r]/i", $output));?>'
},
...
Comments