Menu icon Foundation
Interchange 5 callback - on.('replace') issue

I'm having trouble with Foundation 5.2.2 Interchange where I'm trying to make sure that the template is loaded by using the interchange callback on.('replace'...

$(document).on('replace', '#div-container', function (e, new_path, original_path) {
    console.log('anything', 'or' + $(this));
});
            

        

It seems as if I'm not able to set a selector that is not a DOM type img.

Now, this is why I need this:
When I load the page, I have a template that is, by default, loaded for mobile. Then when interchange comes to play it loads a web template with carousel in it.

I've setup the image that I'm using to check if a screen size has changed, and it works, but not all that good, because I need to know when templates content is finished loading.

Now currently I've added setTimeout with 500ms, but in some cases it doesn't work, because if template takes longer to load then that, the script is not refreshed for that content.

This is how I thought of doing it:

$(document).on('replace', '#div-container', function (e, new_path, original_path) {
    e.on('load', function () {
        console.log('anything', 'or' + $(this));
    });
    ... something like this
});

Is there any other way for me to know when each of the interchange templates have been loaded?

Thanks ;)

interchangecallback

I'm having trouble with Foundation 5.2.2 Interchange where I'm trying to make sure that the template is loaded by using the interchange callback on.('replace'...

$(document).on('replace', '#div-container', function (e, new_path, original_path) {
    console.log('anything', 'or' + $(this));
});
            

        

It seems as if I'm not able to set a selector that is not a DOM type img.

Now, this is why I need this:
When I load the page, I have a template that is, by default, loaded for mobile. Then when interchange comes to play it loads a web template with carousel in it.

I've setup the image that I'm using to check if a screen size has changed, and it works, but not all that good, because I need to know when templates content is finished loading.

Now currently I've added setTimeout with 500ms, but in some cases it doesn't work, because if template takes longer to load then that, the script is not refreshed for that content.

This is how I thought of doing it:

$(document).on('replace', '#div-container', function (e, new_path, original_path) {
    e.on('load', function () {
        console.log('anything', 'or' + $(this));
    });
    ... something like this
});

Is there any other way for me to know when each of the interchange templates have been loaded?

Thanks ;)

Kenny over 5 years ago

I'm looking for a solution to this as well.

I'm having an issue where my sticky footer is being pushed too far down because the interchange content hasn't loaded properly yet.

Daniel Kossmann almost 4 years ago

I just used this code and id did the trick:

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

I have interchange in .element