Databases
StackOverflow2013
Postsdbo
POpageshow event not firing Jquery Mobile and a progress bar is seen but the page is not changed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POpageshow event not firing Jquery Mobile and a progress bar is seen but the page is not changed
    text
    copied!<p>I have a page as shown in the code below that loads properly upon changepage from another .html page. I am aware that changepage in jquery mobile means the new page gets loaded into the current DOM. So I have include the pageshow even handler inside the . But now when I try to change page I see a unending progress indicator and the changepage is not happening.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt; &lt;title&gt;Demo Mobile AUI&lt;/title&gt; &lt;!--&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="WebSocketConnection.js"&gt;&lt;/script&gt;--&gt; &lt;/head&gt; &lt;body&gt; &lt;!--MAIN SCREEN--&gt; &lt;div data-role="page" id="home"&gt; &lt;script type="text/javascript"&gt; $('#home').live('pageshow', function(event, ui) { alert("pageshow"); }); &lt;/script&gt; &lt;div data-role="header" data-position="fixed" align="center"&gt; &lt;div data-role="controlgroup" data-type="horizontal"&gt; &lt;h1&gt; &lt;a href="login.html" data-role="button" data-icon="back" data-iconpos="notext"&gt;Back&lt;/a&gt; &lt;a href="#home" data-role="button" data-icon="grid"&gt;Menu&lt;/a&gt; &lt;a href="login.html" data-role="button" data-icon="delete" &gt;Log Out&lt;/a&gt; &lt;a href="#settings" data-role="button" data-icon="gear"&gt;Settings&lt;/a&gt; &lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="content" data-theme="b"&gt; &lt;div data-role="collapsible-set"&gt; &lt;!-- Transmitter Configuration Collapsible List --&gt; &lt;div data-role="collapsible" data-collapsed="false"&gt; &lt;h3&gt;Transmitter Configuration&lt;/h3&gt; &lt;ul data-role="listview" data-inset="false"&gt; &lt;li&gt;Power: &lt;div id="power"&gt;&lt;/div&gt;&lt;/li&gt; &lt;li&gt;Set Point:&lt;/li&gt; &lt;li&gt;Reflected Power:&lt;/li&gt; &lt;li&gt;Frequency:&lt;/li&gt; &lt;li&gt; &lt;label for="preset_list" class="select"&gt;Preset:&lt;/label&gt; &lt;select name="preset_list" id="select-choice-0" data-inset="false" data-theme="a"&gt;&lt;/select&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- Tool Menu Collapsible List --&gt; &lt;div data-role="collapsible" data-collapsed="true"&gt; &lt;h3&gt;Tool Menu&lt;/h3&gt; &lt;ul data-role="listview" data-inset="false"&gt;&lt;li&gt; &lt;form action="form.php" method="post"&gt; &lt;div data-role="fieldcontain"&gt; &lt;label for="graph" class="select"&gt;Current Graph:&lt;/label&gt; &lt;select name="graph" id="select-choice-0" data-inset="false" data-theme="a"&gt; &lt;option value="spectrum"&gt;Spectrum&lt;/option&gt; &lt;option value="EqFreq"&gt;EQ Frequency Response&lt;/option&gt; &lt;option value="EqImpulse"&gt;EQ Impulse Response&lt;/option&gt; &lt;option value="EqFilter"&gt;EQ Filter Delay&lt;/option&gt; &lt;option value="lissajous"&gt;Lissajous Plot&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/form&gt; &lt;/li&gt;&lt;/ul&gt; &lt;/div&gt; &lt;!-- Transmitter Log Collapsible List --&gt; &lt;div data-role="collapsible" data-collapsed="true"&gt; &lt;h3&gt;Transmitter Log&lt;/h3&gt; &lt;/div&gt; &lt;!-- Meters Collapsible List --&gt; &lt;div data-role="collapsible" data-collapsed="true" data-inset="false"&gt; &lt;h3&gt;Meter Readings&lt;/h3&gt; &lt;ul data-role="listview" data-inset="false"&gt;&lt;li&gt; &lt;div id="checkBoxList"&gt; &lt;div data-role="collapsible" data-collapsed="true" data-inset="false"&gt; &lt;h3&gt;Controller&lt;/h3&gt; &lt;/div&gt; &lt;div data-role="collapsible" data-collapsed="true" data-inset="false"&gt; &lt;h3&gt;Exciter&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;textarea cols="40" rows="3" name="textarea" id="info_log" height="auto" width="auto"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="footer" align="center"&gt; &amp;copy; Copyright by Nautel Limited &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I have tried to find a solution to this problem, and even though I have tried many none of them has resolved the problem.</p> <p>Regards, Shreyas</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload