Menu icon Foundation
Maggelan error after ajax modal opened

Hi,
we have magelan on our site. When i open modal with ajax

<div id="contentPageModal" class="reveal-modal" data-reveal aria-hidden="true" role="dialog"></div>
            

         

$('#contentPageModal')
    		.foundation('reveal', 'open', {
				url    : '/ContentPages/ajax_get/' + $(this).data('content-page')
			});

Magellan stays the way it was, if it was sticky on top, its stay, if the sticky was hidden, it stays hidden.

When i call it directly with the same output

$('#contentPageModal')
    		.html('<p>Informace ke kampani Vám poskytnou krajská koordinační pracoviště BESIP. Kontakty na jednotlivé krajské koordinátory naleznete <a href="http://www.ibesip.cz/cz/besip/besip-v-krajich/krajsti-koordinatori-besip" target="_blank">zde</a>.</p><p>Případně kontaktujte:</p><p><strong>Tomáš Lindner</strong><br />Kontaktní pracovník kampaně "BESIP dětem"<br />tel.: +420 733 345 768<br />email: <a href="mailto:[email protected]?subject=Zpr%C3%A1va%20z%20besipdetem.cz">[email protected]</a></p>')
			.foundation('reveal', 'open');

it is just fine.

Is there some bug or m i doing something wrong? Thanks.

maggelanAJAXmodal

Hi,
we have magelan on our site. When i open modal with ajax

<div id="contentPageModal" class="reveal-modal" data-reveal aria-hidden="true" role="dialog"></div>
            

         

$('#contentPageModal')
    		.foundation('reveal', 'open', {
				url    : '/ContentPages/ajax_get/' + $(this).data('content-page')
			});

Magellan stays the way it was, if it was sticky on top, its stay, if the sticky was hidden, it stays hidden.

When i call it directly with the same output

$('#contentPageModal')
    		.html('<p>Informace ke kampani Vám poskytnou krajská koordinační pracoviště BESIP. Kontakty na jednotlivé krajské koordinátory naleznete <a href="http://www.ibesip.cz/cz/besip/besip-v-krajich/krajsti-koordinatori-besip" target="_blank">zde</a>.</p><p>Případně kontaktujte:</p><p><strong>Tomáš Lindner</strong><br />Kontaktní pracovník kampaně "BESIP dětem"<br />tel.: +420 733 345 768<br />email: <a href="mailto:[email protected]?subject=Zpr%C3%A1va%20z%20besipdetem.cz">[email protected]</a></p>')
			.foundation('reveal', 'open');

it is just fine.

Is there some bug or m i doing something wrong? Thanks.

Jiří Forst over 4 years ago

Ok, i probably found it:
https://github.com/zurb/foundation/issues/6100

Took looong to resolve it since issue is closed and current version is 5.5.1, can i download 5.5.2 somewhere?

Jiří Forst over 4 years ago

Or not... i checked my foundation.magellan and this commit
https://github.com/zurb/foundation/commit/858f4b021c2014e60dff73c0fc169be916481812
is already there (although this file version is marked as 5.5.1).

And it is still not working.

Mike Tesla almost 4 years ago

Did you ever find a solution to this issue? I am encountering the same problem now. (I using Foundation 5.5.2.)

Mike Tesla almost 4 years ago

I investigated this further and discovered that if the ajax modal contains just plain text, Magellan works fine. However, as soon as the ajax modal includes HTML (even simply wrapping the text in a tag) Magellan locks up once the modal is opened.

Here is a jsfiddle:
http://jsfiddle.net/zkq72ztv/1/

Things work properly, as the ajax modal loads a plain text file. However, if you just switch that to something that includes html, the problem is manifest: opening the modal causes Magellan to lock.

Obviously, this is no workaround, as most any modal will need html. But hopefully this is a useful hint towards the root cause of the problem.

GLUNZ almost 4 years ago

You need to re-initialize Magellan after loading AJAX content.
I was able to fix the Issue with the following Code:

// Re-Initialize Magellan after Modal is Closed
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  $(document).foundation('magellan-expedition', 'reflow');
});

References:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/magellan.html#adding-new-content-after-page-load

http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html#event-bindings