Owlcarousel2: cant add dynamic item to slider

[red-batmen]

hi. I'm trying to add a slider, but it causes an error. code:

    html = content;
    carouselTire.trigger('add.owl.carousel', html).trigger('refresh.owl.carousel');
error: Uncaught TypeError: undefined is not a function 
line:
    this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);

Please help

[joeyjoejoejr]

My guess is that content variable is undefined there. Make sure it's a element.

[red-batmen]

no no. content is present:
html = 'wrap div tag.. model.id, model.fields... wrap /div tag ';
carouselTire.trigger('add.owl.carousel', html).trigger('refresh.owl.carousel');
error: Uncaught TypeError: undefined is not a function
line:
this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);

[joeyjoejoejr]

Ok this is probably caused by the jQuery version you are using. andSelf is deprecated and removed in jQuery 2. You should try running on jQuery 1.x rather than jQuery 2.

We will be working to update the library for jQuery 2 support soon.

[red-batmen]

Yes, exactly. thank you very much. I expect updates

[joeyjoejoejr]

See this pull request: #648

We'll be looking at merging it ASAP.

[mobula]

I'm having the same issue (with jQuery 2.1.3), but doesn't seem to work with jquery 1.8.3 either?
http://jsfiddle.net/n__o/vnpm1y06/1/

[zitscher]

I've managed to fix it by preparing the content before adding it

    Owl.prototype.add = function(content, position) {
        // prepare content
        content = this.prepare(content);
        position = position === undefined ? this._items.length : this.normalize(position, true);

        this.trigger('add', { content: content, position: position });

        if (this._items.length === 0 || position === this._items.length) {
            this.$stage.append(content);
            this._items.push(content);
            this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
        } else {
            this._items[position].before(content);
            this._items.splice(position, 0, content);
            this._mergers.splice(position, 0, content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
        }

        this.invalidate('items');

        this.trigger('added', { content: content, position: position });
    };

[mufasser]

I testing new owl carousel before using in my Project but getting error:

TypeError: content.find is not a function
this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('da...

and using 1.x jquery version as you mention

`

1

2

3

Insert

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="owl.carousel/owl.carousel.js" type="text/javascript"></script>
    <script>
        var owl;
        $(function () {
            owl = jQuery(".owl-carousel");
            owl.owlCarousel({
                items: 5,
                nav: true,
                infiniti: true,
                margin: 10,
                dots: true,
                navClass: ['btn btn-default', 'btn btn-default'],
                navText: ['<span title=\"Previous\">&lt;</span>', '<span title=\"Next\">&gt;</span>']
            });

        });

        //insert 
        function add() {
             var html = '<div class="item">foo</div>';
            jQuery(".owl-carousel").trigger('add.owl.carousel', html).trigger('refresh.owl.carousel')

        }
    </script>
</body>`

[Vahn84]

adding this

    content = this.prepare(content);

at the very beginning of the add function solved my issue

thanks zitscher