Solved

JQuery editable function question

Posted on 2013-01-23
20
1,641 Views
Last Modified: 2013-01-24
Hi Experts, I want to ristrict user to do not enter more than 100 characters in JQuery defined Text area. Please see below my HTML and JQuery code.
Please see below javasrcipt code i used to ristrict number of chars in HTML text area. I am not sure how to do this in JQuery defined text area. Please help me ?

HTML/JSP:

<p class="editText" name="respText" id="respText" title="click to edit"> </p>

Open in new window


JQuery:
 	 $('.editText').editable(function(value, settings) { 
 	     console.log(this);
 	     console.log(value);
 	     console.log(settings);
 	     return(value);
 	     }, { 
 	     type    : 'textarea',
 	     rows	: 5,
 	     cols	: 100,
 	     cancel    : 'Cancel',
 	     submit  : 'OK'
 	 });

Open in new window


Javascript function:
function textLimit(field, maxlen) {
	if (field.value.length > maxlen)
		field.value = field.value.substring(0, maxlen);
}

Open in new window

0
Comment
Question by:kcmovies
[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
  • 10
  • 5
  • 4
  • +1
20 Comments
 

Author Comment

by:kcmovies
ID: 38813005
Increased to max points
0
 
LVL 42

Expert Comment

by:David S.
ID: 38813803
Which "editable" jQuery plugin are you using? There seem to be several.

By the way, "ristrict" is not an English word. You mean "restrict".
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38813873
Hi,
perhaps you can bind this Javascript to your textarea:
http://www.mkyong.com/jquery/add-maxlength-on-textarea-using-jquery/

HTH
Rainer
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:kcmovies
ID: 38814559
Hi Kravimir,  i've posted editable function in my post. Please see above. I meant "restrict", sorry for mistake.

Thanks
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38814628
Hi,

Did you tried this -

 $('.editText').editable(function(value, settings) { 
 	     console.log(this);
 	     console.log(value);
 	     console.log(settings);
 	     return(value);
 	     }, { 
 	     type    : 'textarea',
 	     rows	: 5,
 	     cols	: 100,
             maxlength: 20,
 	     cancel    : 'Cancel',
 	     submit  : 'OK'
 	 });

Open in new window


Hope it helps u...
0
 

Author Comment

by:kcmovies
ID: 38814654
Hi Rainer,

I am able to bind the below JQuery function with javascript function. But when i try to get content using "var currentLengthInTextarea = $("#editText").text().length;", i am not getting anything. In order to work like in your sample, first we need to get text from text area.

More info: when i click "click to edit" (this was defined in HTML "<p class="editText" name="respText" id="respText" title="click to edit"> </p>
") The below code opens up text area with "OK" and "Cancel" buttons. I am thinking after i click "OK" only, entered string will be available to get from javascript. But i need to restrict user while entering itself.


 	 $('.editText').editable(function(value, settings) { 
 	     console.log(this);
 	     console.log(value);
 	     console.log(settings);
 	     return(value);
 	     }, { 
 	     type    : 'textarea',
 	     rows	: 5,
 	     cols	: 100,
 	     cancel    : 'Cancel',
 	     submit  : 'OK'
 	 }); 

Open in new window

0
 

Author Comment

by:kcmovies
ID: 38814677
Hi roopeshreddy, I tried with "maxlength: 20", looks like it is not working. Even i add this i am able enter more than 20 characters.

Thanks
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 400 total points
ID: 38814841
Hi,
maxlength on textarea elements is a new property in HTML 5, which will not work in most current browsers (e.g. <IE9).
From
http://www.appelsiini.net/projects/jeditable/custom.html
there is exactly what you want: Character Counter.

Here a quick sample:
<html>
<head>
<title>Test length</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/js/jquery.charcounter.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".editText").editable(function(value, settings) { 
 	     console.log(this);
 	     console.log(value);
 	     console.log(settings);
 	     return(value);
 	     }, { 
 	     type    : "charcounter",
 	     rows	: 5,
 	     cols	: 100,
 	     cancel    : "Cancel",
 	     submit  : "OK",
		 charcounter: {
			characters : 100
		 }
 	 });
	 });
</script>
</head>
<body>
<p class="editText" name="respText" id="respText" title="click to edit">TEST TEST TEST</p>
</body>

Open in new window


HTH
Rainer
0
 

Author Comment

by:kcmovies
ID: 38814886
Thank you Rainer.

