CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

get variable from a jQuery Plugin

I need to know how is possible to get a plugin variable outside the plugin, to test it with some test framework.

So this is my simplified plugin:

(function ($) {
    $.fn.extend({      
        myPlugin: function (argumentOptions) {
            var defaults = {
                image: 'img/default.png',
            };

            this.textSend = '';

            var options = $.extend(defaults, argumentOptions);
            var globalHere = this;

            return this.each(function () {
                obj.mouseup(function(e) {
                    globalHere.textSend = 'test';
                });
            });
        }
    });     
})(jQuery);

I need to the variable this.textSend outside the plugin.

I have tried in this way:

$(document).ready(function(){

  var testfield = $('.txt');

  testfield.myPlugin({
      image:"../img/twitter.png"
  });

  testfield.focus();
  testfield.trigger($.Event( "mouseup"));
  console.log($.fn.myPlugin.textSend);
});

but the console.log return me undefined

How can i get that variable outside?

Thanks

Upvotes: 1

Views: 1336

Answers (3)

Tomanow
Tomanow

Reputation: 7357

You will want to make sure you are returning this like so:

(function($) {
  $.fn.extend({
    myPlugin: function(argumentOptions) {
      var self = this;
      
      self.textSend = 'something';
      self.inc = 0;
      
      self.mouseup(function(e) {
        self.textSend = 'new thing #' + self.inc;
        self.inc++;
      });

      return self;
    }
  });
})(jQuery);

var instantiated = $('button').myPlugin({});
$('input').val(instantiated.textSend);

$('button').click(function(e) {
  $('input').val(instantiated.textSend);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Current textSend:</label>
<input />
<br/>
<button>Change textSend</button>

Hopefully will get you on the right track.

Update Try new code.

Upvotes: 1

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

At line console.log($.fn.myPlugin.textSend);

use testfield.textSend . now it has become proprty of selector via myplugin.

Upvotes: 0

Thiago Duarte
Thiago Duarte

Reputation: 941

You can store it inside the closed scope you created around your plugin and expose it through another function. Of course it'll need some refactoring, but this is the general idea:

(function ($) {
    var whateverNameYouWant; //here

    $.fn.extend({      
        myPlugin: function (argumentOptions) {
            var defaults = {
                image: 'img/default.png',
            };

            this.textSend = '';
            whateverNameYouWant = this.textSend; //here

            var options = $.extend(defaults, argumentOptions);
            var globalHere = this;

            return this.each(function () {
                obj.mouseup(function(e) {
                    globalHere.textSend = 'test';
                    whateverNameYouWant = this.textSend; //here
                });
            });
        }
    });     

    $.extend({
        getWhateverNameYouWant: function() {
            return whateverNameYouWant;
        }
    })
})(jQuery);



var value = $.getWhateverNameYouWant();

Upvotes: 1

Related Questions