6 Replies Latest reply on Jul 20, 2013 2:06 PM by iccsi

    pass parameter from user choice to a query

    iccsi Level 1

      I have a CFSELECT on the form and link to a query.

      I would like to fill details information when user select thew option.

      The option is at client side, since user select the option which I need pass my query to get information to fill on the details form on the same form.

       

      I tried to use following JavaScripts which fill the details information, but browser goes to the page which I want to fill the details informaiton on the same form.

       

      function FillInfo()
      {
      /*Fill Details Information*/

        var url = 'ccdDetailsInfo.cfm?MyAccount=' + document.getElementById('frmEntry').lstNumber.value;
      }

       

      I tried to use iFrame, it works and fill on the same form, but everything under iFrame disappear like footer and all other controls in the table.

       

      <iframe id="DetailsFrame"  src="ccdDetailsInfo.cfm"</iframe>

       

      I tried to use CFINCLUDE the file, but it does not take the paramter from client side.

       

      The problem is the query paramter is server side query.

      I am looking for a way can pass the client data to server parameter to run the query and to fill details form.

      I did some reasearch for this on Google, but no luck,

      If you can give me some link regarding pass parameters between client and CF server would be appreciated,

       

      Regards,

       

      Iccsi,

        • 1. Re: pass parameter from user choice to a query
          p.sim Level 3

          Use HTML select instead of cfselect; and use AJAX instead of iFrame.

           

          See this link: http://www.w3schools.com/jquery/ajax_ajax.asp

           

          Replace url:"demo_test.txt" with e.g. url:"get_data.cfm"

           


          • 2. Re: pass parameter from user choice to a query
            iccsi Level 1

            Thanks for the message and help,

            If I understand correctly, the sample read demo_test.txt and put the content on div1.

            which I can read from external text file.

            I want to pass my value on the select to my query parameter.

            In this case, I need create an external file using my client page or I can read any variable on the demo_test.txt?

            Please let me know if I am wrong,

             

            Thanks again for helping,

             

            Regards,

             

            Iccsi,

            • 3. Re: pass parameter from user choice to a query
              p.sim Level 3

              <!--- my_form.cfm --->

              <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

              <script type="text/javascript">

              jQuery(document).ready(function() {

               

               

                        jQuery("#product_id").change(function() {

               

                                  jQuery.ajax({

                                            url: "get_detail.cfm?product_id=" + jQuery("#product_id").val()

                                            , type: "get"

                                            , success: function(result) {

                                                      jQuery("#product_detail").html(result);

                                            }

                                  });

               

               

                        });

               

               

              });

              </script>

               

               

              <form method="post" action="">

                        <select id="product_id">

                                  <option value="1">Apple</option>

                                  <option value="2">Banana</option>

                                  <option value="3">Cherry</option>

                        </select>

                        <div id="product_detail"></div>

              </form>

               

               

              <!--- get_detail.cfm --->

              <!--- You replace this with query --->

              <cfswitch expression="#url.product_id#">

                        <cfcase value="1">My color is red.</cfcase>

                        <cfcase value="2">My color is yellow.</cfcase>

                        <cfcase value="3">My color is dark red.</cfcase>

                        <cfdefaultcase>Invalid product id</cfdefaultcase>

              </cfswitch>

              • 4. Re: pass parameter from user choice to a query
                iccsi Level 1

                Thanks for the information and help,

                 

                "get_detail.cfm?product_id=" + jQuery("#product_id")

                 

                If I understand correctly, jQuery create above link with parameter and

                using CFINCLUDE to have  get_detail.cfm in Product_Detail div that get_detail.cfm will accept #product_id  parameter.

                 

                Please let me know if I am wrong,

                 

                Thanks again for helping,

                 

                Regards,

                 

                Iccsi,

                • 5. Re: pass parameter from user choice to a query
                  p.sim Level 3

                  jQuery("#product_id").val() -- is to get the value of selected option.

                   

                  The value is concatenated to the "get_detail.cfm?product_id="

                   

                  When get_detail.cfm is called, it will return a string as a "result" in the jQuery. Then, the result is inserted to the div tag which is "product_detail".

                   

                  Go to jQuery documentation to learn more about ajax(), val(), and html(). The doc explains very clear and it has some examples how to use them.

                  • 6. Re: pass parameter from user choice to a query
                    iccsi Level 1

                    Thanks a million for helping and information,

                     

                    regards,

                     

                    iccsi,