Krixnaa Shrestha Krixnaa Shrestha - 2 months ago 10
jQuery Question

How to convert simple jQuery code to wordpress jQuery of the following code

<b id="smsCount"></b> SMS (<b id="smsLength"></b>) Characters left
<br /><textarea id="smsText" style="width:400px;height:200px">
</textarea>


//Plugin
(function($){
jQuery.fn.smsArea = function(options){

var
e = this,
cutStrLength = 0,

s = jQuery.extend({

cut: true,
maxSmsNum: 3,
interval: 400,

counters: {
message: jQuery('#smsCount'),
character: jQuery('#smsLength')
},

lengths: {
ascii: [160, 306, 459],
unicode: [70, 134, 201]
}
}, options);


e.keyup(function(){

clearTimeout(this.timeout);
this.timeout = setTimeout(function(){

var
smsType,
smsLength = 0,
smsCount = -1,
charsLeft = 0,
text = e.val(),
isUnicode = false;

for(var charPos = 0; charPos < text.length; charPos++){
switch(text[charPos]){
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;

default:
smsLength += 1;
}

//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if(text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}

if(isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;

for(var sCount = 0; sCount < s.maxSmsNum; sCount++){

cutStrLength = smsType[sCount];
if(smsLength <= smsType[sCount]){

smsCount = sCount + 1;
charsLeft = smsType[sCount] - smsLength;
break
}
}

if(s.cut) e.val(text.substring(0, cutStrLength));
smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0);

s.counters.message.html(smsCount);
s.counters.character.html(charsLeft);

}, s.interval)
}).keyup()
}}(jQuery));


//Start
jQuery(function(){
jQuery('#smsText').smsArea({maxSmsNum:3});
});


I am working in Wordpress, M going to make some smscount system that counts ASCII and Unicode character.I saw somewhere that Wordpress take jQuery instead of $. But it is not working. Dnt knw whr I make mistake?

Any help is appreciated.

Answer

Change...

jQuery(function(){
 jQuery('#smsText').smsArea({maxSmsNum:3});
});

... into...

(function($){
  $(document).on('ready', function(){
    $('#smsText').smsArea({maxSmsNum:e})
  })
})(jQuery);

If the element with id="smsText" exists in DOM and the script defining smsArea() function is ready/loaded at the time you are running the one above, you can remove the document.ready wrapper (remove lines 2 and 4 - without removing 3!).

However, the key in the syntax above is not the document.ready wrapper, but the one around it. the "jQuery wrapper". You need to create a closure and pass jQuery as reference to it. This is the standard "jQuery wrapper for WordPress", because at very rare times WP needs to have different versions of jQuery running on the same page (depending on what plugins/themes you load).

If you look at the function just above yours, it's wrapped in the same way.

A more detailed explanation here.