Solved

jquery AJAX and ColdFusion database update

Posted on 2012-03-11
13
751 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
13 Comments
 
LVL 16

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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

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 16

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
 
LVL 16

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
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…
Suggested Courses

636 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