CODEWITHSUNDEEP
asp.netjquery-mobile
Matt Stone
Matt Stone

Reputation: 281

Multi page template in jquery mobile

I create my pages using multi page template, I read that only start page(e.g index.aspx) still remain in Dom in each pages when loading. but now in my other page(e.g child.aspx) which is a child of page parent.aspx, I can see dom element of parent.aspx page. the breadcrumb is as follow: Index--->parent--->child, maybe I should see only the index dom content not parent. this make me wonder why the page is like this and how I can handle it.Thanks

update:

I just want to reload every page on each showing, I mean clearing the DOM completely and loading content from the beginning. Like when you push ctrl+f5 and load page without cache. Is this possible in JQM?

Index.aspx:

    <form id="form1" runat="server" dir="rtl">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
            <ContentTemplate>
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <uc2:MblMyMessageBox ID="MblMyMessageBoxInfo" runat="server" ShowCloseButton="true" /> 
    <div data-role="page" id="home"> 
        <div data-role="header">
            <h1>header</h1>
        </div>
        <div data-role="content">   
            <ul data-role="listview" data-inset="true" data-filter="false">
                <li data-icon="false"><a href="AccountStatus.aspx">AccountStatus</a></li>
                <li data-icon="false"><a href="ConfirmPayment.aspx">ConfirmPayment</a></li>
            </ul>   
        </div>
    </div>
            </ContentTemplate>
    </asp:UpdatePanel>
</form>

AccountStatus.aspx:

 <div data-role="page" id="accountStatus">
    <div data-role="header">
        <h1>Header</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" data-filter="false">
            <li data-icon="false"><a href="BalancePage.aspx" data-prefetch="true">balance</a></li>
            <li data-icon="false"><a href="InvoicePage.aspx">invoice</a></li>
        </ul>           
    </div><!-- /content -->
    <div data-role="footer">
        <p><a href="Index.aspx">back</a></p>
    </div><!-- /footer -->
 </div><!-- /page -->

removing content of index from accountStatus page dom element is my purpose.

Upvotes: 0

Views: 691

Answers (1)

Calavoow
Calavoow

Reputation: 492

All pages that the user has navigated to will be added to the dom. See the documentation. However jQM also has a mechanism to keep the DOM from getting to big and slowing down the browser. It may or may not remove old elements from the DOM. I would advice you not to trust on DOM elements getting removed automatically. If you really want to remove the page you are navigating away from, you can bind for example the following:

$(document).one("pageshow",function(){
     $(document).one("pagehide",function(){
          $("#pageId").remove();
     });
});

Where pageId is the id you give to the <div data-role="page" id="pageId">.

Edit for the updated question: To reload the whole page when following links:

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition.

Source: jQuery Mobile Docs

Or you can change it with the following global variable:

$.mobile.ajaxEnabled = false;

Upvotes: 2

Related Questions