Fork me on GitHub

Anyone have a solid example of linkable selects?  Bottom

  • In the module i am working on there are two select boxes that are linked. For example Software and software version. Rather then storing the two bits of data in one table and just reiterating the row it has them in two selects. Once Software is selected it limits what information is displayed in the sw version select.

    The code that does this is the previous module developers. I really like this functionality. It would lend some great flexibility to linked categories for the helpdesk resolution reporting. My problem is I just cant find a way to make it happen as a template. Using it as a plugin is always an option as thats how I am doing it now. Having another example to look at for linked HTML select would really help me wrap my mind around it.

    Can anyone point me to an example? Here is the code I am working from.

    Code

    extract($args);
    // Args are softwareid swversionid and formname
    $output = new pnHTML();
    $output->SetInputMode(_PNH_VERBATIMINPUT);
    $AllowVersionChoice         = pnModGetVar('helpdesk', 'AllowVersionChoice');
        $output->TableRowStart();
            $output->TableColStart(4,'center');
                $output->TableStart('','',0,'100%');
                    $output->TableRowStart();
                        $output->TableColStart(1,'center');
                            $output->Text(_SOFTWARE.':');
                            // First build the Software Drop box:
                            // Get Array from api
                            $software_data = pnModAPIFunc('helpdesk','user','softwareselect');
                           
                            // Start the first Drop box
                            $output->Text('<select id=software_id name=software_id onChange="dropchg(this.options.selectedIndex)">');
                                if($softwareid == 0 ){
                                    $output->Text('<option value=0 selected>----------------</option>');
                                }else{
                                    $output->Text('<option value=0 >----------------</option>');
                                }
                           
                            // Next, Cycle through the array
                            // For each pass, build a temp variable to hold the contents of the next drop box
                            $DynScriptSupp = '';
                            $iA=0;
                            foreach ($software_data as $softwareitem){
                                if($softwareid == $softwareitem[software_id]){
                                    $itemselected=" selected";
                                }else{
                                    $itemselected='';
                                }
                                // Each pass through this outer loop needs to reset $i2 to zero and increment $iA
                                $i2=0;
                                $iA++;
                                $output->Text('<option value='.$softwareitem[software_id].$itemselected.'>'.$softwareitem[software_name].'</option>');
                                if ($AllowVersionChoice){
                                    // If we'll be doing versions, let's add corresponding software versions here!
                                    $swversion_data = pnModAPIFunc('helpdesk','user','getswversionslist',array('selected_id'=>$softwareitem[software_id]));
                                    $DynScriptSupp .= "group[$iA][$i2]=new Option('----------------','0')\n";
                                    if (count($swversion_data) > 0){
                                        foreach ($swversion_data as $swversionitem){
                                            $i2++;
                                            $DynScriptSupp .= "group[$iA][$i2]=new Option('".$swversionitem[name]."','".$swversionitem[id]."')\n";
                                        } // End swversion_data loop
                                    } // End If swversion count
                                } // End allowversion choice
                            } // End software_data loop
                            // End the Loop, close the Select box
                            $output->Text('</select>');                            
                            if ($AllowVersionChoice > 0){
                                $output->Text('&nbsp;&nbsp; '._VERSION.':');
                                // create empty second select box ( If Option is set )
                                $output->Text('<select id=swversion_id name=swversion_id>');
                                   
                                  $output->Text('<option value=-1 selected>----------------</option>');
                                  if($swversionid > 0){
                                    $output->Text('<option value='.$swversionid.' selected>'.pnModAPIFunc('helpdesk','user','getswversionidname',$swversionid).'</option>');
                                  }
                                $output->Text('</select>');
                                $Drop1Count = count($software_data)+1;
                                // Now place the Javascript for the second box to react to the first box changes
                                $DynScript = "<script Language='JavaScript'>\n";
                                $DynScript .= "<!--\n";
                                $DynScript .= "var groups=".$Drop1Count."\n";
                                $DynScript .= "var group=new Array(groups)\n";
                                $DynScript .= "for (i=0; i<groups; i++)\n";
                                $DynScript .= "group[i]=new Array()\n";
                                // This first entry corresponds to the dashed entry in the first drop box
                                $DynScript .= "group[0][0]=new Option('----------------','0')\n";
                                // Cycle through and output javascript code from the versions table
                                // format:
                                // group[index of software drop][item index]=new Option('name','value')newline
                                // Grab the $DynScriptSupp created earlier and insert at this point
                                $DynScript .= $DynScriptSupp;
                               
                                // Finish up the javascript code
                                $DynScript .= "var temp=document.".$formname.".swversion_id\n";                
                                $DynScript .= "function dropchg(x){\n";
                                $DynScript .= "for (m=temp.length-1;m>0;m--)\n";
                                $DynScript .= "temp.options[m]=null\n";
                                $DynScript .= "for (i=0;i<group[x].length;i++){\n";
                                $DynScript .= "temp.options[i]=new Option(group[x][i].text,group[x][i].value)\n";
                                $DynScript .= "}\n";
                                $DynScript .= "temp.options[0].selected=true\n";
                                $DynScript .= "}\n";
                                $DynScript .= "//-->\n";
                                $DynScript .= "</script>\n";
                                // Finally, output the javascript code into the $output object
                                $output->Text($DynScript);
                            }
                        $output->TableColEnd();
                    $output->TableRowEnd();
                $output->TableEnd();
                $output->TableColEnd();
            $output->TableColEnd();
        $output->TableRowEnd();
        return $output->GetOutput();
  • This is the sort of thing tha would be done with Javascript in the template file, or included in the template file. Below are the important bits of what I use to do hidden field in the form. It's a similar idea--having one part of the select change another part of the form.

    from projects_mile_new.html

    Code

    <!--[projectadditionalheaders nameOfFile="completed.js" typeOfFile="javascript"]-->
    .
    .
    .
    <INPUT TYPE="RADIO" NAME="STARTED" value="start" onclick="changeitup('SDDiv','visible');">
        <!--[pnml name="_STARTED]-->
        <INPUT TYPE="
    RADIO" NAME="STARTED" value="unstart" onclick="changeitup('SDDiv','hidden');" CHECKED>
        <!--[pnml name="
    _NOTSTARTED]-->
        <DIV ID="SDDiv" style="visibility:hidden">
            <LABEL for="StartDate"></LABEL>
            <!--[html_select_date prefix="act_start_date" start_year="-2" end_year="+6"]-->
        </DIV>


    completed.js

    Code

    //These two functions change the visibility of the completion date of milestones/tasks in add and edit forms.
    //Projects version 2.0

    function changeitup(id,action) {
    if (navigator.userAgent.indexOf("Opera")!=-1
        && document.getElementById) type="OP";
    if (document.all) type="IE";
    if (document.layers) type="NN";
    if (!document.all && document.getElementById) type="MO";

    if (type=="IE") eval("document.all." + id + ".style.visibility='" + action + "'");
      if (type=="NN") eval("document." + id + ".visibility='" + action + "'");
      if (type=="MO" || type=="OP")
        eval("document.getElementById('" + id + "').style.visibility='" + action + "'");
    }


    pntemplates/plugins/function.projectadditionalheaders.php

    Code

    function smarty_function_projectadditionalheaders( $params, &$smarty )
    {
        extract( $params );
       unset( $params );

       $modName = pnModGetName();

       $GLOBALS['additional_header'][] =
          "<script type=\"text/" . $typeOfFile . "\" src=\"modules/" . $modName . "/pnincludes/" . $nameOfFile . "\"></script>";
    }
  • jediping,

    That gives me some ideas on what I can do atleast. Getting used to the methodology on how web based applications works can give me such a head ache lol.
    Thanks.
  • So right there with you!

    Fortunately, the templates are basically HTML with some extras thrown in (or that's how I look at them), so you can use JS if you need. I'd advice first reading up on using Javascript to do this, then work on getting it integrated with the module. GOod luck! It can sure be a headache, but it's well worth it in the end, when everything works right. :)
  • What I ended up doing so that I could have some easy to reuse code was wrote a plugin where I pass a fair ammount a parameters to it. And it outputs the java script I need. Heh it works pretty good and will probably be something I go back and take a look at again when its time to make a performance retune on the code.
  • Here's a modular, customizable script for linked select boxes, from WebOnWebOff.com.

    You can specify what options to display at the start, or options to display when no options exist for the selected value.

    http://www.webonwebo…nked_selection.aspx

    Hope this helps...

This list is based on users active over the last 60 minutes.