title: jQuery Mobile running javascript codes after page loads
body: <p>I'm trying to load secondary javascript codes (Google visualization) after page loads but it simply do not work. I have to either refresh or use <code>data-ajax="false"</code> to get this showing up.</p>
  
  <p>Is there a way we can make sure that the page specific secondary javascript to run? I've tried events such as pageshow, pageinit and pagecreate but they all not seem to work with Google Visualization (below is the code I have for the page)</p>
  
  <p>Is there anything wrong you can find below?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  
  &lt;head&gt;
      &lt;?php echo $this-&gt;Html-&gt;charset(); ?&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"&gt; 
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  
      &lt;link rel="apple-touch-startup-image" href="/img/redworks-splash-loading.png"&gt; &lt;!-- 320 x 460 iPhone &amp; 1004x768 iPad--&gt;
      &lt;link rel="apple-touch-icon" href="/img/redwerks.jpg" /&gt; &lt;!-- 56 x 56 in iPhone and 72 x 72 in iPad --&gt;
      &lt;title&gt;
          &lt;?php echo __('Hotspot Finder:'); ?&gt;
          &lt;?php echo $title_for_layout; ?&gt;
      &lt;/title&gt;
      &lt;?php
          //echo $this-&gt;Html-&gt;css('http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css');
          echo $this-&gt;Html-&gt;css('dsr');
          echo $this-&gt;Html-&gt;css('http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.css');
          echo $this-&gt;Html-&gt;css('ui-themes/base/jquery.ui.autocomplete');
  
          echo $this-&gt;Html-&gt;script('http://code.jquery.com/jquery-1.6.4.min.js');
      ?&gt;
      &lt;script type="text/javascript"&gt;
          $(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;
          });
  
      &lt;/script&gt;
      &lt;?php
          echo $this-&gt;Html-&gt;script('http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js');
          echo $this-&gt;Html-&gt;script('jquery-rotate');
          echo $this-&gt;Html-&gt;script('gauge/gauge');
          echo $this-&gt;Html-&gt;script('gauge/jquery.gauge');
  
          echo $this-&gt;Html-&gt;script('ui/jquery.ui.core.min');
          echo $this-&gt;Html-&gt;script('ui/jquery.ui.widget.min');
          echo $this-&gt;Html-&gt;script('ui/jquery.ui.position.min');
          echo $this-&gt;Html-&gt;script('ui/jquery.ui.autocomplete.min');
  
          echo $this-&gt;Html-&gt;script('bookmark_bubble/bookmark_bubble');
          echo $this-&gt;Html-&gt;script('bookmark_bubble/examples/example');
      ?&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Start of second page: #suburb-stats --&gt;
      &lt;div data-role="page" id="suburb-stats" data-theme="a"&gt;
  
  
          &lt;div data-role="header" data-position="fixed"&gt;
              &lt;h1&gt;Hotspot Finder&lt;/h1&gt;
              &lt;a href="" data-icon="home" class="ui-btn-right" icon="white" data-iconpos="notext"&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
          &lt;div class="ui-header ui-bar-c"&gt;
              &lt;div data-role="controlgroup" data-type="horizontal"&gt;
                  &lt;a style="margin-left:15px;" href="/DsrScores/suburb_stats/" data-role="button" data-theme="b" data-transition="fade"&gt;Suburb Profile&lt;/a&gt;
                  &lt;a href="/DsrScores/graphs/" data-role="button" data-theme="b" data-transition="fade"&gt;Graphs &amp;amp; Trends&lt;/a&gt;
              &lt;/div&gt;
              &lt;a href="/DsrScores/add_to_favourites/" data-icon="star" data-rel="dialog" class="ui-btn-right" data-theme="b" data-iconpos="notext"&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
          &lt;div data-role="content"&gt;
              &lt;h3&gt;Topic:&lt;/h3&gt;
              &lt;?php echo $this-&gt;Form-&gt;create(); ?&gt;
              &lt;select name="dsr-trend" id="dsr-trend" data-theme="b"&gt;
                 &lt;option value="standard"&gt;Standard: 7 day&lt;/option&gt;
                 &lt;option value="rush"&gt;Rush: 3 days&lt;/option&gt;
                 &lt;option value="express"&gt;Express: next day&lt;/option&gt;
                 &lt;option value="overnight"&gt;Overnight&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;h3&gt;DSR Trend&lt;/h3&gt;
  
              &lt;div id="visualization" style="text-align:center;margin-left:-40px;margin-top:-30px;"&gt;&lt;/div&gt;
              &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                google.load('visualization', '1', {packages: ['corechart']});
              &lt;/script&gt;
              &lt;script type="text/javascript"&gt;
              $('#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: &lt;?=$width?&gt;, height: &lt;?=$height?&gt;,
                                      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( "&lt;li class='ui-autocomplete-category'&gt;" + item.category + "&lt;/li&gt;" );
                                      currentCategory = item.category;
                                  }
                                  self._renderItem( ul, item );
                              });
                          }
                      });
                      $(function() {
                          var data = [
                              { label: "DEAKIN", category: "ACT" },
                              { label: "YARRALUMLA", category: "ACT" }
                          ];
  
                          $( "#search" ).catcomplete({
                              delay: 0,
                              source: data
                          });
                      });
                  });
              &lt;/script&gt;
              &lt;ul&gt;
                  &lt;li&gt;Deakin&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h3&gt;Suburb Comparison&lt;/h3&gt;
                  &lt;?php echo $this-&gt;Form-&gt;input('DsrScore.locality', array('label' =&gt; false));?&gt;
              &lt;h3&gt;Range&lt;/h3&gt;
                  &lt;?php echo $this-&gt;Form-&gt;select('DsrScore.month', array('3' =&gt; '3 Months', '6' =&gt; '6 Months', '9' =&gt; '9 Months', '12' =&gt; '12 Months'), array('empty' =&gt; false, 'value' =&gt; '12', 'data-theme' =&gt; 'b', 'id' =&gt; 'search'));?&gt;
                  &lt;?php echo $this-&gt;Form-&gt;end(); ?&gt;
          &lt;/div&gt;&lt;!-- /content --&gt;
      &lt;/div&gt;&lt;!-- /suburb stats --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm also using Cakephp so this code is including layout and view file combined so you can see the whole picture.</p>