AJAX & Coldfusion: Performing an update to database and reflecting changes without reload

问题

I'm having problems visualizing the solution that I need here. I have a select menu on the site that I'm working on and the client would like to be able to select an option called "Create New Origin", which would then have a JS window pop up with a blank field for the user to type in that new origin.

Upon submitting this form the database would be updated and the select menu would now feature this item without an entire refresh of the page.

The database side of things is all set up and ready to go, as is 99% of the Coldfusion.

Here's a snippet of the form field in question:

<p class="_30NP" align="right">
    <label>Origin&nbsp;</label>
</p>
<p class="_20NP">
    <cfselect 
     name="Origin" 
     id="Origin" 
     query="Origin" 
     display="description" 
     value="code"  
     required="yes">
        <option value="new">New Origin</option>
    </cfselect>
</p>

Here's the CFQUERY:

<CFQUERY DBTYPE="Query" NAME="Origin">
    SELECT Code, [Description]
    FROM ZCODES WHERE CODE = 0
    UNION ALL 
    SELECT Code, [Description]
    FROM ZCODES
    WHERE FieldName = 'Origin'
    ORDER BY 1
</CFQUERY>

This is a very simple question with probably a very simple answer, I just have little exposure to AJAX.

How do I submit a form (pop up window) and refresh the select list without completely refreshing the page?

回答1:

I would use a javascript library like jQuery to handle your ajax.

Once the button is clicked use $.get(), $.post(), or $.ajax() to communicate with the server. Each will provide a response. The response type is up to you. You could return JSON and parse it out, or you could return straight HTML. I might simply return html to be quick and easy.

<cfoutput query = "...">
    <option value = "...">...</option>
</cfoutput>

Once you have the result, use $.html() to update the select's options.

回答2:

Michael, I personally dislike a completely jQuery ajax solution. I really like CFAJAXPROXY. I hear it has downsides, but I haven't found any.

Your question is very similar to another question on a stackexchange.com site. I think you can find some good info here.

https://softwareengineering.stackexchange.com/questions/133759/where-can-i-find-a-simple-jquery-ajax-coldfusion-tutorial

来源：https://stackoverflow.com/questions/15208351/ajax-coldfusion-performing-an-update-to-database-and-reflecting-changes-witho

标签

ajax

database

coldfusion

cfml