0

I am having some problem on JQuery Mobile, I am very new to this, so maybe my question might seem a bit naive.

I have 2 pages, 1 is the index.html then I have a search.html, I have a sidemenu plugin for both html. And I did autofocus for the search.html. And when I click a button to go from index to search. My sidemenu isn't put into format and also the autofocus doesn't work. Only when I refresh the page it works. I have included all the css, js in every html. And I also already loaded all the script at the start of the page. And if I refresh on the search page and hit back to go back to the index, then the index page is messed up, and I have to refresh that to make it work as well.

Not sure why is that happening.

This is the search.html 

<!DOCTYPE html> 
<body>
    <html>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
        <link rel="stylesheet" href="css/account.css" />
        <link rel="stylesheet" href="css/jquery.mmenu.css" />
        <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
        <script src="js/jquery-1.11.1.js"></script>
        <script src="js/jquery.mobile-1.4.4.min.js"></script>
        <script src="js/jquery.mmenu.min.all.js"></script>
        <link rel="stylesheet" href="css/jquery.mmenu.fullscreen.css" />
        <link rel="stylesheet" href="css/jquery.mmenu.positioning.css" />
        <link rel="stylesheet" href="css/jquery.mmenu.themes.css" />

        <script type="text/javascript">
        $(document).on('pageinit',function() {
            $("#menu").mmenu({
                // options
             }, {
                // configuration
                offCanvas: {
                   pageNodetype: "section"
                }
             });
        });
        </script>

        <script>
        $(document).on('pageshow', function(){ 
            $("#searchinput").focus();
        });
        </script>

        <script type="text/javascript">
        $(document).on('pageinit', function() {
            $("#menu").mmenu({
                classes: "mm-light"
            });
        });
        </script>

        <script>
        $("#menu").mmenu({
            searchfield: false,
            counters: true
        });

        $("#my-button").click(function() {
            $("#menu").trigger("open");
        }); 
        </script>

        <script type="text/javascript">
        $.fn.mmenu.debug = function( msg ) {
            console.log( msg );
        };
        </script>

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

        <div data-role="page" id="home">
            <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme=""> 
            <a  href="index.html" data-transition="none">Back</a>
            <input type="search" id="searchinput" name="search-mini"  value="" data-mini="true" placeholder="Where?"/>
        </div>

        <div>
            <nav id="menu">
                <ul>
                    <li id="infinitytest.html">Home<br><a>Test</a></li>
                    <li>My account</li>
                    <li>Setting</li>
                </ul>
            </nav>
         </div>

         <div>
             <div role="main" class="ui-content scroll">
                 <ul data-role="listview" id="list"></ul>
             </div>
         </div>
    </div>
</body>
    </html>
Jabel Márquez
  • 772
  • 1
  • 11
  • 38
Ben
  • 27
  • 9

2 Answers2

1

First all, your question is very good, because this is caused for something that JQuery Mobile doesn't say in his documentation.

You should read this two articles about JQuery Mobile, they explain a little how JQuery Mobile works and load content:

  1. JQuery Mobile Architecture
  2. How JQuery Mobile handling the codes

(If your gone work with JQuery Mobile I really recommend you to read this articles).

I will resume this articles... You are using external pages and you must know that JQuery Mobile loads all the <head> part just once in all the website/app, and do it in the index.html. So all the code you will need you should load it in the index.html.

I see that your using the mmenu plugin. I'm using it too in an app, so my recommendation for you that works good is load all the resources you need (css, js, etc) in your index.html. And for better manage of your code I recommend to you make an JS file with all your functions.

Jabel Márquez
  • 772
  • 1
  • 11
  • 38
  • Hi, thanks for the info, i had a read on the document, and now i can get the autofocus working, but the mmenu is still not getting put into the correct format. Not very sure why. I removed all the link to js and css on the second html. and group them in the header in the first html. – Ben Oct 19 '14 at 18:17
  • The best way is including all the resources (JS and CSS) in all the pages, and the JS code to open the mmenu too. What is not working with the mmenu? – Jabel Márquez Oct 20 '14 at 00:15
  • Why you have one ` – Jabel Márquez Oct 20 '14 at 00:23
  • Thanks i will give that a try! I am not so sure about the reason, because this set of code works on the first html, which i just copied and pasted onto the second html, then moved everything into the body. – Ben Oct 20 '14 at 15:10
0

I am not certain this will solve your problem, but you could use some javascript to automatically refresh the webpage once after load. Here is a link to a topic about one time refreshes: One time page refresh after first page load

Code:

  window.onload = function() {
  if(!window.location.hash) {
      window.location = window.location + '#loaded';
      window.location.reload();
  }
}


I hope I helped

Community
  • 1
  • 1
Oliver
  • 173
  • 1
  • 11
  • Thanks for the help, but i dont think i can reload the page everytime tho, because when i click the back button, if i reload, i will have to reload all the remote content as well. And it would be a problem. I am just wondering why it does that. Seems like no one else have this problem. – Ben Oct 19 '14 at 14:37