Menu icon Foundation
Modal in ajax loaded tabs

Hello Foundationers,
I'm trying to load tabs via AJAX, with modals in said tabs. My modals work fine when I have all content on the page to begin with, but if I load the tabs via ajax my modals won't open when the appropriate link is clicked. I am (attempting) using the $(document).foundation('reflow') method, as described here http://foundation.zurb.com/forum/posts/1766-reflow.
My javascript is as follows:

$(document).ready(function() {
    $("dl.tabs.bios dd a").click(function() {
        var split = $(this.href.split('#'));
		var target = split[1];
		if (!$( "#" + target ).hasClass("loaded")) {
			$( "#" + target ).load( target + ".html");
			$( "#" + target ).addClass("loaded");
			$(document).foundation('reflow');
		};
    });
});

My tab structure looks like:

<dl class="tabs bios" data-tab>
	<dd><a href="#tab1">Tab 1</a></dd>
	<dd><a href="#tab2">Tab 2</a></dd>
	<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<div class="tabs-content bios">
	<div class="content" id="tab1"></div>
	<div class="content" id="tab2"></div>
	<div class="content" id="tab3"></div>
</div> 

The HTML I'm loading looks like:

<h2>Tab 1</h2>
<ul class="bios small-block-grid-3 medium-block-grid-4 large-block-grid-5">
    <li>
		<a data-reveal-id="jlpicard">
			<img src="../images/bio-picard-small.jpg" />
			<p>Jean-Luc Picard</p>
		</a>
		<div id="jlpicard" class="reveal-modal bio" data-reveal>
			<img src="../images/bio-picard-large.jpg">
			<h3>Jean-Luc Picard</h3>
			<p>I'm a Starfleet officer, an archaeologist, and a diplomat.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
	</li>
	<li>
		<a data-reveal-id="Bio2">
			<img src="../images/staff-bio-small.jpg">
			<p>Firstname Lastname</p>
		</a>
		<div id="Bio2" class="reveal-modal bio" data-reveal>
			<img src="../images/staff-bio-large.jpg">
			<h3>Firstname Lastname</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
	</li>
</ul>

Any ideas?

Thanks

Oh, and as an aside, it would be great if something like the data-reveal-ajax method could somehow be used for tabs/accordions/whatever: basically a context agnostic ajax loading method.

AJAXtabsmodalrevealReflow

Hello Foundationers,
I'm trying to load tabs via AJAX, with modals in said tabs. My modals work fine when I have all content on the page to begin with, but if I load the tabs via ajax my modals won't open when the appropriate link is clicked. I am (attempting) using the $(document).foundation('reflow') method, as described here http://foundation.zurb.com/forum/posts/1766-reflow.
My javascript is as follows:

$(document).ready(function() {
    $("dl.tabs.bios dd a").click(function() {
        var split = $(this.href.split('#'));
		var target = split[1];
		if (!$( "#" + target ).hasClass("loaded")) {
			$( "#" + target ).load( target + ".html");
			$( "#" + target ).addClass("loaded");
			$(document).foundation('reflow');
		};
    });
});

My tab structure looks like:

<dl class="tabs bios" data-tab>
	<dd><a href="#tab1">Tab 1</a></dd>
	<dd><a href="#tab2">Tab 2</a></dd>
	<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<div class="tabs-content bios">
	<div class="content" id="tab1"></div>
	<div class="content" id="tab2"></div>
	<div class="content" id="tab3"></div>
</div> 

The HTML I'm loading looks like:

<h2>Tab 1</h2>
<ul class="bios small-block-grid-3 medium-block-grid-4 large-block-grid-5">
    <li>
		<a data-reveal-id="jlpicard">
			<img src="../images/bio-picard-small.jpg" />
			<p>Jean-Luc Picard</p>
		</a>
		<div id="jlpicard" class="reveal-modal bio" data-reveal>
			<img src="../images/bio-picard-large.jpg">
			<h3>Jean-Luc Picard</h3>
			<p>I'm a Starfleet officer, an archaeologist, and a diplomat.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
	</li>
	<li>
		<a data-reveal-id="Bio2">
			<img src="../images/staff-bio-small.jpg">
			<p>Firstname Lastname</p>
		</a>
		<div id="Bio2" class="reveal-modal bio" data-reveal>
			<img src="../images/staff-bio-large.jpg">
			<h3>Firstname Lastname</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
	</li>
</ul>

Any ideas?

Thanks

Oh, and as an aside, it would be great if something like the data-reveal-ajax method could somehow be used for tabs/accordions/whatever: basically a context agnostic ajax loading method.

Neil Haskins over 5 years ago

I've found my solution. In my initial javascript the reflow was taking place before the new html had loaded. My new Javascript is:

$(document).ready(function() {
$("dl.tabs.bios dd a").click(function() {
var split = $(this.href.split('#'));
var target = split[1];
if (!$( "#" + target ).hasClass("loaded")) {
$( "#" + target ).load( target + ".html", function(){
$(this).foundation( 'reflow' );
});
$( "#" + target ).addClass("loaded");
};
});
});

This causes the reflow to take place after the load has completed. Also I've targeted the reflow to "this" (the element where the content has been loaded) as opposed to the whole document.

I will also note that either "$this.foundation('reflow')", or "$this.foundation('reveal')" work, but "$this.foundation('reveal', 'reflow')" does not.

Rafi Benkual over 5 years ago

Hi Neil,
Thanks for posting the solution you found here! It's odd that reflow on the reveal doesn't work.

FranzZemen over 5 years ago

This post saved me on modals.

As an fyi, reflow also solved an issue I had with Tooltips and dynamically loaded html.