CODEWITHSUNDEEP
javascriptjqueryhighcharts
bugmagnet
bugmagnet

Reputation: 7769

JQuery can't parse this HTML

Context: Highcharts, jQuery 1.9.1

I'm getting a Syntax error, unrecognized expression: out of the following HTML and JavaScript $.get-ed from our own site.

What's jQuery complaining about? If we execute Demo2_SP_plunkerPartial.prx in a browser, it works fine. (.prx is the extension of an in-house SSL.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<body>
<div>
  <div id="content">
    content from the partial
  </div>
    <div>Some other content</div>
    <script>
      alert('this is the alert from the partial')
    </script>

<SCRIPT type="text/javascript">
$(function () {
  $('#container').highcharts({
    chart : {
      zoomType : 'xy'
    },
    title : {
      text : ' '
    },
    legend : {
      align : 'center',
      verticalAlign : 'bottom'
    },
    xAxis : [{
        categories : ['0-100', '101-200', '201-300', '301-400', '401-500', '501-600', '601-700', '701-801', '901-1000', '1001-2000', '2001-5000', '5000+']
      }
    ],
    yAxis : [{ // Primary yAxis
        labels : {
          style : {
            color : '#89A54E'
          }
        },
        title : {
          text : 'Customers',
          style : {
            color : '#89A54E'
          }
        }
      }, { // Secondary yAxis
        title : {
          text : 'Value ($)',
          style : {
            color : '#4572A7'
          }
        },
        labels : {
          style : {
            color : '#4572A7'
          }
        },
        opposite : true
      }
    ],
    tooltip : {
      shared : true
    },
    series : [{
        name : 'Value ($)',
        color : '#4572A7',
        type : 'column',
        yAxis : 1,
        data : [52250, 195985, 512810, 318107.5, 1287202.5, 362520, 80037.5, 290510, 85975, 1403007.5, 1248727.5, 1025857.5, 172330]

      }, {
        name : 'Customers',
        color : '#89A54E',
        type : 'column',
        data : [550, 1032, 1918, 842, 2712, 639, 121, 389, 101, 1477, 841, 354, 24]
      }
    ]
  });
});
</SCRIPT>
</div>
</body>

</html>

This is the js code I'm using to get and parse the page:

$(function(){
    $.get('Demo2_SP_plunkerPartial.prx', function(result){
        try {
            $result = $(result);
        } catch (e) {
            console.log(e);
        }
        $result.find('#content').appendTo('#new_content');
        $result.find('script').appendTo('#new_content');
    }, 'html');
});

Upvotes: 1

Views: 153

Answers (1)

Teh SoTo
Teh SoTo

Reputation: 209

I've run a small test of your code and it seems functional to me, are you sure the server isn't running some kind of parsing before giving you the "GET" response?

Here is my test, the chart seems to work.

Upvotes: 1

Related Questions