jTinder
jTinder copied to clipboard
Add elements dynamically
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!
Thanks this was useful
@andresarslanian, thank you so much! Your workaround was useful to me too. If I were the maintainer, I would include your snippet.
@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!
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
@andresarslanian Thank you for this! The author should integrate this into the plugin.
Thank yo for this!!! You are a genius!!!, hahaha... Thank you a lot...
This seems to work for swiping items, but using the action buttons it does not?
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]();
}
@canadaka Thank you so much
Awesome, thanks!
can i have an example of these...didnt work for me.. pls:D
Also the same like josef. An example would be nice!
Thanks for advice, work fine...
Can anyone share the working example with dynamic image from server on swipe ?
apri axpers
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();