Multiple uses on 1 page

[jefferose]

I have a page with 3 tabs and 2 of the tabs would ideally use hColumns.

Right now, despite having different IDs (eg: #skills, #colors), once the page finishes loading, all of the columns are ending up in the 2 second instance.

Both are initiated from separate JS calls and return different data from each other.

Has anyone got suggestions?

[bu]

hmmm, this sounds weird. is there any minimal possible example that we can try out?

[jefferose]

Thanks for taking the time to reply bu, I appreciate it.

Unfortunately no. It's being used on an internal site for development and isn't public.

I've added the minimal code this gist, but can expand it a bit if needed: https://gist.github.com/jefferose/cd17729b604037ae181f

The screenshot shows 3 tabs and the hColumns should be on the 2nd and 3rd. The 2nd is showing an empty box right now, and the third tab (open) shows the "Skill" list from the second tab and the city list from the third at the same time.

[jefferose]

Any thoughts on this? Any new information you'd like me to provide? I may be able to rig something public if it's really needed.

[ghost]

@jefferose @bu I've been playing around with multiple instances of hColumns too, without much luck. Have either of you put any more thought into this issue over the last month?

[jefferose]

Unfortunately not @bu I've worked on other projects and moved on to another solution for now.

[dorxy]

For anyone who still has this issue, I solved mine using the following bit of code after initialisation:

$('li', $('.your-containing-selector')).click(function() {
    var $container             = $(this).closest('.your-containing-selector');
    var hColumnData            = $container.data('hColumn');
    hColumnData.container_node = $container.get(0);
    $container.data('hColumn', hColumnData);
});