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 RandhawaWeb DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
azadisaryevConnect With a Mentor Commented:
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
 
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
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
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
 
Gurpreet Singh RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor Commented:
Hmm! Let Me check
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor Commented:
Ok it worked but now i am facing an error!

Invalid data '' for CFSQLTYPE CF_SQL_NUMERIC.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor 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 RandhawaWeb DeveloperAuthor 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
All Courses

From novice to tech pro — start learning today.