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

Within a CGI.pm form would like to have different type of information accessed by tabs, without having to go back to the server, e.g. a simplistic case: /addresses/phones/emails/ Clicking on address would bring up the adddresses (say work, home), clicking on phones would bring up a list of phones (say mobile, home, work). Any pointers? Thanks.

Replies are listed 'Best First'.
Re: multi tabbed CGI.pm form
by Corion (Patriarch) on Sep 08, 2010 at 13:42 UTC

    You can't do that in Perl, as Perl runs on the server, not on the client. See for example jQuery UI tabs for how to (simply) do that using well-formed HTML and Javascript.

Re: multi tabbed CGI.pm form
by Utilitarian (Vicar) on Sep 08, 2010 at 14:33 UTC
    The page below could be pre-populated from the call to your script.
    <html> <head> <title> Tabs Example </title> <script> function setVisible(tabName){ var tabsNames=["PersonalTab", "AddressTab", "CommentsTab"]; for (index=0;index < 3; index++){ var tab=document.getElementById(tabsNames[index]); tab.style.display = "none"; } var tab= document.getElementById(tabName); tab.style.display = "block"; } </script> </head> <body> <div name="tabs"> |<span id="Personal" onClick='setVisible("PersonalTab");' >Personal</s +pan>| <span id="Address" onClick='setVisible("AddressTab");' >Address</span> +| <span id="Comments" onClick='setVisible("CommentsTab")'; >Comments</sp +an>| </div> <div id="PersonalTab" style="display: block;"> <table> <tr><td>Name:</td><td>Some Guy</td></tr> <tr><td>Age:</td><td>42</td></tr> <tr><td>Status:</td><td>Married</td></tr> </table> </div> <div id="AddressTab" style="display: none;"> <table> <tr><td>email:</td><td>some.guy@example.com</td></tr> <tr><td>Home:</td><td>42 Life St<br/>The universe<br/>Everthing</td></ +tr> <tr><td>Work:</td><td>I'm afraid you still have to</td></tr> </table> </div> <div id="CommentsTab" style="display: none;"> <table> <tr><td>Punctuality:</td><td>Not too bad unless there was a match on s +unday in which case moday can start late</td></tr> <tr><td>Application:</td><td>Seems to spend more time solving anonymou +s Perl problems than those of our customers</td></tr> <tr><td>Skill:</td><td>What is it with Perl and why won't he apply him +self to Java like he's supposed to</td></tr> </table> </div> </body> </html>
    However this is properly a Javascript rather than a Perl issue
    print "Good ",qw(night morning afternoon evening)[(localtime)[2]/6]," fellow monks."
      Fantastic! Liked the sample data even more than the script. ---
Re: multi tabbed CGI.pm form
by Solo (Deacon) on Sep 08, 2010 at 15:16 UTC
    Have you looked at CGI::Application? I missed the "without going back to the server" on first reading.

    --Solo

    --
    You said you wanted to be around when I made a mistake; well, this could be it, sweetheart.
      Best way to do this is use AJAX call.

        "without having to go back to the server"

        How is AJAX going to help given this requirement? Corions suggestion is sound, populate your template/page with all data, use jQuery tabs (or similar) to display.

        I would normally agree, except the OP specified without going back to the server, hence the show/hide div implementation above.

        print "Good ",qw(night morning afternoon evening)[(localtime)[2]/6]," fellow monks."