CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
ctrlmaniac
ctrlmaniac

Reputation: 444

Dynamically added elements don't wrap

In my plug-in I need to wrapp all sidebar's children in a div to let them overflow but if those elements are loaded dynamically the function does not work and I don't know either how to make it work.

The code is:

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

var $sidebar = $( '.sidebar' );

$sidebar.load( 'external-page.ext' );

$sidebar.MyPlugin();

$.fn.MyPlugin = function() {
    this.wrapInner( '<div />' );
});

If those elements are not loaded dynamically there is no problem.

Firstly the code was:

$sidebar.wrapInner( '<div/>' );

and this just works fine if elemens are not loaded dynamically, so I tried this way:

var children = $sidebar.children();

$( document ).on( 'load', children, function() {
    $( this ).wrapAll( '<div />' );
});

but, of course it does not work. Can you please help me?

I thought that this rule would have worked this time too but it didn't. What did I mistake?

You can find the whole code here. And a demo here

MORE DETAILS

I want to handle this issue from the inside, not from the outside! I don't know if users will load content dinamically or not. that's the point. So there is a way to handle this issue inside the plugin and not outside?

Upvotes: 1

Views: 399

Answers (3)

guest271314
guest271314

Reputation: 1

Try adding adding below piece to plugin . Added at lines 84 - 110 at gist . 

            var target = $sidebar.get(0);

            // create an observer instance
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    // do stuff when
                    // `childList` modified
                    // i.e.g., 
                    $.each(mutation.addedNodes, function (k, v) {
                        $(v)
                        .wrapInner('<div data-' 
                        + dataName 
                        + '="sub-wrapper"></div>')
                    })

                });
            });

            // configuration of the observer:
            var _config = {
                childList: true
            };

            // pass in the target node, as well as the observer options
            observer.observe(target, _config);

jsfiddle http://jsfiddle.net/guest271314/s5wzptc8/

See MutationObserver

Upvotes: 0

vikrant singh
vikrant singh

Reputation: 2111

$.load() makes an ajax call to load the data ,

So there is a possibility that your this.wrapInner( '<div />' ) method has invoked before any data is loaded inside the div.sidebar. Make sure this.wrapInner( '<div />' ) is called after all data has been loaded successfully using the complete callback.

$.load() trigger callback for each div ,call your plugin from callback

$sidebar.load('http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/', function () {
            $(this).MyPlugin();
        }    
    });

DEMO

OR

If you are using $.load() only to load inside multiple elements then you could probably use one of the more powerful jQuery ajax methods (i.e., get() or post() or ajax()). 

$.get('http://fiddle.jshell.net/vikrant47/ncagab2y/1/show/', {}, function(data) {
        $sidebar.html(data).MyPlugin();
    });

DEMO using $.get() Method


UPDATE-

Answer to the comment-

You should not have to worry about weather user gonna call your plugin like this $sidebar.load(...).MyPlugin().User must be aware enough about how to handle asynchronous methods.

You can not make your plugin work until there is some data inside div.slider but ,you can add ajax loading functionality inside your plugin like -

$(document).ready(function () {
    $.fn.MyPlugin = function (options) {
        var $elem=this;
        var init = function () {
            options.load = $.extend({}, $.fn.MyPlugin.defaultOptions.load, options.load);
            load();
        }
       //adding load method to load data dynamically
        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"/>');//wrap after data has been loaded successfully
                    },
                    error : function (jqXHR, textStatus, errorThrown) {
                        alert("error occured" + textStatus + " ," + errorThrown)
                    }
                })
            }
        }
        init();
    }
    $.fn.MyPlugin.defaultOptions = {
        load: {
            tye: "get",
            data: {},
            success: function () {}
        }
    };

Now use your plugin like- 

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

DEMO with load

Upvotes: 0

Shaheer
Shaheer

Reputation: 2157

From the manual

http://api.jquery.com/load/

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

Try the following code and see if this works:

$sidebar.load( 'external-page.ext', function() { $sidebar.MyPlugin(); } );

Thanks.

Upvotes: 2

Related Questions