Home/ Questions/Q 6863495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:47:23+00:00

How is it possible to give a jquery-plugin individual local variables, that are accessable

  • 0

How is it possible to give a jquery-plugin individual local variables, that are accessable in different plugin-functions?

My script shows an alert with the content ‘123’, but I am expecting ‘abc’. So variable ‘t’ exists only once and not twice for each plugin. So for each plugin-instance there should be also an instance of variable ‘t’.

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        var t = null;
        $.fn.doSomething = function()
        {
            alert(t);
        }
        $.fn.myHtmlControl = function(option) {
            t = option;
        }
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl("abc");
        $('#ctrl2').myHtmlControl("123");            
        $('#ctrl1').doSomething();
    })        
</script>

</head>
    <body>
        <div id='ctrl1'>Ctrl1</div>
        <div id='ctrl2'>Ctrl2</div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The usual way to do this is to use the data function to store your information related to a specific element on the element itself. So in your case (live example):

    (function ($) {
    $.fn.doSomething = function()
    {
        alert(this.data("myHtmlControl"));
    }
    $.fn.myHtmlControl = function(option) {
        this.data("myHtmlControl", option);
    }
})(jQuery);

    If you need to store multiple options, here’s a more robust example (live copy):

    (function ($) {
    var defaults = {
        msg1: "(msg1)",
        msg2: "(msg2)"
    };

    $.fn.doSomething1 = function()
    {
        alert(getOption(this, "msg1"));
        return this;
    }
    $.fn.doSomething2 = function()
    {
        alert(getOption(this, "msg2"));
        return this;
    }

    $.fn.myHtmlControl = function(options) {
        this.data("myHtmlControl", $.extend({}, defaults, options));
        return this;
    };

    function getOption(inst, name) {
        var obj = inst.data("myHtmlControl");
        return (obj || defaults)[name];
    }

    function setOption(inst, name, value) {
        var obj = inst.data("myHtmlControl");
        if (!obj) {
            obj = $.extend({}, defaults);
            inst.data("myHtmlControl", obj);
        }
        obj[name] = value;
    }
})(jQuery);
jQuery(function($) {

    $("#theButton").click(function() {
        $('#ctrl1').myHtmlControl({msg1: "abc"});
        $('#ctrl2').myHtmlControl({msg2: "123"});
        alert("about to do ctrl1");
        $('#ctrl1').doSomething1().doSomething2();
        alert("about to do ctrl2");
        $('#ctrl2').doSomething1().doSomething2();
    });

});
    • 0