jQuery and Perl

sierpinski has asked for the wisdom of the Perl Monks concerning the following question:

Hello Monks,

I'm working on a site where there will be numerous data selections (radio buttons, textboxes, selects, etc) which in turn will build an SQL statement from Oracle using DBI. The piece that I'm having an issue with is integrating the jQuery js/css into my Perl script. From what I can tell, it seems like I should be embedding Perl code into the function piece of the jquery script (on a static HTML page), like here:

$('#dialog').dialog({
  autoOpen: false,
  width: 600,
  buttons: {
      "Button1": function() {
           // Perl code here
      },
      "Button2": function() {
           // Perl code here
      }
  }
});
[download]

Instead, what I'm trying to do is have a Perl script that dynamically creates the HTML using the print(qq(<script ..... )); but it doesn't seem that is how I should be doing it. Should I be using static HTML pages with embedded js/css/Perl, or using a Perl script with js/css inside?

I understand that JS is client-side, and Perl is server-side, but it seems that the dynamic functions I need to use are still javascript, but using data supplied to the page by the CGI engine. Am I way off base here?

Thanks!

UPDATE: I see there is a JQUERY module on CPAN... I'll definitely check that out, but considering the environment I want to deploy this to doesn't have it installed (nor will the company allow it without rigorous and lengthy security review and justification) I'd like to try this way first... it will likely give me a better understanding of how it works too.

Comment on jQuery and Perl Download Code

Replies are listed 'Best First'.
Re: jQuery and Perl by Corion (Patriarch) on May 27, 2010 at 14:29 UTC
My approach is to first build a static site that works without Javascript. After I've hammered out the functionality with HTML+Perl, I then use jQuery to add more interactivity. Usually this means using the jQuery `$.ajax()` function to request a page from the server and to rip out specific parts of the HTML and to insert that part into the current page. If you want to dynamically update a data display, you will likely need to supply that data (preferrably in JSON format) to jQuery. You need to realize that to have a HTML/Javascript button execute some Perl code, you will need to make a request from the browser to your server. There is no convenient way (that I'm aware off) to interweave Perl and Javascript to make the RPC transparent. But I think you can get by without that transparency quite well if you use the approach of first creating a functional, non-JS version and then add the "no page reload" functionality on the client side.	[reply] [d/l]
Re^2: jQuery and Perl by wazoox (Prior) on May 27, 2010 at 15:53 UTC
This has another huge added benefit : your site works even without javascript (noscript extension, security settings, disabilities, etc).	[reply]
Re^2: jQuery and Perl by dsheroh (Monsignor) on May 28, 2010 at 10:23 UTC
There is no convenient way (that I'm aware off) to interweave Perl and Javascript to make the RPC transparent. CGI::Ajax does this, although it seems to be looked down on as somewhat inefficient because it inserts the necessary javascript to stitch the Perl and JS halves together into the `<head>` of each page rather than providing a cacheable .js file. The basic technique for using CGI::Ajax is that you define `sub my_ajax_function` normally in Perl, then insert the javascript `my_ajax_function(['input_div'], ['output_div']);` into your HTML page. When the js function call executes, CGI::Ajax passes the content of `input_div` off via AJAX call, which CGI::Ajax intercepts and directs to the Perl sub, then the Perl sub's output is sent back in the AJAX response and inserted into `output_div`. You can also adjust the javascript function call to pass multiple input/output divs or to send the output into another javascript function if you don't want to just replace a div's content with it. Very slick and easy as can be if you're willing to accept the bloat that it inserts into the page headers. Of course, all that you said regarding making the page usable without javascript first still applies.	[reply] [d/l] [select]
Re: jQuery and Perl by marto (Cardinal) on May 27, 2010 at 14:33 UTC
Perhaps you should re read the jQuery documentation. You can't just drop Perl code into a JavaScript framework and expect it to do anything other than fail. What you want is to use jQuery (see `$.get` and Ajax documentation for examples) to communicate with your backend CGI scripts/application (your Perl code querying Oracle via DBI) and do whatever you see fit to the DOM with/depending on the results. "Should I be using static HTML pages with embedded js/css/Perl, or using a Perl script with js/css inside?" I use HTML::Template to separate my HTML/jQuery code from my Perl code.	[reply] [d/l]
Re^2: jQuery and Perl by sierpinski (Chaplain) on May 27, 2010 at 14:40 UTC
That's what I thought... I saw a post somewhere where someone claimed to have inserted <%perl> inside the function part of the jQuery script, but I couldn't see how a client-side function could cause any back-end processing, but I figured I'd ask anyway. Thanks for the advice. It'll probably be easier to support with static HTML pages anyway. If management decides to add a bunch of extra functionality later (which I guess is very likely), having Perl scripts generate all those pages would be messy anyway, let alone trying to incorporate jQuery as well.	[reply]
Re^3: jQuery and Perl by marto (Cardinal) on May 27, 2010 at 14:48 UTC
"having Perl scripts generate all those pages would be messy anyway, let alone trying to incorporate jQuery as well." Yeah, that's why I use HTML::Template, it's pretty much the same as having a standard HTML file with the exception that you can populate (via non HTML, HTML::Template specific tags) the HTML/JavaScript/jQuery/css from from Perl, in my case, our Oracle databases. Perhaps overkill for what you are working on, but I'd suggest looking at a templating system, see Framework, Templating, and Content Management Systems from the tutorials section for further reading. Best of luck Martin	[reply]
Re^4: jQuery and Perl by sierpinski (Chaplain) on May 27, 2010 at 16:14 UTC
Re^3: jQuery and Perl by Anonymous Monk on May 27, 2010 at 14:51 UTC
<%perl> is HTML::Mason syntax, so it could work. There is also pQuery	[reply]
Re^4: jQuery and Perl by Corion (Patriarch) on May 27, 2010 at 14:54 UTC
Re: jQuery and Perl by bradcathey (Prior) on Jun 15, 2010 at 12:46 UTC
Not to promote my own node, but I've done quite a bit of work on this and spelled out some of my "findings" in a Tutorial on Perl, jQuery, and JSON. —Brad "The important work of moving the world forward does not wait to be done by perfect men." George Eliot	[reply]