2

i have an index.html with an href button to another page to display a pie chart, but when i click on the button the chart doesn't appear, then if i refresh the page the chart appears. here is the html page .

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>the Stats</title> 
    <link rel="stylesheet"  href="jquery.mobile-1.3.1.css" />  
    <link rel="stylesheet" href="demo.css">

    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.3.1.js"></script>

</head> 
<body> 

<div data-role="page">

<div data-role="header" data-theme="b" >
    <h1>HsV</h1>
</div><!-- /header -->

<div data-role="content">   
    <img id='img' src="HSV-logo.png" width=150 />       
</div> <!--/content -->

<div class="content-primary">
<ul data-role="listview">
<li><a href="France-10.html"  data-inline="true" data-     transition="flip"><img   src="images/gf.png" alt="France" class="ui-li-icon">France </a></li>
<li><a href="France-30.html" blank" data-inline="true" data-transition="flip"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain </a></li>
<li><a href="chart/raphael_BL.html" data-inline="true" data-transition="flip"><img src="images/gbl.png" alt="Belgium" class="ui-li-icon">Belgium </a></li> </ul>
</div>

    <div id="footer" data-role="footer" data-theme="b">
        <h1>my app</h1>
    </div>

</div><!-- /page -->

</body>
</html>

here is the code of the linked page for the pie chart .

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>HybridStatsViewer</title> 

    <link rel="stylesheet"  href="jquery.mobile-1.3.1.css" />  
    <link rel="stylesheet" href="demo.css">
    <!--link rel="stylesheet" href="demo-print.css"media="print"-->

    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.3.1.js"></script>
    <script src="raphael.js"></script>
    <script src="pie-10.js"></script>
    <script src="moteur.js"></script>
</head> 
<body onload="moteur();"> 

<div data-role="page">
<div data-role="header" data-theme="b" >
    <h1>HsV</h1>
    <a href="index.html" data-role="button" data-icon="arrow-r" data-theme="c"     data-inline="true" data-transition="flip" data-direction="reverse">Back</a>
</div><!-- /header -->

<div id ="holder">      
</div>

<a id="bt" href="France-30.html" data-mini="true" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Slide</a>

<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>

</div><!-- /page -->
</body>

Gajotres
  • 57,309
  • 16
  • 102
  • 130
zazoo24
  • 25
  • 2
  • 6
  • i believe `moteur();` function initialize the pie chart. Instead of using `onload=""`, add this piece of code `$(document).on('pageshow', '[data-role=page]', function () { moteur(); }); `, It will initialize the pie chart once the page is shown. – Omar May 16 '13 at 14:21

3 Answers3

2

You didn't post your javascript code but I think I know what is your problem.

All jQuery plugins that work with page height and width (in your case pie chart) MUST be initialized through pageshow event. This is because jQuery Mobile pages has correct height only at that point. So if page height is 0 plugin will initialize but with height set to 0.

So if you are doing it during the document ready or any other page event, switch your pie chart plugin initialization to pageshow evenet.

If you don't know what pageshow event is take a look at my other detailed answer: jQuery Mobile: document ready vs page events

EDIT :

I have fixed your problem.

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.

Read more about it in my other answer other answer: Why I have to put all the script to index.html in jquery mobile

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
1

Add the below code inside pie chart page and remove onload="moteur();" function.

<script>
$(document).on('pageshow', '[data-role=page]', function () { 
 moteur();
});
</script>
Omar
  • 32,302
  • 9
  • 69
  • 112
0

Any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.

The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.

Another approach for page-specific scripting would be to include scripts at the end of the body element when no data-role=page element is defined, or inside the first data-role=page element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a data-role="page" element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.

Check our this link for complete details.....

http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html

Narasimha Reddy Lomadi
  • 139
  • 2
  • 7