Я пытаюсь загрузить вторичные коды javascript (визуализация Google) после загрузки страницы, но она просто не работает.Я должен либо обновить, либо использовать data-ajax="false", чтобы это отобразилось.
Есть ли способ, которым мы можем быть уверены, что для запуска специфичного для страницы вторичного JavaScript используется?Я пробовал такие события, как pageshow, pageinit и pagecreate, но, похоже, все они не работают с визуализацией Google (ниже приведен код, который у меня есть для этой страницы)
Что-то не так вы можете найти ниже?
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->charset(); ?>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="/img/redworks-splash-loading.png"> <!-- 320 x 460 iPhone & 1004x768 iPad-->
<link rel="apple-touch-icon" href="/img/redwerks.jpg" /> <!-- 56 x 56 in iPhone and 72 x 72 in iPad -->
<title>
<?php echo __('Hotspot Finder:'); ?>
<?php echo $title_for_layout; ?>
</title>
<?php
//echo $this->Html->css('http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css');
echo $this->Html->css('dsr');
echo $this->Html->css('http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.css');
echo $this->Html->css('ui-themes/base/jquery.ui.autocomplete');
echo $this->Html->script('http://code.jquery.com/jquery-1.6.4.min.js');
?>
<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.extend($.mobile, {
loadingMessage: 'Welcome to Hotspot Finder!',
pageLoadErrorMessage: 'Sorry, there was an error while loading!',
});
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<?php
echo $this->Html->script('http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js');
echo $this->Html->script('jquery-rotate');
echo $this->Html->script('gauge/gauge');
echo $this->Html->script('gauge/jquery.gauge');
echo $this->Html->script('ui/jquery.ui.core.min');
echo $this->Html->script('ui/jquery.ui.widget.min');
echo $this->Html->script('ui/jquery.ui.position.min');
echo $this->Html->script('ui/jquery.ui.autocomplete.min');
echo $this->Html->script('bookmark_bubble/bookmark_bubble');
echo $this->Html->script('bookmark_bubble/examples/example');
?>
</head>
<body>
<!-- Start of second page: #suburb-stats -->
<div data-role="page" id="suburb-stats" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Hotspot Finder</h1>
<a href="" data-icon="home" class="ui-btn-right" icon="white" data-iconpos="notext"></a>
</div><!-- /header -->
<div class="ui-header ui-bar-c">
<div data-role="controlgroup" data-type="horizontal">
<a style="margin-left:15px;" href="/DsrScores/suburb_stats/" data-role="button" data-theme="b" data-transition="fade">Suburb Profile</a>
<a href="/DsrScores/graphs/" data-role="button" data-theme="b" data-transition="fade">Graphs & Trends</a>
</div>
<a href="/DsrScores/add_to_favourites/" data-icon="star" data-rel="dialog" class="ui-btn-right" data-theme="b" data-iconpos="notext"></a>
</div><!-- /header -->
<div data-role="content">
<h3>Topic:</h3>
<?php echo $this->Form->create(); ?>
<select name="dsr-trend" id="dsr-trend" data-theme="b">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<h3>DSR Trend</h3>
<div id="visualization" style="text-align:center;margin-left:-40px;margin-top:-30px;"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
$('#suburb-stats').live('pageshow', function(){
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'YARRALUMLA');
data.addColumn('number', 'DEAKIN');
data.addRow(["JAN", 1, 1]);
data.addRow(["FEB", 2, 0.5]);
data.addRow(["MAR", 4, 1]);
data.addRow(["APR", 8, 0.5]);
data.addRow(["JUN", 7, 1]);
data.addRow(["JUL", 7, 0.5]);
data.addRow(["AUG", 8, 1]);
data.addRow(["SEP", 4, 0.5]);
data.addRow(["OCT", 2, 1]);
data.addRow(["NOV", 3.5, 0.5]);
data.addRow(["DEC", 3, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: <?=$width?>, height: <?=$height?>,
vAxis: {maxValue: 10},
hAxis: {maxValue: 10},
pointSize: 4,
backgroundColor: "transparent",
legend: {position: 'bottom'},
series: [{color: '#000', visibleInLegend: true},{}, {}, {color: '#f58b09', visibleInLegend: true}]
}
);
}
google.setOnLoadCallback(drawVisualization);
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
$(function() {
var data = [
{ label: "DEAKIN", category: "ACT" },
{ label: "YARRALUMLA", category: "ACT" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
});
</script>
<ul>
<li>Deakin</li>
</ul>
<h3>Suburb Comparison</h3>
<?php echo $this->Form->input('DsrScore.locality', array('label' => false));?>
<h3>Range</h3>
<?php echo $this->Form->select('DsrScore.month', array('3' => '3 Months', '6' => '6 Months', '9' => '9 Months', '12' => '12 Months'), array('empty' => false, 'value' => '12', 'data-theme' => 'b', 'id' => 'search'));?>
<?php echo $this->Form->end(); ?>
</div><!-- /content -->
</div><!-- /suburb stats -->
</body>
</html>
Я также использую Cakephp, поэтому этот код включает в себя компоновку и просмотр файла вместе, чтобы вы могли видеть всю картинку.