0

I already tried everything from here.

Loading before, loading after

Using

$(document).delegate("#index", "pagecreate", function()

Using

$(document).on('pageshow', '#index', function()

But no luck at all, the charts does not show up after changing pages. For pages I'm using another html pages.

Like

<a href="mobile_page1.html" data-transition="slide">left</a>
<a href="mobile_page2.html" data-transition="slide">right</a>

I'm not using the same html page, the page changes but the charts does not open, only if I click to reload it

Does anyone know the secret for it?

Thanks :)

saulob
  • 615
  • 1
  • 10
  • 25

1 Answers1

1

Have a look at this small example. http://jsfiddle.net/beRoberto/Mrgv2/

The container has to have a size 

<div id="container" style="height:auto; width:95%;"></div>

The main idea is to include the proper libraries for the chart you are trying to implement. There is a difference between Highchart and Highstock so pick the appropriate library. Works like a charm.

Call the function to generate the chart on ready works well for me.

$(document).ready(function() {
var data = [];
for (var i = 0; i <= 20; i++) {
 data[i] = 20 + i;
}

//call th function to generate chart
makeChart(data);
});

UPDATE: Turn off AJAX navigation on the link by adding rel=external to the link

<a href="mobile_page1.html" data-transition="slide" rel=external>left</a>

Or by

<a href="mobile_page1.html" data-transition="slide" data-ajax="false">left</a>

The problem is that AJAX navigation is not loading your Highchart libraries, more on AJAX in this post: Remove ajax call from regular links with jQuery Mobile

Community
  • 1
  • 1
beRoberto
  • 134
  • 6
  • Thanks, but, what that has to do with jQuery Mobile and pages? – saulob May 03 '14 at 21:00
  • It's a snippet from a web app built with multiple jQuery Mobile pages and Highcharts. If you implement that on the page you are transitioning to you should get the desired effect. Check that the libraries are loaded maybe you are experiencing some network problems. Also post a link or jsfiddle to show the error – beRoberto May 03 '14 at 21:27
  • I tried, did not work for me. And your fiddle does not show any jQuery Mobile on it, there's no page. There's nothing showing that works on pages. I tried all of it on my pages and did not work. Like I said, your code shows nothing to me about my error. Sorry :( , but thanks. – saulob May 04 '14 at 00:57
  • I think the update above will fix your issue. Let me know if it does. – beRoberto May 04 '14 at 15:41
  • Perfect. Now it worked :), used the data-ajax false, perfect. Thanks – saulob May 04 '14 at 18:06
  • Well, it works, but now when using web app, and click on the links it goes to safari, another problem appeared :) , do you know anything about it? – saulob May 04 '14 at 18:13
  • Use data-ajax="false" for same domain page load, example index.html to page2.html. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply stoping a page within your domain from being loaded via Ajax. More info at Disabling Ajax section: http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/ajax-nav/ – beRoberto May 04 '14 at 21:35
  • I presume you are using PhoneGap or Cordova for this, the thing to take into account is to add the domain you want to show in the app to the access origin list. Example `< access origin="http://basket-planet.com/files/news-c..." subdomains="true" />` I need more info about your setup to understand whats going on. jQuery Mobile + Highcharts + ??? – beRoberto May 04 '14 at 22:00
  • thanks beRoberto, but actually I'm using only jQuery mobile, I'm new at this. It's some weird stuff with links on web app. I fixed using some javascript fix, found here at stackoverflow, using data-ajax false the slide disappear, but there's no problem on that. It's working now. thanks ;) – saulob May 05 '14 at 00:55