CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mithun Debnath
Mithun Debnath

Reputation: 588

how to use document.getElementById in jquery plug in so that it can take the id of the object which is using the plugin currently

I am working on a jQuery plugin. I need to use document.getElementById('somid');The code is working if I use some id(suppose id of a particular text area). But as its a plugin I can not give an specific id because the plug in should be made like that it(the plug in) should work with any text area with which it is connected. My html

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.myplugin.js"></script>
</head>
<body>
<textarea name="source" id="src1" cols="150" rows="20" class="calling"></textarea>
<textarea name="source" id="src2" cols="150" rows="20" class="calling"></textarea>
</body>

my jquery.myplugin.js plugin

$(document).ready(function(){
$('.calling').keyup(function(e) {
$(this).requiredMethod(e.keyCode);
});});

 //My plugin

(function($) {


$.fn.requiredMethod = function(keyCode) {
      return this.each(function() { 

        var $this = $(this); 
        var previndex = 0;      
        var ctl = document.getElementById('src1'); //This is where the problem is
        var endPos = ctl.selectionEnd-1;
        var str = $this.val();

        //My code goes here where i use previndex,endPos ans str

        });

    };

})(jQuery);

My plug in is working for text area with id="src1". But this plugin should work with all text areas with class="calling". So what should be the code to do so ,so that I can get the var endPos = ctl.selectionEnd-1; for the text area I am working currently? I used the code var ctl = document.getElementByClassName('reverie'); but its not working. If anyone have not understand the problem please let me know,I will try to explain in more detail.

Upvotes: 0

Views: 561

Answers (3)

Vipin
Vipin

Reputation: 877

You can achieve this by using document.getElementById

$(document).ready(function(){
$('.calling').keyup(function(e) {
$(this).requiredMethod(e.keyCode);
});});

 //My plugin

    (function ($) {


        $.fn.requiredMethod = function (keyCode) {
            return this.each(function () {
                var $this = $(this);
                var previndex = 0;
                var ctl = document.getElementById($this.attr("id"));
                var endPos = ctl.selectionEnd-1;
                var str =ctl.value;
                //My code goes here where i use previndex,endPos ans str

            });

        };

    })(jQuery);

Upvotes: 1

soundhiraraj
soundhiraraj

Reputation: 323

Try this,

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.myplugin.js"></script>
</head>
<body>
<textarea name="source" id="src1" cols="150" rows="20" class="calling"></textarea>
<textarea name="source" id="src2" cols="150" rows="20" class="calling"></textarea>
</body>
$(document).ready(function(){
$('.calling').keyup(function(e) {
$(this).requiredMethod(e.keyCode);
});});

 //My plugin

(function($) {


$.fn.requiredMethod = function(keyCode) {
      return this.each(function() { 

        var $this = $(this); 
        var previndex = 0;      
        var ctl = this; //This is where the problem is
        var endPos = ctl.selectionEnd-1;
        var str = $this.val();

        //My code goes here where i use previndex,endPos ans str

        });

    };

})(jQuery);

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

There is no need to use id here. this inside the each handler refer to the current dom element so you can either use this instead of ctl or can assign this to ctl like var ctl = this

(function ($) {


    $.fn.requiredMethod = function (keyCode) {
        return this.each(function () {
            var $this = $(this);
            var previndex = 0;
            var ctl = this //This is where the problem is
            var endPos = ctl.selectionEnd - 1;
            var str = $this.val();
            //My code goes here where i use previndex,endPos ans str

        });

    };

})(jQuery);

Upvotes: 3

Related Questions