Menu icon Foundation
Interchange 'replace' Event Trigger

I have searched the forums to no avail, I see several threads none of which seem to resolve my issue.

I have a div that uses Interchange to replace html partials and works as expected. I cannot however get the 'replace' event to work correctly, which is needed to reflow/reinit foundation so the toggle feature etc work inside the partials.

(http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html)

Here is the interchange container div markup:

<!-- MASTHEAD -->
<div class="masthead-wrapper" data-interchange="[partials/masthead-small.html, small], [partials/masthead-medium.html, medium]">
	<noscript>{% include "partials/masthead-medium.html" %}</noscript>
</div>            

...and here is the jquery where I tried several methods to simply trigger the event and log in console (I have tried both with and without .ready)....

$(document).ready(function() {

    $(document).on('replace', '.masthead-wrapper', function (e, new_path, original_path) {
		console.log(e.currentTarget, new_path, original_path);
	});

	$(".masthead-wrapper").on("replace", function(e) {
		console.log("replace interchange evt");
	});

	$('.masthead-wrapper').on('replace', function (e, new_path, original_path) {
		console.log("interchange has changed");
	});

});

Thoughts? I need to reflow or re-init foundation but cannot seem to get the event. Thanks.

interchangeReflowReplace

I have searched the forums to no avail, I see several threads none of which seem to resolve my issue.

I have a div that uses Interchange to replace html partials and works as expected. I cannot however get the 'replace' event to work correctly, which is needed to reflow/reinit foundation so the toggle feature etc work inside the partials.

(http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html)

Here is the interchange container div markup:

<!-- MASTHEAD -->
<div class="masthead-wrapper" data-interchange="[partials/masthead-small.html, small], [partials/masthead-medium.html, medium]">
	<noscript>{% include "partials/masthead-medium.html" %}</noscript>
</div>            

...and here is the jquery where I tried several methods to simply trigger the event and log in console (I have tried both with and without .ready)....

$(document).ready(function() {

    $(document).on('replace', '.masthead-wrapper', function (e, new_path, original_path) {
		console.log(e.currentTarget, new_path, original_path);
	});

	$(".masthead-wrapper").on("replace", function(e) {
		console.log("replace interchange evt");
	});

	$('.masthead-wrapper').on('replace', function (e, new_path, original_path) {
		console.log("interchange has changed");
	});

});

Thoughts? I need to reflow or re-init foundation but cannot seem to get the event. Thanks.

Robert Truex over 3 years ago

It looks like the following seems to work...now to figure out if i can just get the toggler inside small partial to reinit/reflow instead of calling the entire foundation();...

$(document).ready(function() {

  $("#masthead-wrapper").on("replaced.zf.interchange", function() {
    console.log("zf interchange: replaced masthead partial");
    var currentBreakpoint = Foundation.MediaQuery.current;
    if (currentBreakpoint === "small") {
      //$(document).foundation();
      //$(document).foundation('reflow');
      //$(document).foundation('toggler','reflow');
    }
  });  

});

Robert Truex over 3 years ago

The above seems to work but uses $(document).foundation(); instead of just reflowing the toggler plugin in my small partial. Neither of the two commented out lines worked. I also get the following JS warning:
'''
Tried to initialize interchange on an element that already has a Foundation plugin.
'''