jQuery Plugin - update element after initialization

Question

How can i pass a new value to public method updateText to update the content inside the element?

Currently when i pass a new string to updateText method upon clicking the button i get only method name as an argument and not the passed string.

(function ($) {

    var pluginName = 'testPlugin';
    var defaults = {
        elementText: 'Default element text',
        elementColor: '#fff'
    };

    function Test (element, options) {
        this.options = $.extend({}, defaults, options);
        this.$element = $(element);

        if (this[options]) {
            return this[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            return this.init.apply(this, arguments);
        }
    }

    // Main methods
    Test.prototype = {
        init: function () {
            this.$element.text(this.options.elementText);
            this.$element.css('color', this.options.elementColor);
        },

        updateText: function (newText) {
            this.$element.text(newText);
        }
    };

    // Create new instances
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            $.data(this, 'plugin_' + pluginName, new Test(this, options));
        });
    }

    // Init
    $('.d-1').testPlugin({
        elementText: 'First element',
        elementColor: 'red'
    })
    $('.d-2').testPlugin({
        elementText: 'Second element',
        elementColor: 'green'
    })
    $('.d-3').testPlugin({
        elementText: 'Third element',
        elementColor: 'blue'
    })

    $('#textChanger').on('click', function() {
        $('.d-3').testPlugin('updateText', 'Third element updated text')
    })

})(jQuery);

body {
  font-family: Arial, Helvetica, sans-serif;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d-1"></div>
<div class="d-2"></div>
<div class="d-3"></div>
<button id="textChanger">Change text for 3rd element</button>

samuellawrentz · Accepted Answer · 2018-07-21 17:36:47Z

Your plugin is encapsulated inside the data object of the element. In order to access its method, you must call the plugin from the data object and then use it.

This line in your code is the reason for encapsulation of the plugin with a plugin-name into the data object of an element on which the plugin was initialized.

$.data(this, 'plugin_' + pluginName, new Test(this, options));

Note that your plugin name is plugin_testPlugin

(function ($) {

    var pluginName = 'testPlugin';
    var defaults = {
        elementText: 'Default element text',
        elementColor: '#fff'
    };

    function Test (element, options) {
        this.options = $.extend({}, defaults, options);
        this.$element = $(element);

        if (this[options]) {
            return this[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            return this.init.apply(this, arguments);
        }
    }

    // Main methods
    Test.prototype = {
        init: function () {
            this.$element.text(this.options.elementText);
            this.$element.css('color', this.options.elementColor);
        },

        updateText: function (newText) {
            this.$element.text(newText);
        }
    };

    // Create new instances
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            $.data(this, 'plugin_' + pluginName, new Test(this, options));
        });
    }

    // Init
    $('.d-1').testPlugin({
        elementText: 'First element',
        elementColor: 'red'
    })
    $('.d-2').testPlugin({
        elementText: 'Second element',
        elementColor: 'green'
    })
    $('.d-3').testPlugin({
        elementText: 'Third element',
        elementColor: 'blue'
    })

    $('#textChanger').on('click', function() {
        var d3 = $('.d-3').data('plugin_testPlugin');
d3.updateText('Hi There Im updated');

    })

})(jQuery);

body {
  font-family: Arial, Helvetica, sans-serif;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d-1"></div>
<div class="d-2"></div>
<div class="d-3"></div>
<button id="textChanger">Change text for 3rd element</button>

Collectives™ on Stack Overflow

jQuery Plugin - update element after initialization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related