1

I am working on a final project for school and I have run into a bug that has me stumped. I have a jQM page that contains two divs (detailed-content, sortable-content), one to hold report A and one to hold report B. I have adapted the jQM hash processing demo to .show() the correct report div and .hide() the other report divs based upon the querystring 'selection'.

This seems to work properly as long as the reports page is the page being physically loaded in the browser. Unfortunately, when another page, is loaded directly (by URL) and the Reports button at the top is then clicked, no content div is loaded once the reports page is loaded (although the console log confirms the event is being fired) and if the 'Choose Reports' button is clicked there is an odd issue with rendering of the jQueryMobile popup wiget. Then when any other page is visited many odd glitches occur relating to the system properly keeping track of the active page.

Has anybody encountered this type of issue before? I am hoping that it is something simple that I am missing, it is driving me nuts!

Let me know if any further information is required

hombero
  • 11
  • 4

2 Answers2

0

You are binding events to $('document') which will try to search the <document> tag instead of the document itself. Please remove the quotation marks around it.

Also, in your code you use $(document).ready() on pagechange. However, $(document).ready will only fire once (upon the DOM is finished loading) at the beginning of the page load. You should try using the pageinit event instead:

$(document).bind("pagechange", function () {
    $(document).on('pageinitfunction() {
     ...

http://api.jquerymobile.com/pageinit/

What is the difference between ready an pageinit?

jQuery Mobile: document ready vs page events

Community
  • 1
  • 1
Edward
  • 1,914
  • 13
  • 26
  • Thank you I have replaced .ready() with .on('pageinit', function() {... and it has in fact solved the issue with the #detailed-content div not showing. However the display issues with the popup when navigating to the reports page still exists. It's odd that it seems to work perfectly if the page is initialized directly, but not when browsed to. I must be missing something else – hombero Aug 01 '14 at 18:20
  • Can you show what kind of problem you are having and also what you are expecting to see? – Edward Aug 01 '14 at 18:43
  • When I load http://hombero.com/final-storms/#page-charts and then click the Reports navbar item, and then click the 'Choose Reports' button the resulting popup is not styled as it is if clicked directly from http://hombero.com/final-storms/#page-reports . Additionally when I then use the menu to navigate to other pages the navigation menu breaks down with the active navbar item not being set anymore – hombero Aug 01 '14 at 18:49
0

Due to my inability to solve the issue in a reasonable amount of work hours I have re-written how my page deals with showing the reports. I created a menu page of report choices that link to internal pages that have the appropriate data appended to them. You can see that here http://hombero.com/final-storms#page-reports

However, for another set of data I subsequently created a dynamic menu that adds a generated internal page to the DOM with the data corresponding to the menu choice. It uses the jQuery Mobile pagecreate, pagebeforeshow, and the jQuery click events.

For those interested, you can see it in action here http://hombero.com/final-storms/#page-tracks

hombero
  • 11
  • 4