You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

dynamically generated accordion tab clicks do not work. Please help. Created Jan 24, 2010

This thread is solved

Views: 2067     Replies: 3     Last reply Apr 26, 2010  
You must login first before you can use this feature

innopeak2000

Posts: 3

Registered:
Jan 24, 2010

dynamically generated accordion tab clicks do not work. Please help.

Posted: Jan 24, 2010

Dear Forum Members,

The demo code of accordion works well. Let us say, the accordion is loaded in a div#foo. If I programmatically generate the same code for the accordion control through ajax and replace the html content of div#foo, the accordion renders correctly. But, I cannot click on the tab (on the generated accordion control) and no accordion action is shown.

I am not able to understand this. Please help.

Is there a way to destroy the old accordion and reinstantiate a new one for the generated content?

Cheers,
Innopeak

innopeak2000

Posts: 3

Registered:
Jan 24, 2010

A reproducible case for this problem.

Posted: Jan 25, 2010

Reply to: dynamically generated accordion tab clicks do not work. Please help., from innopeak2000
First time around, the accordion works. When you click on the change button, accordions html content is swapped with new one. After that accordion does not work.

Obviously, for the newly added elements the events are not setup. I read that 'live' should be used for situations like that. But, I do not know what is the correct syntax for setting it up specially for the accordion tabs plugin.

The plugin is enabled when the document is ready like:
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null });

How to introduce the .live syntax into it?
$("#accordion").live('click' ...?????

Any help is greatly apprecited!

<head>
<script src=http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href=http://static.flowplayer.org/tools/css/tabs-accordion.css"/>
<div id ="container">
<div id="accordion">
<h2 class="current">First pane</h2>
<div class="pane" style="display:block">
<p>One</p>
</div>
<h2>Second pane</h2>
<div class="pane">
<p>Two </p>
</div>
<h2>Third pane</h2>
<div class="pane">
<p>Three</p>
</div>
</div>

</div>
<input id ="change" type="button" value="change">
<!-- activate tabs with JavaScript -->
<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null });
});

$("#change").click (function () { alert("clicked"); $("#accordion").html(
" <h2 class="current">First pane</h2> <div class="pane" style="display:block" > <p>Four</p> </div> <h2>Second pane</h2> <div class="pane"> <p>Five</p> </div> <h2>Third pane</h2> <div class="pane"> <p>Six</p> </div> ");
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null });
});
</script>
</body>

glennfu

Posts: 3

Registered:
Mar 15, 2010

» A reproducible case for this problem.

Posted: Mar 17, 2010

Reply to: A reproducible case for this problem., from innopeak2000
I actually had this need today. I dug in and managed to get it to work for me. I put a diff up here:

http://pastie.org/874287

Basically, instead of calling
$("#selector_one").tabs("#selector_two > div");

I now call:
$("#selector_one").tabs("#selector_two > div", {live: true});

It shouldn't break any old functionality... but I definitely don't guarantee I didn't break some other related feature when live: true is turned on.

As a final remaining bug, I still had to manually call .show() on the active pane after new content was reloaded. Simply firing an extra .click() on the tab didn't do the trick. However that was close enough for me! I hope this helps you, and more importantly, I hope this helps the devs implement it themselves in a less-hacky way for us in the near future.

huedrant

Posts: 8

Registered:
Jan 25, 2010

» » A reproducible case for this problem.

Posted: Apr 26, 2010

Reply to: » A reproducible case for this problem., from glennfu
the standard tabs behaviour seems affected by this, too.

I get my tabs, but the style attribute remains "display:none" in the second tab (I'm using slideshow instead of accordion), no idea why.

what is "live:true" used for? and how can I call .show() on my panes? any hint very much appreciated..

btw: I dont think the devs/admins are reading this.. :(

•