Beefy Boxes and Bandwidth Generously Provided by pair Networks
We don't bite newbies here... much
 
PerlMonks  

html output to div tag without submitting the form

by ksublondie (Pilgrim)
on Mar 16, 2010 at 22:59 UTC ( #829036=perlquestion: print w/ replies, xml ) Need Help??
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 }
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
Re: html output to div tag without submitting the form
by ikegami (Pope) 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.

      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', }); }
Re: html output to div tag without submitting the form
by ww (Bishop) 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.

Re: html output to div tag without submitting the form
by leighsharpe (Monk) on Mar 16, 2010 at 23:51 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.

      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!
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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: perlquestion [id://829036]
Approved by toolic
Front-paged by ww
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others meditating upon the Monastery: (6)
As of 2014-08-21 17:06 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    The best computer themed movie is:











    Results (138 votes), past polls