1 Reply Latest reply on Feb 1, 2014 10:41 AM by BKBK

    How would you generate a cfimage from an ajax call?

    siriiven Level 1

      I have a bunch of form fields that are all bound to a single drop down selection. When an option is selected I need to fill in a bunch of form fields with data. The last part is that I need to retrieve an image that is stored in sql server an image field and output the image on the page. All of the form fields are populating properly based on the cfc I am using. I can generate the image with a straight query output but cannot figure out how to trigger the generation of the image when the cfselect option changes.

       

      Any thoughts?

        • 1. Re: How would you generate a cfimage from an ajax call?
          BKBK Adobe Community Professional & MVP

          siriiven wrote:

           

          How would you generate a cfimage from an ajax call?

          Using cfdiv, for example. To run a proof of concept, follow these steps:

           

          1) Create a test directory under the web-root for this. Obtain two distinct image files, rename them, say, testImage1.png and testImage2.png, and move them to the test directory.

           

          2) Create the following 2 CFM files in the test directory

           

          formPage.cfm


          <cfform>

          <cfselect name="mySelection">

              <option value="no_img">Option 0</option>

              <option value="img1">Option 1</option>

              <option value="img2">Option 2</option>

          </cfselect>

          </cfform>

           

          <h3> Div to contain the image </h3>

          <cfdiv bind="url:imageURL.cfm?someVar={mySelection}" ID="theDiv" style="height:400"/>

           

           

          imageURL.cfm

           

          <h3>Echoing image</h3>

          <!--- Code to simulate obtaining the path of an image from the database, based on the input URL variable --->

          <cfif isdefined("url.someVar") and url.someVar eq "img1">

                  <!--- Query to obtain relative path of image 1 --->

                  <img src="testImage1.png">

          <cfelseif isdefined("url.someVar") and url.someVar eq "img2">

                  <!--- Query to obtain relative path of image 2 --->

                  <img src="testImage2.png">  

          <cfelse>

          No image!

          </cfif>

           

           

           

          3) When you run the form page, the div will display an image that corresponds to the option selected in the form.