comment on

Hi hermit23,

Here's a short but complete example of a self-contained CGI script that will query the server and display the data points it gets back.

It makes use of Javascript/jQuery, and calls back to the server once, using Ajax to get the data points, which it then displays to page. You can, of course, modify the subroutine "server_side_ajax()" to have more meaningful points than the random ones my script generates. Plus, you can do something more fun with the points in the javascript function "done_query" than just print them to the page.

Of course, let us know if you have any questions.

Update: And if you were only asking about how not to use '$', pay special attention to the line "var J = jQuery.noConflict();" which enables the magic letting you refer to jQuery with 'J' (or whatever else you like) instead of '$'.

#!/usr/bin/perl

###############
## Libraries ##
###############
use strict;
use warnings;
use JSON;

##################
## User-defined ##
##################
# This is a link to Google's publicly-available jQuery library
my $jquery = "ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
+";


##################
## Main Program ##
##################
my $this_prog = $ENV{'REQUEST_URI'};
my $h_param   = cgi_params();

if (exists $h_param->{'ajax'}) {
    # If 'ajax' was sent in the URL, it's the client communicating
    # with the Server via Ajax.  See function ajax_query_server(),
    # which initiates this.  You could also put '?ajax' in the URL
    # query to see the data results directly.
    ##
    server_side_ajax();
} else {
    # If the URL doesn't contain the key 'ajax', we display the HTML
    # page normally.
    ##
    print "Content-type:  text/html\n\n";
    print_javascript();
    print_html_page();
}


#################
## Subroutines ##
#################
sub cgi_params {
    my $query = $ENV{'QUERY_STRING'} || 0;
    $query or return { };

    my $h_params = { };
    foreach my $key (split('&', $query)) {
        my $val = ($key =~ s/=(.*)$//)? $1: undef;
        $h_params->{$key} = $val;
    }

    return $h_params;
}


sub server_side_ajax {
    # Calculate data somehow
    my $a_data = [ ];

    my $npoints = 16;

    # For the sake of example, just randomize it for now
    for (my $i = 0; $i < $npoints; $i++) {
        my ($x, $y) = (int(rand(100)), int(rand(100)));
        push @$a_data, [ $x, $y ];
    }

    my $h_json = { 'data' => $a_data };

    # Print the JSON header and data
    print "Content-type:  application/json\n\n";
    print to_json($h_json);
    exit;
}


sub print_javascript {
    # Send the jQuery/Javascript code to the browser
    print qq{
        <head>
          <script src="https://$jquery"></script>

          <script>
            // I prefer 'J' to '$' for jQuery within Perl
            var J = jQuery.noConflict();
            J(function() { ajax_query_server() });
    
            // Here the browser talks to the server
            function ajax_query_server() {
                J.ajax({
                    url:     "$this_prog",
                    dataType: 'json',
                    data:    { ajax: 1 },
                    success: function(json) { done_query(json); }
                });
            }
    
            // Here the browser gets data back from the server
            function done_query(json) {
                var a_points = json['data'];
                for (var i = 0; i < a_points.length; i++) {
                    var x    = a_points[i][0];
                    var y    = a_points[i][1];
                    var text = "Point "+(i+1)+": ("+x+","+y+")\\n";
                    J('#data').append(text);
                }
            }
          </script>
        </head>
    };
}


sub print_html_page {
    # Here's where the HTML body gets printed
    print qq{
        <body style="background:peachpuff">
            <h3> Ajax Data Example </h3>
            <pre id="data"></pre>
        </body>
    };
}
[download]

say substr+lc crypt(qw $i3 SI$),4,5

In reply to Re: jquery scripts by golux
in thread jquery scripts by hermit23

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


Perl: the Markov chain saw
	PerlMonks