Dynamically add text into body as I click indexes in coldfusion Asked Mar 20 '14 at 04:53 Active Mar 20 '14 at 18:10 Viewed 376 times 1 On my cold fusion page what I want to do is click one of the options from my <Select> statement. After doing so I want to see a richtextbox be dynamically filled with a matching record in my database from the value of the item I clicked. I also want it to do the same for a checkbox, and authors object. Each object already has a column in my database, what is left is to add this dynamic feature to fill in my data for editing a post. My code looks like this: <!--- Query ---> <cfquery name="Posts" datasource="Postings"> Select * from BlogPosts </cfquery> <!--- Fill Listbox ---> <cfselect name="LoopPosts" size="12"> <cfoutput query="Posts"><option value="#PostID#"> #PostTitle#</option></cfoutput> </cfselect> <!--- Secondary Query ---> <cfquery name="PostsQuery" datasource="Postings"> Select * from BlogPosts </cfquery> <!--- Fill ---> <cftextarea style="width: 1000px; height: 600px;" name="PostBody" id="blog"><cfoutput query="Postquery">#PostBody#</cfoutput></cftextarea> <input name="ActivePost" type="checkbox" value="<cfoutput query="Postquery">#Active#</cfoutput>"> dynamic coldfusion edited Mar 20 '14 at 13:25 Scott Stroz 7,510 2 21 25 asked Mar 20 '14 at 04:53 user3440142 35 6 The data is going to get pulled back via either a get, post, or AJAX. You need to consider which approach you are going to use. – James A Mohler Mar 20 '14 at 05:03 Ok, if that is the case, how can I trigger a submit just by clicking one of the objects in my list box. Then I will dynamically fill everything. Also could a Bind function somehow grab the value from my and inserting it into the where of a query statement potentially? – user3440142 Mar 20 '14 at 05:07

Answer 1

Let me try to redeem myself with a modified answer:

You can dynamically reapply options to elements using ajax calls to your cfc file (since cfc bind is apparently a no-no) by adding an event listener to the first select field and calling the method in the cfc file via an AJAX get request. In the success function, you can then update the response to the textarea field.

Every time a selection is made from the select box, the text box will refresh the data with the appropriate query result.

The HTML page could look something like this:

<script type="text/javascript">
    document.forms['yourformname'].elements['LoopPosts'].addEventListener('click', function(){
    $.ajax({
      type:"GET",
      url: "yourcfcfilename.cfc?method=GetSelectedPost",
      data: {selectedPost : this.value},
      success: function(response) {
        document.forms['yourformname'].elements['PostBody'].innerHTML = response;
      },
      error : function(XMLHttpRequest, textStatus, errorThrown) { 
        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      }
    });
  });
</script>

And the cfc page could look something like this:

<cfcomponent displayname="Post Functions" output="true">

  <!--- Secondary Query --->
  <cffunction name="GetSelectedPost" access="remote" returntype="String">
    <cfargument name="selectedPost" type="string" required="true">

      <cfquery name="PostsQuery" datasource="Postings">
        SELECT PostBody
        FROM BlogPosts
        WHERE PostID = <cfqueryparam value="ARGUMENTS.selectedPost">
      </cfquery>

      <cfreturn PostsQuery.PostBody>
  </cffunction>

</cfcomponent>

Every time a selection is made from the select box, the text box will refresh the data with the appropriate query result.