jquery mobile autocomplete different behavior at loading page

Question

Currently I've a problem with the autocomplete function in jquery mobile ( http://andymatthews.net/code/autocomplete/ ). So if I run the page directly via url, the page and the autocomplete functionality will work without any problems. If I navigate to the page via e.g. a mainmenu with the changepage function, the autocomplete function won't work!

Can you give me an advice?

My code:

mainmenu:

<li>
    <a id="buttonNewReservation" href="newReservations/newReservation.htm">Neue Reservation</a>
    <script type="text/javascript">
        $.cookie.json = true;
        $('#buttonNewReservation').click(newReservation);

        function newReservation() {
            var session = $.cookie("session");
            if (session != null) {
                $.mobile.changePage("/newReservations/newReservation.htm", 
                       {data:session});
            }
        }   
    </script>
</li>

• Page with autocomplete: The same code as in http://andymatthews.net/code/autocomplete/search.html

Thanks for your help!

Kind regards, pro

Answer 1

You import the autocomplete script in the head tag. As JQM only loads this once (the first page you open) and then dynamically loads the div from the page you want to go to with data-role="page", the head tag from the first page is always used in the pages you redirect to from that page.

For more information read this page: http://jquerymobile.com/test/docs/pages/page-scripting.html (Scripts & styles in the head)

So you need to add this line:

<script src="jqm.autoComplete-1.4.3-min.js"></script>

to you page div, like this:

<div data-role="page" id="mainPage">
    <script src="jqm.autoComplete-1.4.3-min.js"></script>
    <div data-role="header">
    //rest of the code....
</div>//end of data-role="page"

This way the script will be loaded when JQM pulls in the page using AJAX and it will also be available when you go to the page directly