Search jQuery

jQuery Forum

Ajax problem: jQuery Mobile with jqplot

in jQuery Mobile • 11 years ago

Hi, I've been seeing a problem when using jQuery mobile with jqplot when ajax enabled.

I followed the basic instruction for jqplot, i.e., add a div and a simple javascript to make a chart:

<div id="chartdiv" style="height:400px;width:300px;"></div>
<script type="text/javascript">
$(document).ready(function() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
})
</script>

when I disable the ajax, the chart will show up but if I enable the ajax, the chart won't show up. Is there something I can do to have jqplot work with jQuery Mobile when ajax enabled?

Thanks!

Replies(8)

tyraeltong

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

After some investigation, the problem seems resides in the "id" of the div:

jqplot using "id" of a div to do the chart creation, and jQuery-mobile will cache the page content (when ajax enabled), so if first time I see the chart, and go to some other pages, then back to this page, the actual html content of the page will contains two divs with the same id, and jqplot won't do anything for the second one.

So this became a general question for jQuery-mobile: how to prevent multiple elements with same id on the page when ajax caches the page elements?

rolfvande..

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

i can't even get any graphs to show.

when i go to the html page directly (http://server/jquery/charts/lines.html) it shows in the correct way.

but when it gets included by jquery mobile it doesn't (http://server/jquery/#charts/lines.html), the graph just doesn't show

any idea on this?

rolfvande..

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

Figured out i need to call the script for rendering the graph in the mobile init in the index.html like this:

$(document).bind("mobileinit", function(){
$('#lines').live('pagecreate',function(event){
//jqPlot code

maybe this can be of any help

willzofst..

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

is $('#lines') the div that your drawing the chart in?

skesara

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

hi can you share the code if it possible. i am not successful even after disabling ajax.

foufidou

Re: Ajax problem: jQuery Mobile with jqplot

11 years ago

hi,

somthing new for this problem? i have the same !!!!

here the code of my master page in asp .net:

<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<asp:ContentPlaceHolder ID="Ajax" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
<title>GmAhpWeb</title>
<%= Session("BROWSER")%>
</asp:ContentPlaceHolder>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Scripts/jquery.mobile-1.0b1.min.css" />
<script src="../../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.mobile-1.0b1.min.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
color: #FFFFFF;
}
</style>
</head>
<body>

in the red part, i put the head of my page :

<asp:Content ID ="Ajax" ContentPlaceHolderID ="Ajax" runat="server">
<script language="javascript" type="text/javascript" src="../../plugins/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.donutRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.funnelRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../../plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// initialisation des donnÃ©es
var serie = [[1, 100], [2, 92], [3, 110], [4, 130], [5, 144]];
courbe = $.jqplot('conteneur', [serie], {
title: 'Courbe d\'Ã©volution des visites',
axes: {
xaxis: {
ticks: [[1, '16/06/2010'], [2, '17/06/2010'], [3, '18/06/2010'], [4, '19/06/2010'], [5, '20/06/2010']]
},
yaxis: {
ticks: [75, 100, 125, 150]
}
}
});
});
</script>
</asp:Content>

if a disable the jquerymobile i get my chart, in the other case i lose my chart !!!!