Menu icon Foundation
Accordion content generated via Ajax - now accordion doesn't work

Hey folks, it's been a while! 

I'm generating dynamic content for an accordion using a jQuery ajax event, but the accordion doesn't work after the content is loaded. I'm familiar with using "on('action',function())" but I'm not sure how to go about "attaching" that to the accordion script itself.

For what it's worth: I have a <div id="posts"></div>. Here's the jQuery:

jQuery.get(feedurl)
	.done(function (posts) {

		var postlist = '<ul class="accordion" data-accordion data-allow-all-closed="true">';
		jQuery.each(posts, function(index, post) {

			postlist+= '<li class="accordion-item" data-accordion-item><a class="accordion-title" href="#">'+post.title['rendered']+'</a>';
			postlist+= '<div class="accordion-content" data-tab-content>';
			postlist+= '<h3>'+post.title['rendered']+'</h3><div>'+post.content['rendered']+'</div>';
			postlist+= '</div>';
			postlist+= '</li>';

		});
		postlist+='</ul>';
		jQuery('#posts').html(postlist);
});

And when you click on an accordion item, it doesn't expand. And I get why. Just not sure how to make Foundation's accordion play nice-nice with this.

Thanks!

(This is a WordPress theme I'm working on, btw.)

UPDATE 1/9/17: I updated Foundation to v6.3.0, and jQuery to 3.1.1. That got rid of the error -- BUT -- now the accordion doesn't work again, even with the ajaxComplete() function. So I'm back to square one. Any assistance at all would be greatly appreciated...

UPDATE #2 - 1/9/17: I changed `$( this ).foundation( 'accordion', 'reflow' );` to `$(this).foundation();` in the ajaxComplete() function and that seems to have worked... for now... stay tuned!

accordionjqueryAJAX

Hey folks, it's been a while! 

I'm generating dynamic content for an accordion using a jQuery ajax event, but the accordion doesn't work after the content is loaded. I'm familiar with using "on('action',function())" but I'm not sure how to go about "attaching" that to the accordion script itself.

For what it's worth: I have a <div id="posts"></div>. Here's the jQuery:

jQuery.get(feedurl)
	.done(function (posts) {

		var postlist = '<ul class="accordion" data-accordion data-allow-all-closed="true">';
		jQuery.each(posts, function(index, post) {

			postlist+= '<li class="accordion-item" data-accordion-item><a class="accordion-title" href="#">'+post.title['rendered']+'</a>';
			postlist+= '<div class="accordion-content" data-tab-content>';
			postlist+= '<h3>'+post.title['rendered']+'</h3><div>'+post.content['rendered']+'</div>';
			postlist+= '</div>';
			postlist+= '</li>';

		});
		postlist+='</ul>';
		jQuery('#posts').html(postlist);
});

And when you click on an accordion item, it doesn't expand. And I get why. Just not sure how to make Foundation's accordion play nice-nice with this.

Thanks!

(This is a WordPress theme I'm working on, btw.)

UPDATE 1/9/17: I updated Foundation to v6.3.0, and jQuery to 3.1.1. That got rid of the error -- BUT -- now the accordion doesn't work again, even with the ajaxComplete() function. So I'm back to square one. Any assistance at all would be greatly appreciated...

UPDATE #2 - 1/9/17: I changed `$( this ).foundation( 'accordion', 'reflow' );` to `$(this).foundation();` in the ajaxComplete() function and that seems to have worked... for now... stay tuned!

This post has been closed. No new replies can be added.

Bob Sawyer over 2 years ago

After digging around I found this on another post re: Equalizer not working with Ajax-generated content, and tried:

jQuery( document ).ajaxComplete( function() {
	jQuery( this ).foundation( 'accordion', 'reflow' );
});

With no luck. And then I checked the Console:

foundation.min.js?ver=6.2.3:1 Uncaught ReferenceError: We're sorry, 'accordion' is not an available method for this element.
    at a.fn.init.a [as foundation] (foundation.min.js?ver=6.2.3:1)
    at HTMLDocument.<anonymous> ((index):369)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
    at Object.trigger (jquery.js?ver=1.12.4:3)
    at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
    at y (jquery.js?ver=1.12.4:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)

which seems a bit odd, as accordion *is* included. Hmmm...

Bob Sawyer over 2 years ago

Solved it, even if I don't understand why it's solved. Following the note here (https://github.com/zurb/foundation-sites/issues/8482#issuecomment-206819207) I changed 

jQuery( document ).ajaxComplete( function() {

to

jQuery( document ).ajaxComplete( function($) {

and that fixed the issue, and the accordion now works. And all is right with the world.

Bob Sawyer over 2 years ago

Aannnnnd, not so fast -- it worked for a bit, and then I started getting this:

Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (scripts.js?ver=e248643…:29)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
    at Object.trigger (jquery.js?ver=1.12.4:3)
    at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
    at y (jquery.js?ver=1.12.4:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)

Now I'm thoroughly frustrated. I'm specifically passing ($) in the function call. If I remove that, it reverts to the original error. 

Anyone? Help, please?