I am getting below error. Am i using old jscript version ? Please take a look.
type    : "charcounter"  is also like textarea ?


I am

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.3; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; MS-RTC LM 8)
Timestamp: Thu, 24 Jan 2013 16:16:02 UTC

Message: '$.editable.types[...].plugin' is null or not an object
Line: 5
Char: 74
Code: 0
URI: http://localhost:10039/work_war/js/jquery.jeditable.mini.js
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38814990
Hi,
yes, it is a textarea - see the screenshot of my short html sample page (from the above posted code)

HTML Sample
Can you confirm that you have referenced all files:
- Jquery
- jquery.charcounter.js
- jquery.jeditable.mini.js
- jquery.jeditable.charcounter.js
and that all files have been loaded?

HTH
Rainer
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38815008
Hi,

Yeah! @Rainer sample is working fine! I think some you have missed some files!

Try adding the files as it is -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/js/jquery.charcounter.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js"></script>

Open in new window


Make sure you have internet connection! Since all are pointing to their respective sites!

Hope it helps u...
0
 

Author Comment

by:kcmovies
ID: 38815024
Sorry, i missed jquery.charcounter.js and jquery.jeditable.charcounter.js files. Let me add and try.
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38815064
Hi,

It will work fine. I tried myself :)

@Rainer Good Stuff!!!
0
 

Author Comment

by:kcmovies
ID: 38815132
If you don't mind can you please send below files (or location to get these files), i've older version of "jquery.jeditable.mini.js" file, which do not have charcounter stuff.

- Jquery
- jquery.charcounter.js
- jquery.jeditable.mini.js
- jquery.jeditable.charcounter.js
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38815155
Hi,

Did your machine not connected to Internet?
0
 
LVL 23

Assisted Solution

by:Roopesh Reddy
Roopesh Reddy earned 100 total points
ID: 38815177
0
 

Author Comment

by:kcmovies
ID: 38815738
Thank you for sending links. I was asked to use same files you used for compatibility.

But still no luck. I am below getting error in jquery.jeditable.mini.js, i am not sure how to resolve this.  Please take a look ?

Mozilla(Firebug) error:$.editable.types[settings.type] is undefined
http://localhost:10039/work_war/js/jquery.jeditable.mini.js
Line 5

Chrome error:
jquery.jeditable.mini.js:5Uncaught TypeError: Cannot read property 'plugin' of undefined
var settings=$.extend({},$.fn.editable.defaults,{target:target},options);var plugin=$.editable.types[settings.type].plugin||function(){};var submit=$.editable.types[settings.type].submit||function(){};var buttons=$.editable.types[settings.type].buttons||$.editable.types['defaults'].buttons;var content=$.editable.types[settings.type].content||$.editable.types['defaults'].content;var element=$.editable.types[settings.type].element||$.editable.types['defaults'].element;var reset=$.editable.types[settings.type].reset||$.editable.types['defaults'].reset;var callback=settings.callback||function(){};var onedit=settings.onedit||function(){};var onsubmit=settings.onsubmit||function(){};var onreset=settings.onreset||function(){};var onerror=settings.onerror||reset;if(settings.tooltip){$(this).attr('title',settings.tooltip);}
0
 

Author Comment

by:kcmovies
ID: 38815775
Please find some more error details

Uncaught TypeError: Cannot read property 'plugin' of undefined
$.fn.editable                                 jquery.jeditable.mini.js:5
(anonymous function)                   generateresponse.js:51 (This line editable function in my js file)
f.extend._Deferred.e.resolveWith                jquery.js:2
f.e.extend.ready                                           jquery.js:2
f.c.addEventListener.C                                  jquery.js:2
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38816207
Hi,
did you reference multiple different versions of jQuery?
Attached a ZIP file containing the sample page and all used scripts.
Just extract to any folder and open the html file with e.g. FireFox.
If this is working, try to load it from your web application.

HTH
Rainer
jqeditablesample.zip
0
 

Author Closing Comment

by:kcmovies
ID: 38816506
Thank you Rainer and roopeshreddy. Your sample worked fine.
But somehow when i use these files in my web app, it is giving same error i specified above. Looks like existing jquery files in my web app are not compatable with your files.
These are my files, looks like lower versions.
jquery-ui-1.8.17.custom.js
jquery.dataTables.js
jquery.js (v1.6.3)
jquery.tipsy.js
jquery.ui.selectmenu.js
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

705 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