3 Replies Latest reply on Aug 5, 2013 10:09 PM by p.sim

    html

    Abdul L Koyappayil Level 1

      searchPage.cfm

      =============

       

      <!---<cfparam name="serviceLists" default=""><cfoutput>serviceLists : #serviceLists#</cfoutput>

      <cfscript>

          serviceLists = application.getServiceListObj.getServiceLists();

      </cfscript>--->

       

      <style type="text/css">

      .mainhead{

      width:800px;

      }

      .outset {

      border-style:outset;

      border-color:#FF4000;

      background-color:#F2F2F2;

      width : 800px;

      }

      .multselect{

      width:250px;

      height:150px;

      }

      </style>

      <script type="text/javascript">

      function getServiceList(searchBy)

      {

      var xmlhttp;

      if (searchBy.length==0)

         {

         document.getElementById("serviceListBox").innerHTML="";

         return;

         }

      if (window.XMLHttpRequest)

         {// code for IE7+, Firefox, Chrome, Opera, Safari

         xmlhttp=new XMLHttpRequest();

         }

      else

         {// code for IE6, IE5

         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

         }

      xmlhttp.onreadystatechange=function()

         {

         if (xmlhttp.readyState==4 && xmlhttp.status==200)

           {

           document.getElementById("serviceListBox").innerHTML=xmlhttp.responseText;

           }

         }

      xmlhttp.open("GET","servicelists.cfc?method=getServiceLists&criteria="+searchBy,true);

      xmlhttp.send();

      }

      </script>

      <!---<table class="mainhead">

          <tr align="center">

              <td></td>

          </tr>

      </table>

      <table class="mainhead">

          <tr align="left">

              <td>Search Criteria:</td>

              <td> &nbsp</td>

          </tr>

      </table>

      <table class="outset">

          <tr>

              <td>Required Fields</td>

              <td>Optional Fields</td>

          </tr>

          <tr><td> &nbsp</td><td> &nbsp</td></tr>

          <tr>

              <td>Business:

       

                  <select name="business" id="business">

                      <option value=""></option>

                      <option value="b1">Business1</option>

                      <option value="b2">Business2</option>

                      <option value="b3">Business3</option>

                  </select>

              </td>

              <td>Account No:

                  <input type="text" name="accountNumber" id="accountNumber">

              </td>

          </tr>

          <tr><td> &nbsp</td><td> &nbsp</td></tr>

          <tr>

              <td>Starting Date:

                      <input type="text" name="startingDate" id="startingDate">

              </td>

              <td>Search By:</td>

          </tr>

          <tr>

              <td> &nbsp</td>

              <td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByServiceName" onclick="getServiceList(this.value)">Service Name</td>

          </tr>

          <tr>

              <td> &nbsp</td>

              <td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByAgent" onclick="getServiceList(this.value)">Agent</td>

          </tr>   

          <tr>

              <td>Ending Date:

                  <input type="text" name="startingDate" id="startingDate">

              </td>

              <td>Use Ctrl key to select muliple services</td>

          </tr>

          <tr><td> &nbsp</td><td> &nbsp</td></tr>

          <tr>

              <td> &nbsp</td>

              <td>

                  <select name="serviceListBox" id="serviceListBox" size="3" multiple class="multselect">

                      <!---<option name=one value=one> one </option>

                      <option name=two value=two> two </option>

                      <option name=three value=three> three </option>

                      <option name=four value=four> four </option>

                      <option name=one value=one> one </option>

                      <option name=two value=two> two </option>

                      <option name=three value=three> three </option>

                      <option name=four value=four> four </option>

                      <option name=one value=one> one </option>

                      <option name=two value=two> two </option>

                      <option name=three value=three> three </option>

                      <option name=four value=four> four </option>

                      <option name=one value=one> one </option>

                      <option name=two value=two> two </option>

                      <option name=three value=three> three </option>

                      <option name=four value=four> four </option>--->

                  </select>

              </td>

          </tr>

          <tr>

              <td> &nbsp</td>

              <td><input type="submit" name="submit" id="submit" value="SUBMIT"></td>

          </tr>

      </table>--->

       

       

      <cfcomponent output="false">

         

          <cffunction access="remote" name="getServiceLists" returntype="void">

              <cfargument name="criteria" required="true" type="String">

              <cfif arguments.criteria eq "searchByServiceName">

              <cfoutput>

                      '<option name="two" value="two"> searchByServiceName </option>'

              </cfoutput>

              <cfelse>

                  <cfoutput>

                      '<option name="two" value="two"> searchByServiceAgent </option>'

                  </cfoutput>

              </cfif>

          </cffunction>

       

      </cfcomponent>

        • 1. Re: html
          duncancumming Level 3

          What's the question?

          • 2. Re: html
            p.sim Level 3

            Perhaps, this is what you're looking for.

             

            searchPage.cfm

            =============

            <style type="text/css">

            .mainhead{

                width:800px;

            }

                .outset {

                border-style:outset;

                border-color:#FF4000;

                background-color:#F2F2F2;

                width : 800px;

            }

            .multselect{

                width:250px;

                height:150px;

            }

            </style>

            <script type="text/javascript">

            function getServiceList(searchBy)

            {

                var xmlhttp;

               

                if (searchBy.length==0)

                {

                    document.getElementById("serviceListBox").innerHTML="";

                    return;

                }

               

                if (window.XMLHttpRequest)

                {// code for IE7+, Firefox, Chrome, Opera, Safari

                    xmlhttp=new XMLHttpRequest();

                }

                else

                {// code for IE6, IE5

                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

                }

               

                xmlhttp.onreadystatechange=function()

                {

                    if (xmlhttp.readyState==4 && xmlhttp.status==200)

                    {

                        document.getElementById("serviceListBox").innerHTML=xmlhttp.responseText;

                    }

                }

             

             

                xmlhttp.open("GET","http://localhost:8888/test/servicelists.cfc?method=getServiceLists&criteria="+searchBy,true);

                xmlhttp.send();

            }

            </script>

            <table class="mainhead">

                <tr align="center">

                    <td></td>

                </tr>

            </table>

            <table class="mainhead">

                <tr align="left">

                    <td>Search Criteria:</td>

                    <td>&nbsp</td>

                </tr>

            </table>

            <table class="outset">

                <tr>

                    <td>Required Fields</td>

                    <td>Optional Fields</td>

                </tr>

                <tr><td>&nbsp</td><td>&nbsp</td></tr>

                <tr>

                    <td>Business:

             

                        <select name="business" id="business">

                            <option value=""></option>

                            <option value="b1">Business1</option>

                            <option value="b2">Business2</option>

                            <option value="b3">Business3</option>

                        </select>

                    </td>

                    <td>Account No:

                        <input type="text" name="accountNumber" id="accountNumber">

                    </td>

                </tr>

                <tr><td>&nbsp</td><td>&nbsp</td></tr>

                <tr>

                    <td>Starting Date:

                            <input type="text" name="startingDate" id="startingDate">

                    </td>

                    <td>Search By:</td>

                </tr>

                <tr>

                    <td>&nbsp</td>

                    <td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByServiceName" onclick="getServiceList(this.value)">Service Name</td>

                </tr>

                <tr>

                    <td>&nbsp</td>

                    <td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByAgent" onclick="getServiceList(this.value)">Agent</td>

                </tr>  

                <tr>

                    <td>Ending Date:

                        <input type="text" name="startingDate" id="startingDate">

                    </td>

                    <td>Use Ctrl key to select muliple services</td>

                </tr>

                <tr><td>&nbsp</td><td>&nbsp</td></tr>

                <tr>

                    <td>&nbsp</td>

                    <td>

                        <select name="serviceListBox" id="serviceListBox" size="3" multiple class="multselect">

                            <option value="one"> one </option>

                            <option value="two"> two </option>

                            <option value="three"> three </option>

                            <option value="four"> four </option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>&nbsp</td>

                    <td><input type="submit" name="submit" id="submit" value="SUBMIT"></td>

                </tr>

            </table>

             

             

            servicelists.cfc

            ============

            <cfcomponent output="false">

             

             

                      <cffunction name="getServiceLists" access="remote" returntype="string" returnformat="plain">

                                <cfargument name="criteria" required="true" type="string">

             

             

                                <cfset var option_string = '' />

             

                                <cfif arguments.criteria eq "searchByServiceName">

                                          <cfset option_string = '<option value="two">searchByServiceName</option>' />

                                <cfelse>

                                          <cfset option_string = '<option value="two">searchByServiceAgent</option>' />

                                </cfif>

             

             

                                <cfreturn option_string />

                      </cffunction>

             

             

            </cfcomponent>

            • 3. Re: html
              p.sim Level 3

              A suggestion:

               

              - Use jQuery library for the AJAX. jQuery maintains browsers compatibility.