1

In a Perl CGI script, I need to increment a Perl array index inside a <script> element to add each value in an array in each HTML

<p id="para1">
<p id="para2">
<p id="para3">
...
<p id="paraN">

one by one.

The number of <p> tags and the length of the Perl array variable is same.

I tried using JavaScript to increment the Perl array index variable, but it's not working.

Is there any other way possible to do this?

Sample code:

#!/usr/bin/perl

print "content-type:text/html\n\n";

my @jslabel = ('1', '2', '3');

print <<EOF;
<html>
  <head>
  </head>
  <body>
    <p id="para0"> hi </p>
    <p id="para1"> hi </p>
    <p id="para2"> hi </p>
  </body>
  <script>
    for( var i = 0; i < 3; i++ )
    {
      document.getElementById("para"+i).innerHTML = $jslabel[i];
    }
  </script>
</html>
EOF

The web page should show like this:

1
2
3

But, the outcome for the given code:

1
1
1

How to achieve the desired result?

Borodin
  • 126,100
  • 9
  • 70
  • 144
D.Karthikeyan
  • 73
  • 6
  • Why do you load the `CGI` module and then not use it at all? – Dave Cross Aug 12 '16 at 12:02
  • @Quentin My problem is on practically possible ways to implement a Perl array variable inside java script in Perl CGI script but the link you provided for mark my question as duplicate explains about working principle of server side and client side programming.The link you mentioned thought me about server side and client side programming but that doesn't gave me solution to my question. – D.Karthikeyan Aug 18 '16 at 13:26

2 Answers2

3

You may be able to solve the problem by JSON encoding your perl data, and then reading the data from that with your javascript.

#! /usr/bin/perl

use strict;
use warnings 'all';

use CGI;
use JSON;

# note that JSON expects array references
my $jslabel = [ 1, 2, 3 ];

# if we're using CGI, we may as well use it's functions
my $cgi = CGI->new();
print $cgi->header('text/html');

# convert our array to JSON
my $data = to_json($jslabel);

my $html = qq:
<html>
    <head>
        <title>A title is always nice</title>

        <!-- javascript is best served inside the <header> -->
        <script>
             <!-- we're inserting the data here because of use of qq// -->
             var jslabel = $data
             for(var i=0;i<3;i++) {
                 document.getElementById("para"+i).innerHTML = jslabel[i];
             }
        </script> 
    </head>
    <body>
        <p id="para0"></p>
        <p id="para1"></p>
        <p id="para2"></p>
    </body>
</html>:;

print $html;

However I'd also point that html documents are better served out of "template files" and data inserted to them via modules that provide that functionality. Good examples of modules from CPAN that provide that functionality are HTML::Template or Template::Toolkit. However this is beyond the scope of the question.

Another alternative is to use some form of AJAX mechanism to fetch the results "live" data from a seperate CGI script and populate from the returned results (that is more of a "Web 2.0" way of approaching things).

Drav Sloan
  • 1,562
  • 9
  • 13
0

There seems to be some funny behaviour in the way javasCript understands the perl arrays and uses them, I would write the array in javasCript code

I would declare the array in javasCript, and use it in javaScript.

<script>
    var jslabel = ['1','2','3'];
    var i;
    for (i = 0; i < 3; i+=1) {
        document.getElementById("para" + i).innerHTML = jslabel[i];
    }
</script>
E.Serra
  • 1,495
  • 11
  • 14