in reply to Re^3: Dynamic Drop down in CGI
in thread Dynamic Drop down in CGI

Hi Almut,

Thanks for this code. But this is a simple HTML-JavaScript page in which values are Hard-coded.

As I described, in my case all the values are populating in Dropdown through DB.

It would be great help if you could add some DB Interaction in this.

Regds
Vivek

Replies are listed 'Best First'.
Re^5: Dynamic Drop down in CGI
by almut (Canon) on Jun 10, 2009 at 10:55 UTC
    ...page in which values are Hard-coded.

    Essentially, you have three options:

    • Prepopulate all possible menus, in which case you'd replace those hard-coded values in the page with content filled in from the DB, using a templating system (wouldn't scale well if you have lots of or unpredictable content).
    • Use classical CGI, i.e. submit the form upon an onChange event in menu1, and generate an entire new HTML page/frame every time with the appropriate menu2 contents.
    • Use Ajax to dynamically fetch the menu2 contents depending on the menu1 selection, and update menu2 without regenerating the page (using the same DOM technique as shown).

    But as you already said you're "not using Ajax", your available options reduce by one...

[reply]
Re^5: Dynamic Drop down in CGI
by Corion (Patriarch) on Jun 10, 2009 at 10:11 UTC

    This site is not a code writing service. Also, this site is chiefly about Perl, not Javascript or HTML. So please don't ask for neither completed code nor Javascript code.

[reply]
      Thanks for all the services (If any) you have provided me !!

      I have not asked you or anyone to write the code for me. I just asked for help. I just asked for an example because I was fed up with trying it out on my own. There is lot of difference between an example and WRITING code. But I think your seniority does not see that.

      Secondly, I am using PERL as programing language. I posted here as I had an assumption that there is code linking between PERL and Java-Script and I was not able to understand that linking. But again your seniority and experience does not see that.

      Please ... Please try to remember the days when you were a Junior and had problems in coding and understanding; and some one must had helped you.

      Please !!

[reply]

        Everyone is trying to help you. You have to see it from the other side. You have given contradictory requirements (static HTML but dynamic content and no Ajax but with Perl) and no sample code. This is also a messy problemspace with many avenues of attack. Frankly, this is the kind of thing that gets easy only after you've banged your head on your keyboard for months. E.g., it took me twice as long to write up this node as it did to write the jQuery. I can easily see this problem eating up a week of time or more for a new developer. Don't despair though. Pick stuff that's fun and you'll often enjoy the keyboard pattern printed on your forehead.

        Here's demo of an approach that might fit part of what you're after. This is pure HTML and jQuery. It would be easy for someone who knows a JS toolkit and Perl to wire in the server side stuff to make it dynamic (Ajax). 

        <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
  xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Some auto-populate stuff</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.
+js"
  type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
jQuery(function($){
  $("#something").bind("change", function(){
    var city = $(this).find(":selected").text();
    var index = $(this).val();
    var option = $("<option value='" +
                    index +
                    "'>A market in " +
                     city + "</option>");
    $("#else").children(":gt(0)").remove().end()
              .fadeIn("slow")
              .append(option);
  });
});
//]]> </script>
</head>

<body>

<select name="something" id="something">
  <option value="0">&lt;choose city&gt;</option>
  <option value="1">Alburquerque</option>
  <option value="2">Mongoton</option>
  <option value="3">Zipperville</option>
</select>

<select name="else" id="else" style="display:none">
  <option value="0">&lt;choose market&gt;</option>
</select>

</body>
</html>

        [download]

        Give that a spin. jQuery is, to me, a lot like Perl. A bit inscrutable at first but then a heavenly match between problems and the way problems are really solved (in human minds).

        Sidebar: Perl and Ajax are generally written titlecased, not in all caps.

[reply]
[d/l]

In Section Seekers of Perl Wisdom