JSFiddle - React, Tailwind, and code Playground

by vikrant singh

HTML

<div class="sidebar"></div>
<div class="sidebar"></div>
<div class="sidebar"></div>
<div class="sidebar"></div>
<div class="sidebar"></div>

CSS

.wrapper {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

JavaScript

$(document).ready(function () {
    $.fn.MyPlugin = function (options) {
        var $elem=this;
        var init = function () {
            options.load = $.extend({}, $.fn.MyPlugin.defaultOptions.load, options.load);
            load();
        }
        var load = function () {
            if (!options.load.url) {
                alert("url can not be empty");
            } else {
                $.ajax({
                    url: options.load.url,
                    type: options.load.type,                    
                    data: options.load.data,
                    success: function (response) {
                        options.load.success.call(this, response);
                        $elem.html(response).wrapInner('<div class="wrapper"/>');
                    },
                    error : function (jqXHR, textStatus, errorThrown) {
                        alert("error occured" + textStatus + " ," + errorThrown)
                    }
                })
            }
        }
        init();
    }
    $.fn.MyPlugin.defaultOptions = {
        load: {
            tye: "get",
            data: {},
            success: function () {}
        }
    };


    var $sidebar = $('.sidebar');
    $sidebar.MyPlugin({
        load: {
            url: 'http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/'
        }
    });
});