Add elements dynamically

[andresarslanian]

Hi... I was trying your plugin and it's great!

But, I wanted to add items dynamically to the list and as it is, it didn't work for me. For that, I had to do some modifications to your code that I would like to share with you for your review.

Basically, each time I add a new li element to the ul, I "initialize" the plugin by calling

$("#tinderslide").jTinder(options);

But that didn't work.

So what I ddid was:
in jquery.jTinder.js I added to the Plugin.prototype the following method:

        bindNew: function(element){
            panes = $(">ul>li", element);
            pane_count = panes.length;
            current_pane = panes.length - 1;
        },

I believe that this updates the courrent_pane counter since new elements have been added to the list.

Besides that modification, I also changed the invocation to call that function:

    $.fn[ pluginName ] = function (options) {
        this.each(function () {
            /************ BEFORE
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            } *******END OF PREVIOUS CODE****/

            /**** NEW CODE *****/
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
            else {
                $.data(this, "plugin_" + pluginName).bindNew(this);
            }   /**** END OF NEW CODE *****/        

        });

        return this;
    };

Like this I had the plugin working with dynamic items added to the list. And each time a item is added to the list I just invoke:

$("#tinderslide").jTinder(options);

I hope it helps!

[ssoulless]

Thanks this was useful

[igordelorenzi]

@andresarslanian, thank you so much! Your workaround was useful to me too. If I were the maintainer, I would include your snippet.

[mschoenebeck]

@andresarslanian thank you for sharing! I tried your changes but somehow it doesn't work here. Could you provide a working example and upload as a tar ball or something? I think the Problem is in my code when I add new items to the list. I just add new <li>-Elements to the innerhtml of the <ul>-tags.. I do that in the onLike callback function.. it seems like this leads to errors with your code. I would really appreciate a working example with code that adds cards dynamically. thank you!

[hirbod]

Hello everybody,

did someone manage how to add elements dynamically? I'm also trying to add li elements, but It just won't work out

[nilthacker]

@andresarslanian Thank you for this! The author should integrate this into the plugin.

[gabrielalberione]

Thank yo for this!!! You are a genius!!!, hahaha... Thank you a lot...

[canadaka]

This seems to work for swiping items, but using the action buttons it does not?

[canadaka]

To get the action buttons to work you must add back these lines to the modified code

else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            }

[leotaozeng]

@canadaka Thank you so much

[pnbt]

Awesome, thanks!

[josef1708]

can i have an example of these...didnt work for me.. pls:D

[boehser]

Also the same like josef. An example would be nice!

[mig1098]

Thanks for advice, work fine...

[bydbest]

Can anyone share the working example with dynamic image from server on swipe ?

[rafaelmrdyn]

apri axpers

[1ghost1]

Heyo, if anyone still cares for the code worked.

I had an issue however(my own mistake) that I was adding to the div and not

element, make sure you add to UL and then call $(<container_not_ul_ITS_IMPORTANT>).jTinder();