Jquery Mobile Javascript not working on ajax load

Question

Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:

<a id="searchIcon" href="/"></a> 

<div id="searchWrapOuter" style="display:none;">
    <div id="searchWrapInner">
        <div id="formContainer">
            <form id="searchForm" action="#">
                <div>
                    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
                </div>
            </form>
        </div>
    </div>
</div>

Width the following javascipt/jquery:

 $(function() {
        $(document).on("click", "#searchIcon", function () {
            var searchWrapper = $("#searchWrapOuter");
            $(searchWrapper).slideToggle();
            return false;
        });
});

This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.

I have read about using the

$(document).on('pageinit'), not $(document).ready()/$(function()

I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?

Thanks,

laurent · Accepted Answer · 2013-01-14 09:53:05Z

3

Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).

The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.

Also note this comment in the doc which might also be relevant to you:

The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.

http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

answered Jan 14, 2013 at 9:53

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Angelo Chrysoulakis Over a year ago

This is a pro-tip. I was experiencing a bug when a form was being rendered on several different models (on different pages but each page was still cached.) The form was bound to a div ID and was submitted via AJAX. The form would submit after I refreshed the browser but not when navigating between pages via AJAX navigation. I changed the form to use a <div class> instead and all is good.

jikey · Accepted Answer · 2013-01-14 09:58:03Z

0

You can manually adjust delay time to 500ms and 1s.

$(searchWrapper).delay(1000).slideToggle();

answered Jan 14, 2013 at 9:58

jikey

3943 silver badges9 bronze badges

Comments

Joseph Higgins · Accepted Answer · 2019-11-26 21:53:36Z

0

My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this

answered Nov 26, 2019 at 21:53

Joseph Higgins

11 bronze badge

Collectives™ on Stack Overflow

Jquery Mobile Javascript not working on ajax load

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related