Solved

jquery AJAX and ColdFusion database update

Posted on 2012-03-11
13
637 Views
Last Modified: 2012-03-26
I'm just starting out with jquery and CF. I want to be able to update a MySQL database using a form, and have the updated result appear in the form field.

I have this form in a table:

<table border="1" cellpadding="5" cellspacing ="4">
      <tr><td colspan="2"><cfoutput>#getGallery.gallery_name#</cfoutput></td></tr>
        <cfoutput query="getGallery">
        <form id="captionForm" name="captionForm_#ID#">
        <tr><td>#ID#<img src="../../assets/gallery/#GID#/icons/#image_name#" width="90" height="67" alt="image" /></td>
        <td><input type="text" id ="caption_#ID#" name ="caption_#ID#" value="" onChange="doSetCaption(#ID#)" /></td></tr>
        </form>
        </cfoutput>

</table>



I have this script:

<script>
var doSetCaption = function(ID){
      
      $.ajax({
      type: "post",
      url:"doUpdateGalleryCaption.cfc",
      data: { method: "doSetCaption" },
      cache:false,
        imageID: ID
  });
 
}
</script>



And I have this cfc:

<cfcomponent output="false">
   
        <cfset datasource ="dsn">

    <cffunction name="doSetCaption" access="remote" output="false" returntype="Any">
    <cfargument name="imageID" type="numeric" required="yes">            
    <cfquery datasource="dsn" name="doUpdateCaption">
                UPDATE gallery_images
                SET caption  = (<cfqueryparam cfsqltype="cf_sql_varchar" value="FORM_VALUE _HERE">)
                WHERE ID = (<cfqueryparam cfsqltype="cf_sql_integer" value="#ARGUMENTS.imageID#">)
                </cfquery>
     <cfreturn>
     </cffunction>
</cfcomponent>

The script runs, and fireBug reports an error:

POST: http://thedomain.org/doUpdateGalleryCaption.cfc

But there's no content in the FB response body.

I need some help please.
0
Comment
Question by:kabookis
  • 6
  • 4
  • 3
13 Comments
 
LVL 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37708686
what is your issue, i am unable to understood from ur post

1. do u want to submit the code to the database and repopulate the response to the page and refresh the gallery

2. or something else?
0
 

Author Comment

by:kabookis
ID: 37709324
Sorry, I should have been clearer. It's your item #1.


