CODEWITHSUNDEEP
iosajaxtabszurb-foundation
unmultimedio
unmultimedio

Reputation: 1244

Foundation 5: Lots of items are not clickable in mobile iOS, fixed after off-canvas. Why?

I have a really annoying and strange issue.

I am loading a big part of a page via ajax, and I'm building the html code to inject it to a div after all it's parsed.

Data and html injection is working properly, but within the html I have some foundation tabs, that after being reloaded, don't respond to touch events in iOS (Safari) tried in iPhone and iPad. Actually, after the reload of the div, almost of clickable items (inputs, buttons, tabs, and some divs) flash after touch events but does not receive the click/touch event.

This happens only in iOS mobile (Safari/Chrome). Desktop (any browser) and Android (any browser) works perfectly fine.

I've look around, thinking issue was with the tabs themselves, but tabs are fine, I just realized issue is with an offcanvas, since when I click the hamburger icon to expand an offcanvas menu, and click the content again to hide the menu, tabs come back to work as expected.

How is it possible that reloading a div via ajax, makes loads of clickable elements unable to receive touch events? And how is it possible that showing/hiding off canvas menu fixes the issue?

I haven't attached any code, since its quite large and complex, lots of js and php, but it would be something like this:

<body>
    <div>
        The content
        <div>
            The zone I reload, that after reloaded looks like this:
            <div>
                Container:
                <input type="text" value="some search box">
                <input type="button" value="a button">
                Then the tabs
                <dl class="tabs" data-tab>
                    <dd class="tab-title active"><a class="one-test-class" href="#panel2-1">Tab 1</a></dd>
                    <dd class="tab-title"><a class="one-test-class" href="#panel2-2">Tab 2</a></dd>
                    <dd class="tab-title"><a class="one-test-class" href="#panel2-3">Tab 3</a></dd>
                    <dd class="tab-title"><a class="one-test-class" href="#panel2-4">Tab 4</a></dd>
                </dl>
                <div class="tabs-content">
                    <div class="content active" id="panel2-1">
                        <p>First panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-2">
                        <p>Second panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-3">
                        <p>Third panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-4">
                        <p>Fourth panel content goes here...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>The offcanvas menu</div>
</body>

As I said, first time works fine, after reloading the container it looks fine but does not receive click events, and doing a show/hide off canvas menu, clickable items come back to be working.

Please any help is appreciated, I'm using foundation 5, reloading via ajax, and issue is happening in iOS mobile.

Upvotes: 0

Views: 532

Answers (1)

brnt
brnt

Reputation: 163

From the Foundation documentation:

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('tab', 'reflow');

This is specific to tabs, but there are similar instructions on other element types as well. I'm not sure why showing the off-canvas would fix the issue, but it could be making those same calls as part of its routine.

Edit: Also check for any ancestor elements that have stopPropagation() in their click listener. I see this doing weird things on iOS. An example would be if you're squashing the bubbling up of a click even to the parent container.

Upvotes: 0

Related Questions