in reply to jquery scripts

dear brothers

Thank you for your helpful answers to my question about jquery scripts

My solution to this problem is shown in the short cgi program below. However, I can't help feeling that this solution is not just clunky, but probably heretical. Can you show me the way to do it properly?

#!/usr/bin/perl -w
use CGI ':standard'; use CGI::Carp(fatalsToBrowser);
print "Content-type: text/html\n\n";

###data in Json format is prepared by the cgi script and added to the 
+first line of the script
my $dline="<script> var data=[[1,13],[2,25],[3,17],[4,3],[5,10]];";
###$pt2 defines what the graph output looks like.
my $pt2='var dataset = [{data: data}];
         var options = {series: {lines: { show: true },points: {radius
+: 3,show: true} } };
         $(document).ready(function (){$.plot($("#mychart"), dataset, 
+options);});
</script>
';
###$pscript is a jquery script made up of $dline and $pt2
my $pscript=$dline.$pt2;

##code for HTML output
my $htmlHeader='
<!DOCTYPE html PUBLIC>
<html>
<head>
     <style>
        body { background: #99bbee;}
        #mychart {width:250px;height:300px;background:white;}        
     </style>
     <script src="jquery-1.11.3.min.js"></script>
     <script  src="jquery.flot.min.js"></script>
     </head>
';

my $body='  
<body>
<div id="mychart"></div>
<p><hr><p>
</body>
</html>
';
###print the graph
print qq($htmlHeader);
print qq($body);
print qq($pscript);

[download]

Replies are listed 'Best First'.
Re^2: jquery scripts
by Corion (Patriarch) on Oct 05, 2015 at 08:13 UTC

    The traditional approach is to move the HTML into a templating system instead of several print statements. This allows you to keep your code separate from the presentation part in the template. Depending on your workflow, this makes it possible for people other than you to change the HTML as it is generated.

    For example using Template::Toolkit:

    use strict;
use Template;

my $json = '[[1,13],[2,25],[3,17],[4,3],[5,10]]'; # or use JSON.pm

use CGI ':standard'; use CGI::Carp(fatalsToBrowser);
print "Content-type: text/html\n\n";

my $tmpl = Template->new();
$template->process('/home/hermit23/mysite/mytemplate.tt', {
    json => $json,
});

    [download]

    With the template file /home/hermit23/mysite/mytemplate.tt containing:

    <!DOCTYPE html PUBLIC>
<html>
<head>
     <style>
        body { background: #99bbee;}
        #mychart {width:250px;height:300px;background:white;}        
     </style>
     <script src="jquery-1.11.3.min.js"></script>
     <script  src="jquery.flot.min.js"></script>

<script>
var data= [% json %];
var dataset = [{data: data}];
         var options = {series: {lines: { show: true },points: {radius
+: 3,show: true} } };
         $(document).ready(function (){$.plot($("#mychart"), dataset, 
+options);});
</script>
     </head>
<body>
<div id="mychart"></div>
<p><hr><p>
</body>
</html>

    [download]

    Note the [% json %], which will get replaced verbatim by the value of the json key in the parameters to ->process(...)

[reply]
[d/l]
[select]
Re^2: jquery scripts
by Anonymous Monk on Oct 05, 2015 at 08:28 UTC
    If you're going to  use CGI ':standard'; then use header() instead of  "Content-type: text/html\n\n";
[reply]
[d/l]
[select]

      Thanks to Corion, Sundialsvc4, Golux and Anonymous monks for their comments on my question about jQuery scripts. Much appreciated. The suggestion to use HTML Templates has been particularly useful.

[reply]

In Section Seekers of Perl Wisdom