Skip navigation
Currently Being Moderated

html

Aug 4, 2013 9:18 AM

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.responseT ext;

     }

   }

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>

 
Replies
  • Currently Being Moderated
    Aug 5, 2013 1:43 AM   in reply to Abdul L Koyappayil

    What's the question?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2013 10:05 PM   in reply to Abdul L Koyappayil

    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.responseT ext;

            }

        }

     

     

        xmlhttp.open("GET","http://localhost:8888/test/servicelists.cfc?method=getServiceLists&cri teria="+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>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2013 10:09 PM   in reply to Abdul L Koyappayil

    A suggestion:

     

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points