Databases
StackOverflow2013
Postsdbo
POjQuery Mobile: Dynamically generated navbar buttons not persisting their active state
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile: Dynamically generated navbar buttons not persisting their active state
    primarykey
    data
    text
    <p>I have a very simple jQuery mobile page with a persistent navbar in the header, with buttons that link to "pages" (<em>data-role="page"</em> items).</p> <p>All works well, and the buttons on the navbar highlight as you navigate from page to page.</p> <p>My issue is that I want to dynamically generate these navbars, on the server side (in PHP). But it seems when you add a navbar using ajax, the <em>ui-btn-active</em> and <em>ui-state-persist</em> classes don't work properly, and buttons no longer highlight/persist as expected.</p> <p>Assuming I have a page with a navbar defined within it:</p> <pre><code>&lt;div data-role="page" id="settings" data-theme="a"&gt; </code></pre> <p>The simplest example I can demonstrate is replacing content like this: </p> <pre><code>var htmlContent = $("#settings").html(); $("#settings").html(htmlContent); </code></pre> <p>Doing so causes the buttons to no longer persist their active state. It's almost as if the navbar has become "disconnected" from jQuery's awareness and I need to resync up the DOM or something.</p> <p>It's interesting to note that I don't think the navbar itself is persisting properly either; although it does not transition in and out after replacing the content, page content on the replaced page appears <em>behind</em> the navbar (hence all the br's in my sample below).</p> <p>Man, I hope this makes sense :)</p> <p>Here's my entire sample... in the head tag:</p> <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &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.8.2.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8"&gt; function loadSomeHTML() { var htmlContent = $("#settings").html(); $("#settings").html(htmlContent); } &lt;/script&gt; </code></pre> <p>And here's the content from the body tag:</p> <pre><code> &lt;div data-role="page" id="welcome" data-theme="a"&gt; &lt;div data-role="header" data-position="fixed" data-id="TestPersist"&gt; &lt;div data-theme="" data-role="navbar" data-iconpos="top"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink"&gt; Schedules &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink"&gt; Settings &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content" data-theme=""&gt; This is the welcome page &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt; &lt;div data-role="page" id="schedule" data-theme="a"&gt; &lt;div data-role="header" data-position="fixed" data-id="TestPersist"&gt; &lt;div data-theme="" data-role="navbar" data-iconpos="top"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink ui-btn-active ui-state-persist"&gt; Schedules &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink"&gt; Settings &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content" data-theme=""&gt; This is the sched page &lt;input type="button" value="Replace content in settings page" onclick="loadSomeHTML();"&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt; &lt;div data-role="page" id="settings" data-theme="a"&gt; &lt;div data-role="header" data-position="fixed" data-id="TestPersist"&gt; &lt;div data-theme="" data-role="navbar" data-iconpos="top"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink"&gt; Schedules &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink ui-btn-active ui-state-persist"&gt; Settings &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content" data-theme=""&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;This is the settings page &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USShoeless
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWell, the lack of response has me concerned that either no one understands the question or my scenario is too unique. In the meantime, I will include the navbar in each of my page divs... *repeating nearly identical navbar code for each page I am using*... Seems like a step backward from a developmental point of view. But this way the navbar and buttons will persist and work correctly, and I can load dynamic content into the content divs instead of the page divs. Bah.
      singulars
      1. POjQuery Mobile: Dynamically generated navbar buttons not persisting their active state
      1. USShoeless
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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