Jquery Inline editing error coming up

I am trying to run inline editing of a message but i am getting an error:

here below is my code:
top of the page within the <head> and closing </head> tags:

<style type="text/css">
.editing{color: red};
</style>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript1.2" src="../jscode/jquery.editableText.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
            $('.editable').editable(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });      
      </script>

Now under the <body> tag

<tr><td class="darkred"><h4 id="composer" title="#msgID#">#productName#</h3></td></tr>


<tr>
    <td colspan="6"><div class="editable" id="message">#ParagraphFormat(message)#</div></td>
  </tr>

now i am getting this error:

$(".editable").editable is not a function
[Break on this error] Failed to load source for: http://127....project1/admin/status.cfm?msgID=3

Open in new window

LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
which editabletext plugin are you using?
i think you may be mixing up the syntax of the 2 plugins i know of...

Azadi
0
Chad SmithSoftware EngineerCommented:
You need to use the change event not editable
    <script type="text/javascript">
         $(document).ready(function(){
            $('.editable').change(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });      
      </script>

Open in new window

0
Chad SmithSoftware EngineerCommented:
I should not that you still need to call editableText on your class
    <script type="text/javascript">
         $(document).ready(function(){

            $('.editable').editableText();

            $('.editable').change(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });      
      </script>

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Gurpreet Singh RandhawaCEOAuthor Commented:
ok i tried ur way:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript1.2" src="../jscode/jquery.editableText.js"></script>
        <script type="text/javascript">
         $(document).ready(function(){

            $('.editable').editableText();

            $('.editable').change(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });      
      </script>

<tr><td class="darkred"><h4 id="composer" title="#msgID#">#productName#</h4></td></tr>

<tr>
    <td colspan="6"><div class="editableText" id="message">#ParagraphFormat(message)#</div></td>
  </tr>

but still nothing happens

now i do not get error but text is not editable here
0
Gurpreet Singh RandhawaCEOAuthor Commented:
i am using this plugin azadi:

http://valums.com/edit-in-place/
0
azadisaryevCommented:
>> <div class="editableText"

the class of your div should be 'editable'; or change the jquery selector in your js to $(".editableText")

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
u mean to say:

<script type="text/javascript">
         $(document).ready(function(){

            $('.editableText').editableText();

            $('.editable').change(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });      
      </script>

did not effected
0
azadisaryevCommented:
>> $('.editable').change(function(element){

it looks like only changed one occurrence of the selector. you need to change the above one as well.

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
i did that also but not working
0
azadisaryevCommented:
well doh! you need to add contenteditable="true" to your <div>

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
well ok i did something like this:

<div class="editableText" contenteditable="true" id="message">#ParagraphFormat(message)#</div>

it was edited but not saved. i did not got any alert, and when i closed it it appeared the same as it was before
0
azadisaryevCommented:
change your function to this:

$('.editable').change(function(){
  $.ajax({
    type: "post",
    url: "update.cfm",
    data: "newfieldvalue=" + $(this).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + this.id,
    success: function(msg){
      alert('Your edits have been saved');
    }
  });
});

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
god! not working:

<script type="text/javascript">
         $('.editable').change(function(){
              $.ajax({
                  type: "post",
                  url: "update.cfm",
                  data: "newfieldvalue=" + $(this).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + this.id,
                  success: function(msg){
                    alert('Your edits have been saved');
                  }
              });
            });    
</script>

<tr><td class="darkred"><h4 id="composer" title="#msgID#">#productName#</h4></td></tr>
<tr>
    <td colspan="6"><div class="editable" contenteditable="true" id="message">#ParagraphFormat(message)#</div></td>
  </tr>

tried with editableText also.. did not worked either
0
azadisaryevCommented:
can you please define "not working"?

do you mean the <div> does not change into editable text? or that whatever code you have in update.cfm does not do whatever it is supposed to do? or some other way this is not working as you expected?

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
well ok, neither i get any error message, it does change into a editable grid like a dotted around it:

i have the following in my update.cfm page:

<cfparam name="form.composerId">
<cfquery datasource="#request.dsn#" username="#request.user#" password="#request.pass#">
   UPDATE messages
   SET
   #form.sectionId# = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#form.newfieldvalue#">
   WHERE msgID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.composerId#">
</cfquery>
0
azadisaryevCommented:
what does firebug say? does the ajax post succeed or does it return an error?

is your msgID column really a varchar type?

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
yep! firebug does nothing....

it does not show any error not any call
0
azadisaryevCommented:
so, just to re-coup:
- the editableText plugin works, i.e. converts your div to an editable are
- when you edit the div contents and click on the save icon, the data is sent to update.cfm correctly
- the database, however, is NOT updated
- you do not see the 'Your edits have been saved' alert (or do you?)

to test it further, change your code in update.cfm to just this:
<cfoutput>
#form.sectionid# | #form.msgID#<br>
#form.newfieldvalue#
</cfoutput>

and in your js code comment out the alert() and add this instead:
console.log(msg);

with firebug open on console tab, you should see the form variables displayed there after you click on 'save' icon in your editable div. if you see anything else there, please post it here.

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
- the editableText plugin works, i.e. converts your div to an editable are
YES IT DOES
- when you edit the div contents and click on the save icon, the data is sent to update.cfm correctly
REALLY I DON'T KNOW because i get no result, click i move my mouse away from editable and click somewhere else..

- the database, however, is NOT updated
I did not see any results! database does not get updated
- you do not see the 'Your edits have been saved' alert (or do you?)
NO I DO NOT SEE THEM I USED CONSOLE>LOG, IT DOES NOT SHOWED ALSO
0
Gurpreet Singh RandhawaCEOAuthor Commented:
any other way! is my jquery editable grid is fine or not
0
azadisaryevCommented:
just clicking outside the editable area does NOT save the changes / trigger the change() event.
you MUST click on the 'save' button/icon to trigger the change and make it post the data to your update.cfm.

if you do not see the edit/save/cancel icons in the editable area, then you have not correctly included the stylesheet that comes with it.

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
Hmm! Let Me check
0
Gurpreet Singh RandhawaCEOAuthor Commented:
i have added this and path is correct:

<script type="text/javascript"  src="../jscode/jquery-1.4.2.js"></script>
<script language="javascript1.2" src="../jscode/jquery.editableText.js"></script>
<link rel="stylesheet" href="css/editableText.css" media="all" />
<script type="text/javascript">
         $('.editableText').change(function(){
              $.ajax({
                  type: "post",
                  url: "update.cfm",
                  data: "newfieldvalue=" + $(this).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + this.id,
                  success: function(msg){
                    console.log(msg);
                    <!---alert('Your edits have been saved');--->
                  }
              });
            });    
</script>

icons.png is saved in the same folder where the css file is stored
0
Gurpreet Singh RandhawaCEOAuthor Commented:
that is making a use of editableToolbar where we have not used that anywhere in our script we have just used the editableText
0
azadisaryevCommented:
>> that is making a use of editableToolbar where we have not used that anywhere in our script we have just used the editableText

i am not sure what you are talking about. there's no toolbar - just an edit icon or save/cancel icons when in edit mode.

you also seem to be missing quiet a bit of required js in the last code snippet you posted - $(document).ready() declaration and $('.editableText').editableText() line.

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
what am i missing, i just posted the jquery stuff u posted above

do i need to do like this:

 $(document).ready(function(){

            $('.editableText').editableText();

            $('.editableText').change(function(element){
               $.ajax(
                  {
                     type: "POST",
                     url: "update.cfm",
                     data: "newfieldvalue=" + $(element).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + element.id,
                     success: function(msg){
                        alert('Your edits have been saved');
                     }
                  }
               );
            });
      });
0
Gurpreet Singh RandhawaCEOAuthor Commented:
Ok it worked but now i am facing an error!

Invalid data '' for CFSQLTYPE CF_SQL_NUMERIC.
0
azadisaryevCommented:
no, like this:

$(document).ready(function(){
  $('.editableText').editableText();
  $('.editableText').change(function(){
    $.ajax({
      type: "POST",
      url: "update.cfm",
      data: "newfieldvalue=" + $(this).html() + "&msgID=" + $('#composer').attr('title') + "&sectionId=" + this.id,
      success: function(msg){
        console.log(msg);
        alert('Your edits have been saved');
      }
    });
  });
});

Azadi
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
i cfdump it and i got this:

struct
COMPOSERID       3
FIELDNAMES       NEWFIELDVALUE,COMPOSERID,SECTIONID
NEWFIELDVALUE       null
SECTIONID       undefined

NewFieldValue and SectionID are not being send to the update.cfm page
0
azadisaryevCommented:
>> Invalid data '' for CFSQLTYPE CF_SQL_NUMERIC.

well, which column in your table is integer, and what data are you trying to pass to it?
the error is because the data you are passing is not a number for the column you used cfsqltype="cf_sql_numeric" for.

Azadi
0
Gurpreet Singh RandhawaCEOAuthor Commented:
Awesome just changing element to THIS has made the difference, can u explain a bit on that
0
azadisaryevCommented:
>> NewFieldValue and SectionID are not being send to the update.cfm page

it won;t be passed if you are using $(element).html() and element.id - change your js to use $(this).html() and this.id as in my posted code above. and get rid of 'element' in .change(function(element){...

Azadi
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.