2

I'm still not exactly sure what my problem is, but I've detailed what is happening, what I've tried, and what I can do to kinda fix the problem below:

I'm using .mmenu Which is beautiful, but I'm running into some conflicts running it with Jquery Mobile.

The menu does not function properly when used with Jquery Mobile on the initial page load, but it will function normally if I manually reload the page, so I thought maybe something was caching, so I tried using <meta http-equiv="Pragma" content="no-cache"/> but that doesn't work. I even tried <meta http-equiv="refresh" content="0;URL='page2.asp'" /> just as a test, and the page will still load broken, but will go into an infinite loop after you reload the page once. So apparently meta tags just aren't working on the initial page load at all.

Then I tried javascript: function LoadOnce(){ window.location.reload(); } and put <body onLoad=" LoadOnce()"> once again, the loop doesn't begin until after I reload the page.

Is there a sure way to force the page to reload and execute my Jquery, besides hitting the reload button?

The Code

The menu link looks like this:<a href="#menu"></a>

The menu is executed like this:$(document).ready(function(){ $("#menu").mmenu();});

A number of things are happening:

  • When I navigate to a new page, the menu displays as a block element, it's supposed to be hidden, so it appears $("#menu").mmenu(); isn't executing.
  • Clicking the menu icon from the new page does not open the menu, but instead tries to navigate away from the page (example: navigate from page1.asp to page2.asp, click #menu link on page2.asp and instead of sliding open the #menu on page2.asp, the page tries to navigate to page1.asp#menu)

Here is a test page where you can see the behaviour described above.

Refreshing the page makes it work, and removing jquery.mobile-1.4.3.js makes the menu work without having to refresh, but obviously breaks the structure of the site, Why would my page work after the forced reload but not on the initial load? is there an easy way to fix this that I haven't considered yet?

Lei-Lonnie
  • 794
  • 11
  • 34
  • 1
    Possibly relevant: [use `.on('pagecreate')` instead of `.ready`](http://stackoverflow.com/q/14468659/901048) – Blazemonger Jul 28 '14 at 19:27
  • Reloading the page doesn't seem like an appropriate solution. I assume the problem lies somewhere else. Can you share a link? – Tsanyo Tsanev Jul 28 '14 at 19:33
  • 1
    P.S. `` tells the browser no to cache the HMTL page, it will still cache the external resources, i.e. js and css files, where I'm guessing your problem is. – Tsanyo Tsanev Jul 28 '14 at 19:34
  • @TsanyTsanev Thank you, that is good to know, I agree reloading the page is a cheap fix, I'll see what I can do about putting some pages on a live server. – Lei-Lonnie Jul 28 '14 at 19:48
  • Here's a link: http://sh-e.ms/jqueryproblem – Lei-Lonnie Jul 28 '14 at 20:46
  • It might not work properly with Ajax as JQM uses ajax to load external pages e.g. Page1.asp, page2.asp, etc. I don't know if one menu can be accessed from different pages that are present into DOM. If you disable ajax to navigate between pages, it will work as it should. Add `data-ajax="false"` or `rel="external"` to links to see it working. If you still want JQM to load pages via Ajax, make sure that plugin supports it. Moreover, use jquery-core 1.8.3 at least with JQM 1.4.3. – Omar Jul 28 '14 at 21:41
  • Everything in `head` is processed on page load, but interior pages' styles & scripts in head are ignored by jqm. Per the old docs ( http://demos.jquerymobile.com/1.0rc1/docs/pages/page-scripting.html) you have to use the same `head` for all pages, resort to `script` tags in your content divs, or leverage `pagecreate()`. – Rodney G Jul 28 '14 at 23:35

1 Answers1

0

Unless I'm totally missing the problem here, I think I had a similar issue once, where my pages would load (or the window location would change) before my js ajax call could be made, so nothing showed up on the page.

My solution ended up being to put the jQuery stuff in a script tag on the html page, rather than in a separate script. So, rather than reloading the page on a button click or something, or navigating elsewhere, have the button or form action call some function to perform the jQuery you need, then either reload the page (if thats the goal), or navigate to the page you want. The key is that you include that reload under the call success, so it will only execute AFTER your jQuery has been successfully carried out. Hope this helps

Dan
  • 212
  • 1
  • 6
  • 12