StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20459433
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-08T21:37:19.110
FavoriteCount
0
LastActivityDate
2014-06-03T09:48:12.490
LastEditDate
2014-06-03T09:48:12.490
LastEditorUserId
1771795
OwnerUserId
1771795
ParentId
20457195
PostTypeId
2
Score
11
ViewCount
0
LastEditorDisplayName
text
Body
<blockquote> <h1>Update:</h1> <h2>jQuery Mobile 1.4</h2> </blockquote> <h3>The following events are deprecated and will be removed on jQuery Mobile 1.5:</h3> <ol> <li><a href="http://api.jquerymobile.com/pageshow/" rel="nofollow noreferrer"><code>pageshow</code></a> <ul> <li>Replacement: <a href="http://api.jquerymobile.com/pagecontainer/#event-show" rel="nofollow noreferrer"><code>pagecontainershow</code></a></li> <li>Usage: It is used to retrieve <code>id</code> of previous page. <pre><code>$(document).on("pagecontainershow", function (e, ui) { var previous = ui.prevPage; }); </code></pre></li> <li>This event cant be attached to a specific page ID.</li> <li>Recommendation: Use <a href="http://api.jquerymobile.com/pagebeforeshow/" rel="nofollow noreferrer"><code>pagebeforeshow</code></a> instead to attach event to specific pages. <blockquote> <a href="http://jsfiddle.net/Palestinian/YTj23/" rel="nofollow noreferrer">Demo</a> </blockquote></li> </ul></li> <li><a href="http://api.jquerymobile.com/pagehide/" rel="nofollow noreferrer"><code>pagehide</code></a> <ul> <li>Replacement: <a href="http://api.jquerymobile.com/pagecontainer/#event-hide" rel="nofollow noreferrer"><code>pagecontainerhide</code></a></li> <li>Usage: It is used to retrieve <code>id</code> of next page. <pre><code>$(document).on("pagecontainerhide", function (e, ui) { var next = ui.nextPage; }); </code></pre></li> <li>This event cant be attached to a specific page ID.</li> <li>Recommendation: Use <a href="http://api.jquerymobile.com/pagebeforehide/" rel="nofollow noreferrer"><code>pagebeforehide</code></a> instead to attach event to specific pages. <blockquote> <a href="http://jsfiddle.net/Palestinian/YTj23/" rel="nofollow noreferrer">Demo</a> </blockquote></li> </ul></li> <li><a href="http://api.jquerymobile.com/pageinit/" rel="nofollow noreferrer"><code>pageinit</code></a> <ul> <li>Replacement: <a href="http://api.jquerymobile.com/pagecreate/" rel="nofollow noreferrer"><code>pagecreate</code></a></li> </ul></li> </ol> <hr> <blockquote> <h2>jQuery Mobile 1.3.2 and below</h2> Some events are deprecated, check update </blockquote> <h3>Introduction:</h3> jQuery Mobile uses Ajax navigation to load pages/views into DOM (pagecontainer), enhance (style) them and then display them on request. A page goes through many steps (page events) from the time it gets inserted into DOM until it's removed. This applies to both models, Single-Page and Multi-Page. <h3>Events:</h3> I will go through essential events and most used ones in their sequential order. <ul> <li><code>mobileinit</code>: (1) The very first event that fires when a website using jQM is loaded. jQM consists of many widgets that have default options. Those widgets are not initiated during that event, therefore, you can override Global Settings / defaults of those widgets once this event fires. <blockquote> Important: Your code should go after jQuery.js and before jQM.js to successfully change defaults. </blockquote> <pre><code><script src="jQuery.js"></script> <script> $(document).on("mobileinit", function () { $.mobile.page.prototype.options.theme = "b"; // set theme "b" to all pages }); </script> <script src="jQuery-Mobile.js"></script> </code></pre></li> <li><code>pagebeforecreate</code> and <code>pagecreate</code>: (1) These events are almost the same. During them widgets auto-initialize and start enhance contents markup. They are useful to override widget's defaults of a specific element(s). <pre><code>$(document).on("pagecreate", "[data-role=page]", function () { $(".selector").listview({ icon: "star" }); // changes list items icons to "star" }); </code></pre></li> <li><code>pageinit</code>: (1) (4) This is similar to <code>.ready()</code> and it fires once per page when it's fully initialized and styled but still not viewed. Use it to bind events to that page being initialized. If you don't specify a page, you will get muliple events every time <code>pageinit</code> occurs. <pre><code>$(document).on("pageinit", "#myPage" , function () { $(this).on("swipeleft", function () { // code }); }); </code></pre></li> <li><code>pagebeforechange</code>: (2) It fires twice for a page that not has been viewed before and once for a cached/viewed page. It omits an object of data <code>toPage</code> and <code>options</code>, they contain all details related to the page that will be viewed. It's very useful to know the user came from page X and going to page Y. During this event, you can prevent the user from viewing page Y and take him to page Z. <pre><code>$(document).on("pagebeforechange", function (e, data) { if(data.toPage[0].id == "Y") { $.mobile.changePage("Z"); e.preventDefault(); // don't update $.mobile.urlHistory } }); </code></pre></li> <li><code>pagebeforehide</code>: (3) It triggers on the current active page X but before page transition / animation takes place.</li> <li><code>pagebeforeshow</code>: (3) It triggers on the page Y that will be shown after the current page but still no transition / animation.</li> <li><code>pageshow</code>: (3) (4) Transition / animation is done and page Y is shown.</li> <li><code>pagehide</code>: (3) (4) Transition / animation is done on page X and it's hidden.</li> </ul> <blockquote> <a href="http://jsfiddle.net/Palestinian/SjPLn/" rel="nofollow noreferrer">Demo</a> </blockquote> <hr> <h3>Diagrams (jQM 1.4) (5)</h3> <blockquote> <img src="https://i.stack.imgur.com/aUlJs.png" alt="Multi-Page Model"> </blockquote> <hr> <blockquote> <img src="https://i.stack.imgur.com/AptHD.png" alt="Single Page Model"> </blockquote> (1) Fires once. (2) Fires twice for new page and once for cached page. (3) Fires whenever it occurs. (4) Deprecated as of jQM 1.4 and will be removed on jQM 1.5 (5) Resource: PageContainer Events <a href="http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/" rel="nofollow noreferrer">link 1</a> & <a href="http://jqmtricks.wordpress.com/2014/05/23/jquery-mobile-page-events-extra/" rel="nofollow noreferrer">link 2</a>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POSetting up the jQuery Mobile script
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USOmar
UserOwnerUserId
1. USOmar
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POSetting up the jQuery Mobile script
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

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.