4

I'm trying to initiate a DataTables instance with the following code...

<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
        $('#example').DataTable();
} );
</script>

But when I access the HTML via web the browser shows an "Uncaught SyntaxError: Unexpected number" error and this is how the source looks from the browser...

<script type="text/javascript" language="javascript" class="init">
0 11 4 3 2 1 0document).ready(function() {
    0 11 4 3 2 1 0'#example').DataTable();
} );
</script>

As you can see some instructions have been replaced by the numbers "0 11 4 3 2 1" and I don't know what is causing it.

jQuery is src from Google and the DataTables javascript from their CDN.

I'm creating the HTML from a Perl script using CGI, printing the Content-type:text/html header and used different !DOCTYPEs... but still nothing. Editing the code shows no hidden chars.

Your help will be much appreciated.

Best, e.

EDIT: This is the Perl code creating the HTML...

use Switch;
use CGI qw/:standard/;
use CGI::Carp 'fatalsToBrowser';

print "Content-type:text/html\r\n\r\n";

print qq{<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript">
/* <![CDATA[ */
$(document).ready(function() {
        $('#example').DataTable();
} );
/* ]]> */
</script>
</head>};
Emiliano
  • 83
  • 6

1 Answers1

4

The problem is that qq interpolates variables and your HTML string contains the special variable $(:

$(document).ready(function() {
        $('#example').DataTable();

According to perldoc perlvar:

$(

The real gid of this process. If you are on a machine that supports membership in multiple groups simultaneously, gives a space separated list of groups you are in. The first number is the one returned by getgid(), and the subsequent ones by getgroups(), one of which may be the same as the first number.

Each occurrence of $( in your string is replaced with the list of GIDs that your webserver user belongs to.

You can see this on the command line:

perl -wE 'say qq{$(document).ready(function()}'

outputs

3000 3000document).ready(function()

on my system.

Use q instead of qq to avoid interpolating things as Perl variables.

ThisSuitIsBlackNot
  • 23,492
  • 9
  • 63
  • 110
  • 2
    alternatively, if you do actually want to interpolate some variables, escape every `$` that doesn't start a variable (e.g. `\$(document).ready`) – ysth Dec 02 '14 at 23:24
  • One more alternative I have used, change your jQuery onReady, you probably should anyway, to something like `jQuery(function(jQ) { …`. Then just use `jQ` everywhere you would have used `$`. – Ashley Dec 03 '14 at 03:31
  • @Ashley When you start bastardizing your JavaScript code like that, you should probably look at putting it in separate, static files or using a templating system like [Template Toolkit](http://www.template-toolkit.org/). – ThisSuitIsBlackNot Dec 03 '14 at 15:45
  • Thank you for noticing my qq's typo @ThisSuitIsBlackNot! Thank you all for your answers! – Emiliano Dec 03 '14 at 19:43
  • @ThisSuitIsBlackNot Bastardizing? That’s a well known jQuery idiom used sometimes just for dealing JS conflicts. It’s also the recommended way over the `ready` stuff. I use TT2. I have a plugin on the CPAN for it. I also use Alloy, Xslate, and others; I also do inline stuff and one-offs. – Ashley Dec 04 '14 at 18:59