When a user types text  into the the form field input (i="caption_#ID#) and presses the "Enter" key, the function "doSetCaption" should run. (onChange="doSetCaption(#ID#).

The function should call the cfc, which will update the DB.

The text that the user has typed into the form field should remain in the form field.

The background color of the text input box will change to #f0f0f0 to show that it's been edited.

Thanks.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37710014
try this:

<script>
var doSetCaption = function(ID){
      $.ajaxSetup({cache:false});
      $.ajax({
            type: "post",
            url:"doUpdateGalleryCaption.cfc?method=dpSetCaption&imageID="+ID,
            data: $("#captionForm").serialize(),
            success: function(data) {
                  $("#caption_"+ID).attr("style","background-color:#f0f0f0");
            }
      });
}
</script>

note that in your code you have the text field set to trigger a function onChange - different browsers interpret the change event differently - so you should take that into account
0
 

Author Comment

by:kabookis
ID: 37711917
I still can't get this to go. I ran the script as you suggested, then changed it as follows. No joy.
The first alert comes up with the ID, so the function is being called.



I changed data to: $("#captionForm_" + ID).serialize() since the captionForm ID's are being dynamically generated.


var doSetCaption = function(ID){
      alert('running' + ID);
      $.ajaxSetup({cache:false});
      $.ajax({
            type: "post",
            url:"doUpdateGalleryCaption.cfc?method=doSetCaption&imageID="+ID,
            data: $("#captionForm_" + ID).serialize(),
            success: function(data) {
                  //$("#caption_"+ID).attr("style","background-color:#f0f0f0");
                  alert('OK');
            }
      });
}
</script>
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37712005
In your code you have your form id="captionForm" NOT "captionForm_#ID#" - that is your form name!

      Fix this and it should work.
0
 
LVL 15

Accepted Solution

by:
Gurpreet Singh Randhawa earned 500 total points
ID: 37712014
do it like this

 <td><input type="text" id ="caption_#ID#" name ="caption_#ID#" value="" onChange="doSetCaption(#ID#)" class="colorMe" /></td></tr>

$(document).ready(function() {
      $(".colorMe").live("change",function() {
            var id = this.id.replace("caption_","","");
            alert(ID);
            var data = 'captionID='+id;
             $.ajax({
            type: "post",
            url:"doUpdateGalleryCaption.cfc?method=doSetCaption,
            data: data,
            success: function(data) {
                  $("#caption_"+ID).attr("style","background-color:#f0f0f0");
                  alert('OK');
            }
      });
     });
});

also if i can see a live code, that could be cool
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37712017
just remove function ffrom ur input field
0
 

Author Comment

by:kabookis
ID: 37764064
Ok, I've made the changes but still no success. I'm not seeing any js errors.

link here:

http://www.boxorox.net/eex/edit_gallery.cfm

This is the cfc:

<cfcomponent output="false">
   
        <cfset datasource ="dsn">

    <cffunction name="doSetCaption" access="remote" output="false" returntype="Any">
    <cfargument name="id" required="yes">            
    <cfquery datasource="dsn" name="doUpdateCaption">
                UPDATE boxo_gallery_images
                SET caption  = (<cfqueryparam cfsqltype="cf_sql_varchar" value="boxo">)
                WHERE ID = (<cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">)
                </cfquery>
     <cfreturn false>
     </cffunction>
</cfcomponent>
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37765368
whats with the parenthesis around the cfqueryparam tags?

Also - post your current form code - that was where the problem was ...
0
 

Author Comment

by:kabookis
ID: 37765503
The parentheses are a non-issue.


        <cfoutput query="getGallery">
        <form id="captionForm" name="captionForm_#ID#">
        #ID#<img src="../../assets/gallery/#GID#/icons/#image_name#" width="90" height="67" alt="image" />
        <input type="text" id ="caption_#ID#" name ="caption_#ID#" value="#caption#"  class="colorMe" />
        </form>
        </cfoutput>
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37765528
see - you did NOT make the change that i said.
so WHAT did you change when you said you made the changes then tried it???

what i said earlier was:
In your code you have your form id="captionForm" NOT "captionForm_#ID#" - that is your form name!
      Fix this and it should work.

You do realize that name and id are two different things  - right?
It will not work unless you do that ...
0
 

Author Comment

by:kabookis
ID: 37769439
OK. It took awhile, but I have it figured out.

I've changed the captionForm id, corrected your typos, and removed the superfluous "type: post" setting. The "type" setting is not necessary, since the default jquery .ajax type is "GET", and, in this case, the cfc will run with or without it.

I've also changed the data setting so that it includes the cfc method as well as the missing form caption value as requested in my original post (cfc - "FORM_VALUE_HERE"). The template and cfc are obviously useless otherwise.

It turns out that the line "var data = 'captionID='+id;" is also inappropriate without a corresponding change for the arguments value in the cfc, so I didn't use it.

The .colorMe class with the change event handler strategy works very well. Thanks.

Here's the form -

<table....
        <form id="captionForm" name="captionForm">
        <cfoutput query="getGallery">
        <tr>
        <td><img src="../../assets/gallery/#GID#/icons/#image_name#" width="90" height="67" alt="image" /></td>
        <td><input type="text" id ="caption_#ID#" name ="caption_#ID#" value="#caption#"  class="colorMe" /></td>
        </tr>
        </cfoutput>
        </form>
</table>



This works:

$(document).ready(function() {
      $(".colorMe").live("change",function() {
            var id = this.id.replace("caption_","","");
          var caption = $("#caption_" + id).val();
            var data = {ID: id, method: "doSetCaption", caption: caption};
            $.ajax({
            url:"doUpdateGalleryCaption.cfc",
            data: data,
            success: function() {
                  $("#caption_"+id).attr("style","background-color:#f0f0f0");
            }
      });
     });
});

I also figured out how to get the cfc to work properly, a first for me.

<cfcomponent output="false">

    <cffunction name="doSetCaption" access="remote" output="false" returntype="Any">
    <cfargument name="id" required="yes" type="numeric">  
    <cfargument name="caption" required="yes" type="string">            
    <cfquery datasource="dsn" name="doUpdateCaption">
                UPDATE gallery_images
                SET caption  = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.caption#">
                WHERE ID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">
    </cfquery>
    <cfreturn false>
    </cffunction>
</cfcomponent>
0
 

Author Closing Comment

by:kabookis
ID: 37769453
This answer was enough to point me in the right direction, so that I could eventually figure out the answer on my own. "myselfrandhawa" knows jquery, so I learned a great deal.

 I have to say that I could do without the ALL CAPS AND MULTIPLE ??? AND !! in the other comments though. It comes off as a little hysterical, and it's not really helpful, but all-in-all, it was a good experience.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now