SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Hybrid View

  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chained menu from a mysql database and/or array

    I want to create a chained menu, but it only needs to be 1 layer deep. Basically regions, and zones. For an easy to visualize example, think cities and states. I will use city and state terminology for clarity.

    All the examples of chained menus I can find involve a config.js file and that would produce a lot of problems with duplication of data for me.

    I have a list of 12 states, with anywhere from 6 to 144 cities in each, with a total of 490 cities.


    I would like just the applicable cities to show up when the state is selected.

    Is there a way this can be done easily from a multidimensional array (that could be easily obtained from the database).

    My problem with a config.js file like other examples I have seen is that if I need to change the list, I need to re-create that file, and redo the database and make sure the two perfectly match on every edit. It feels like a disaster waiting to happen.

    Anything out there easier than this:
    http://www.dynamicdrive.com/dynamici...ects/index.htm

    ???

    Thank you!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh. DynamicDrive. Stay away from that site. The majority of their scripts are poorly written.

    Check out this one.

    The problem with using those is that they don't work when JavaScript support is not enabled.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member gmn17's Avatar
    Join Date
    Jan 2004
    Location
    Los Angeles
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Ugh. DynamicDrive. Stay away from that site. The majority of their scripts are poorly written.

    Check out this one.

    The problem with using those is that they don't work when JavaScript support is not enabled.

    such a horrible site, very amateurish.

  4. #4
    SitePoint Guru SSJ's Avatar
    Join Date
    Jan 2007
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh. DynamicDrive. Stay away from that site. The majority of their scripts are poorly written.
    Who says that kravvits. I like this site...

  5. #5
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz, that script looks great at first glance!

    Now a stupid question... what is AJAX? Do I need anything special to run it?

    The problem with using those is that they don't work when JavaScript support is not enabled.
    Yeah, I avoid java as much as possible, but this form already requires it. There isn't really a great way around it. The form is only going to be used by a small percentage of users anyway. It is so users can input data to us for review and posting. Other parts of the form involve picking a handful of items out of a list of 1000+, I am using 2 listboxes and java to move items back and forth to pick them. It was the only user friendly way I knew to do it.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AJAX is short for Asynchronous JavaScript and XML. It allows JavaScript to send requests to a web server and receive replies in the background so a page can be updated without reloading entirely or loading a new page.

    Java and JavaScript are two very different languages.

    Who says that kravvits. I like this site...
    I don't remember who else I've seen say that specifically. It's possible that their quality is improving but still... You could always post a thread here asking the opinion of skilled programmers like 7stud and myself regarding a script you find there.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I am just over my head. I copy and paste this stuff and it still does not work. Something about me and javascript just don't mix.

    here is the html(php in this case with no php code) page in its entirety:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <?php include 'my_functions.php'?>
    <script type="text/javascript">
    var request = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
    request = false;
    }
    }
    @end @*/
    if (!request && typeof XMLHttpRequest != 'undefined') {
    request = new XMLHttpRequest();
    }

    function fillSelect(country) {
    var url = "csa_ajax.php?country=" + escape(country);
    request.open("GET", url, true);
    request.onreadystatechange = go;
    request.send(null);
    }

    function go() {
    if (request.readyState == 4) {
    if (request.status == 200) {
    var response = request.responseText;
    var list=document.getElementById("city");
    var cities=response.split('|');
    for (i=1; i<cities.length; i++) {
       var x=document.createElement('option');
       var y=document.createTextNode(cities[i]);
       x.appendChild(y);
       list.appendChild(x);
       }
      }
     }
    }

    function initCs() {
    var country=document.getElementById('country');
    country.onchange=function() {
     if(this.value!="") {
      var list=document.getElementById("city");
      while (list.childNodes[0]) {
    list.removeChild(list.childNodes[0])
    }
      fillSelect(this.value);
      }
     }
     fillSelect(country.value);
    }
    </script>
    <title></title>
    </head>
    <body>

    <form method="post" action="#">
    <p><label>country: <select id="country" name="country">
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
    <option value="Australia">Australia</option>
    <option value="Japan">Japan</option>
    </select></label>
    <label>city: <select id="city" name="city">
    </select></label></p>
    </form>

    </body>
    </html>

    And here is the other file, which confused me on the host site. The url referenced in the javascript calls for csa_ajax.php, but the instructions on the site said to put this code in a csa_ajax.js. Not knowing which to do I tried just that code in a php and just that code in a js and just that code in BOTH a php and a js file.

    The contents of that file are as follows:

    PHP Code:
    <?php
    function doIt($country) {
    switch (
    $country) {
    case 
    "United Kingdom":
    return array(
    'London','Manchester','Birmingham','Liverpool','Edinburgh','Cardiff','Belfast');
    break;
    case 
    "United States":
    return array(
    'Washington DC','New York','Los Angeles''Chicago');
    break;
    case 
    "Australia":
    return array(
    'Canberra','Melbourne','Sydney''Brisbane');
    break;
    case 
    "Japan":
    return array(
    'Tokyo','Osaka','Fukuoka','Sendai','Sapporo');
    break;
     }
    }

    $country=@$_GET['country'];
    $cities=doIt($country);
    foreach (
    $cities as $city) {
    echo 
    '|'.$city;
    }
    ?>
    All the files are in the same directory (the web root) and the second box does nothing at all. Any help?

    The url for it failing to do anything in motion is:
    www.thebrasse.com/chain_select.php

    Darn thing is really hurting my schedule now.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bonrouge forgot to mention that you need to call the initCs() function onload. (I emailed him about it, so hopefully he'll add a mention of it to the page.)\

    Add this to your JS code:
    Code:
    window.onload = function(){
      if(!document.getElementsByTagName || !document.createTextNode) return;
      initCs();
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked really nice Kravvitz!

    Much easier than the other one I was trying to figure out.

    I have come across my own dealbreakers in my need to implement them though.

    1. I need to fill in the option selections with a value that equals the ID of the city and not the name of the city (but still have the name of the city display), since the same city name can be in several states.
    2. I am going to be using this form for editing as well as previewing, so the form needs to be able to fill itself in from the post data. I don't know how to fill in the second list with the value from postdata.
    3. It turns out I need this set of chained selects twice on the form, one for picking one city, and another for picking an unknown series of cities. (would have a javascript button a the current selection to a different listbox which is pretty easy), but it means I have to duplicate most of the chained select code for a second set of id names.


    The third one I could probably handle on my own (although there would probably be a better way with passing the id through a variable), but the first and second one are beyond my limited understanding at this time.

    I will probably have to settle for just recording state in the current data and try my best to fix these problems later and then backfill all the data. This has all turned out a lot harder than I had hoped it would be. Its probably pretty easy if I was even mediocre at javascript. Something about the syntax just feels completely alien to me though.

  10. #10
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Point 2 is the real killer for me I guess.

    I could get around point 1 by posting state_id and city_name and figure out the unique id from that.

    Piont 3 should be a duplication of the existing code and a find/replace for replacing the id names (a bad way to do it, but it should work for now)

    Could you kind folks help me with point 2?

    This input is part of a form with the post method. It submits to itself, and the same page handles validation, previewing, and any database changes that are needed.

    How would I populate the second combobox from postdata? Can the onload event handler from javascript access postdata?

    Any help would be greatly appreciated, thankyou.

    Edit::
    As a sign of good faith, that I am not just griping and moaning, this is what I have gotten done so far. It is the subzone selector for a quest entry form for a site that will cover lord of the rings online. City and state are probably still easier terms to deal with since the common vernacular ingame lists what I have as 'zone' as regions and what I have as 'subzone' as zones. It makes any mention of zone ambiguous. I am sticking with the zone subzone terms for coding since my zones database covers multiple games for the purposes of linking them to maps and such.
    http://www.thebrasse.com/lotro/test-...uest-entry.php

    It is working nicely down in the starting zone area, and will replace the 'all zones' listbox of the 'involved zones' section as well once I rewrite the simple script to add things to the listbox on the right. The problem of course is that anytime the writeup is previewed or the form is submitted with errors, the form is decidedly unsticky in terms of that 'subzone'

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, JavaScript can't access post data.

    It seems you need more help than I'm willing to give for free. Sorry.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ouch. That smarts. So close and shutdown because I can't re-select that option in editing mode. Trying to explain to my now very annoyed wife (and client) why I can get so close but still have it not work as a solution.

    I suppose I could at least have the form list what used to be in that field so the editor could re-select it, but losing it on each preview is usuability mess. People won't even notice that it defaulted to the first item in the list and we then won't know if it was really that first item picked or if it was something else that they lost on preview.

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have PHP print out some JavaScript code that includes a variable set to whatever value was submitted form that <select> element.

    In PHP you can access the post data the $_POST super global array.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    You could have PHP print out some JavaScript code that includes a variable set to whatever value was submitted form that <select> element.

    In PHP you can access the post data the $_POST super global array.
    Interesting idea, I will look into that. Better than my kludge if I can figure it out.

  15. #15
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I figured out a workaround. Each zone will have a subzone called "_Enter Your Subzone_" Since the list is being populated by ascending alphabetical based on name, this will always float to the top and anytime post data is lost this will be selected.

    Then I can just add it to validation to reselect their subzone if that value is selected.

    In edit mode I will have the form print out what used to be there next to the field (before postdata is lost).

    It is a somewhat unprofessional kludge, but I am doing this for free so I AM unprofessional, lol.

    Again, thanks for the help. It is still better than having a huge list of 500+ subzones.

  16. #16
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I got the php to assign a variable, I can alert that variable successfully in javascript, and I have code from other places on the form to make the selection.

    I am calling the function to set the selection at the end of the onload event in the .js file (after the call to initCs), but the timing is off. The function runs before the list is filled (alerting the length to verify, and length is 0).

    Where would the function call to select the right listitem go?

  17. #17
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firebug gives me this error:
    startingsubzone is not defined
    http://www.thebrasse.com/lotro/chain_select.js
    Line 4
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  18. #18
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The up to date code is:
    http://www.thebrasse.com/lotro/test-...uest-entry.php

    On line 4 I am calling the function to select the listitem and passing it the value of the selected item as 'startingsubzone'. Line 4 should be in some sort of if(isset) conditional, but it only should produce that error on the first page load where I don't want anything selected anyway.

    The bug should still be fixed of course.

    Upon submitting with incomplete data (like missing username and pword) or previewing, it is alerting two values right now. The value of startingsubzone (the variable pulled from the post) and then the length of the second combobox that is filled with the javascript. 1 is also subtracted from the length because is it my loop limit.

    Anyway, I installed firebug, and I have not really gotten into it yet, but when I enable firebug I was getting valid lengths for the second combobox but when I disable firebug I get the -1 showing it as empty at the time of the function call.

    Very weird. Very Heisenburg. Monitoring seems to be afecting the outcome.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •