#!/usr/bin/perl -w # # Simple jQuery example to demonstrate: # # CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax # # 2013-08-21 golux ## ############### ## Libraries ## ############### use strict; use warnings; use CGI qw{ :standard }; use CGI::Carp qw{ fatalsToBrowser }; ################## ## User-defined ## ################## my $jquery = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; my $max = 625; my $ncols = 25; ################## ## Main program ## ################## server_side_ajax(); print_page_header(); print_html_head_section(); print_html_body_section(); ################# ## Subroutines ## ################# sub print_page_header { # Print the HTML header (don't forget TWO newlines!) print "Content-type: text/html\n\n"; } sub print_html_head_section { # Include stylesheet 'pm.css', jQuery library, # and javascript 'pm.js' in the of the HTML. ## print "\n"; print "\n"; print "\n"; print "\n"; print "\n"; } sub print_html_body_section { # Create HTML body and show values from 1 - $max ($ncols per row) print "\n"; print "\n"; print "

Click any number to see its factors

\n"; print qq{

}; print qq{

\n}; print ""; for (my $i = 0; $i < $max; $i++) { (0 == $i % $ncols) and print "\n"; my $num = $i + 1; my $onclick = qq{onclick="show_factors($num)"}; print qq{

$num\n}; } print "

"; print "\n"; print "\n"; } sub server_side_ajax { my $mode = param('mode') || ""; ($mode eq 'info') or return; # If we get here, it's because we were called with 'mode=info' # in the HTML request (via the ajax function 'ajax_info()'). ## print "Content-type: text/html\n\n"; # Never forget the header! my $ltime = localtime(); print "Server local time is $ltime"; exit; } ##

##

body {
        background:  #ffcfff;
        font-family: arial;
}

.data {
        border:      1px solid black;
        text-align:  center;
        cursor:      pointer;
        min-width:   32px;
        min-height:  32px;
        width:       32px;
        height:      32px;
}

.normal {
        background:  lightgreen;
}


.composite {
        background:  #3366ff;
}

.prime {
        background:  deeppink;
}

.factor {
        background:  yellow;
}

##

##


//
// Note:  adding the line:
//
//    var J = jQuery.noConflict();
//
// lets you change '$' everywhere in this file to 'J'.
//

function show_factors(num) {
    // First reset all data
    $('.data').each(function() {
        $("#"+this.id).attr('class', 'normal data');
    });

    // Then find and show all the factors
    var nfactors = 0;
    var factors  = "";
    for (var i = 1; i < num; i++) {
        if (0 == num % i) {
            ++nfactors;
            if (factors) factors += ", ";
            factors += i;
            var tag = "#N" + i;
            $(tag).removeClass('normal').addClass('factor');
        }
    }

    // Highlight chosen square with class 'prime' or 'composite'
    var b_prime  = (nfactors > 1)? false: true;
    var newclass = (b_prime)? 'prime': 'composite';
    var tag = "#N" + num;
    $(tag).removeClass('normal').addClass(newclass);

    // Finally, explain the results
    var text;
    if (1 == num) {
        text = "The number 1 is neither prime nor composite";
    } else if (b_prime) {
        text  = "The number " + num + " is prime";
        text += " (Its only factors are 1 and itself).";
    } else {
        text  = "The number " + num + " is composite.";
        text += "  It has " + nfactors + " factors besides itself: " + factors;
    }
    $('#result').html(text);
}


function ajax_info() {
    $.ajax({
        url:       "pm.cgi",
        cache:     false,
        dataType:  "text",
        data:      { mode: 'info' },
        success:   function(result) { ajax_info_result(result); }
    });
}


function ajax_info_result(result) {
    var text   = "The server says: " + result + "";
    $('#info').html(text);
}