jquery "listview" and charts

Question

I have some troubles with display charts (jquery Charts) into a web.

I have two pages (1.html and 2.html). The first contain a listview that links with the second page. The 2.html displays the chart. Here is the problem: When page 2 is launched through page 1, the chart doesn't appear!! But if I reload the page 2.. so the chart appears!

If I work with an only page using "href=#page" references the chart works fine and it's displayed, but my intention is to have different html files, one of them with the listview and the other one with the chart. Is it possible?

I have tested many types of jquery charts and all of them had the same behavior.

Any idea?

thanks for all, Best Regards.

Here the files:

1.html ----

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
    <div data-demo-html="true">
        <ul data-role="listview" data-inset="true">
            <li><a href="2.html">Chart</a></li>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">/script>
</body>

2.html with the code into the reference (jqwidgets - chart_bar)

score 1 · Accepted Answer · edited May 23 '17 at 10:24

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

The most realistic solution would be to move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded. I would also use that same index.js file and initialize it inside a HEAD of every possible other page.

Now you can ask me WHY?

Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.

I've listed other ways to fix this problem (with examples) in my answer here: Why I have to put all the script to index.html in jquery mobile.

Hi Gajotres, thank you alot for your rapid response and information about jquery-mobile use. In order to implement a solution similar to "solution 2", I tried to use only one html with all of the js files are into a HEAD. In addition to this, I put all pages into the same html file (using references href="#page2" for to access each one of them). On this situation, the chart's page works fine, but an other problem appears! Now the problem is related with the "listview" object. I'll edit my question to expand the problem. Thanks — actanony, May 21 '13 at 15:48
A new question related with jquery-mobile and listview object: http://stackoverflow.com/questions/16676948/how-to-use-jquery-mobile-listview-with-urlvars-into-the-items-links — actanony, May 21 '13 at 18:28

jquery "listview" and charts

1 Answers1