html output to div tag without submitting the form

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

I'm using the Template module in a web app. I'm able to output an image inside a div tag without reloading the entire page using the following code in my html template: <img src='user.pl?rm=getimage&image=docidF' height='350' width='750' align='center' border='1'> which calls the subroutine:

sub getimage{
        my $self = shift;
        my $q = $self->query;
        my $error='';
        ...
        get the image and set $binData to the image data
        ...
        print $q->header(-type=>'image/gif', -Content_Length=>length($
+binData)+1).$binData 
}
[download]

which works like a charm. However, I'd like to now do the same thing, except instead of outputting an image, I want to output html without reloading the page. This html would contain the applicable select options based upon a previous answer. I don't want to submit the form and reload the page because honestly, there are too many other variables within the form and it would be a pain to reload. I haven't been able to find anything remotely close to this yet. I'm assuming I'd use a simlar perl subroutine, but I'm not sure how I would call the subroutine in the html template. Is this possible?

Comment on html output to div tag without submitting the form Select or Download Code

Replies are listed 'Best First'.
Re: html output to div tag without submitting the form by ikegami (Patriarch) on Mar 16, 2010 at 23:13 UTC
The direct equivalent of an image (`<img src="">`) for HTML is an inline frame (`<iframe src=""></iframe>`). You could also use JavaScript to place an HTTP request (AJAX) and insert the returned HTML into a DIV element.	[reply] [d/l] [select]
Re^2: html output to div tag without submitting the form by dont_you (Hermit) on Mar 17, 2010 at 05:54 UTC
I second Ikegami. An easy way to do AJAX is using the Prototype JavaScript library, check the Prototype introduction, under the section "Updating your page dynamically with Ajax.Updater". This example makes a post request to "myscript.pl", sending the content of the form with id "myForm" as parameters. The HTML output of the script will be inserted into the div with id "MyDiv". It's not so difficult :) `function upadateMyDiv() { new Ajax.Updater('myDiv', '/myscript.pl', { parameters : $('myForm').serialize(true), method : 'post', }); }` [download]	[reply] [d/l]
Re: html output to div tag without submitting the form by CountZero (Bishop) on Mar 17, 2010 at 07:09 UTC
A praiseworthy attempt to conserve bandwith. Alas, your code is not doing what you think it is doing: the routine to output your image is only called when the whole of the page is refreshed. `<div>`-tags are no magic method to suddenly update pages piecemeal, although they are part of the solution and that solution is --as has been said before-- AJAX (or "asynchronous JavaScript and XML"). If you do not want to learn another language (Javascript), check out canned solutions such as Prototype. Installing it is easy through CPAN: Alien::Prototype, HTML::Prototype or if you want to make it part of the Catalyst web-framework: Catalyst::Plugin::Prototype. Different but in a similar vein is HTML::Dojo (Dojo homepage) Check it out and keep my bandwith free so I can download my LOLcats even faster! CountZero A program should be light and agile, its subroutines connected like a string of pearls. The spirit and intent of the program should be retained throughout. There should be neither too little or too much, neither needless loops nor useless variables, neither lack of structure nor overwhelming rigidity." - The Tao of Programming, 4.1 - Geoffrey James	[reply] [d/l]
Re: html output to div tag without submitting the form by ww (Archbishop) on Mar 16, 2010 at 23:30 UTC
I don't want to submit the form and reload the page because honestly, there are too many other variables within the form and it would be a pain to reload. Whoa! It's not as if you'll have to sit there are do it manually everytime someone submits something. You need only to write the code, once. And why? Well, in no particular order: There are those who regard javascript as suspect and keep it turned off. iframes make navigation difficult, in some instances, to the detriment of user-friendliness using `CGI` and company is a well-tested and easily applied means for doing the job. (and if the page size is what's going to make reloading "a pain" because of download and rendering time, you may want to rethink your design) Laziness is indeed a virtue... but only when applied wisely after careful consideration of the implications.	[reply] [d/l]
Re: html output to div tag without submitting the form by leighsharpe (Monk) on Mar 16, 2010 at 23:51 UTC
CGI::AJAX will do what you want. Or, if you want to hand-bash everything, see this rather excellent node: Re: Simple CGI::Ajax	[reply]
Re^2: html output to div tag without submitting the form by ikegami (Patriarch) on Mar 17, 2010 at 00:18 UTC
You have linked to an non-existent module. I believe you meant CGI::Ajax. I doubt it generates code to place the request. I doubt it prevents submission of further requests while a request is being served. I doubt it provides feedback to the user that a request is in progress. I'm sure it's a great help, but the work is far from done. AJAX is hard to do well.	[reply]
Re^2: html output to div tag without submitting the form by ksublondie (Friar) on Apr 22, 2010 at 19:41 UTC
Beautiful! Used the example from Re: Simple CGI::Ajax as a springboard to get it to work with my code. That was exactly what I was wanting. Thanks!	[reply]