CODEWITHSUNDEEP
jquery-mobiledynamicview
Admax
Admax

Reputation: 21

jQuery Mobile inject external page using URL with jquery

Im try to inject in my index some other pages like "profile.html" or "contact.html". For some pages i want to keep in memory and user can go back, and some others dont. This pages i want to load in the main index page <\div>. Can anyone give some code example? Something like that

Upvotes: 0

Views: 705

Answers (1)

Ridrog
Ridrog

Reputation: 227

What you describe as your problem, is exactly the default way how jquery-mobile loads "pages" into the DOM.

Lets build an example:

index.html

  • header with all referencesto jquery, jquery-mobile etc.
  • div with data-role="page" > #index
  • div with data-role-"page" > #page1

page2.html

  • div with data-role="page" > #page2

page3.html

  • header with all references to jQuery, jquery-mobile etc.
  • div with data-role="page" > #page3

What happen when I link from x to y ?

  1. open index.html
    • the fist div with the data-role="page" is displayed
    • in this case #index
    • Pages inside of the DOM (#index, #page1)
  2. Link from index.html(#index) to #page1
    • nothing is loaded
    • the page #page1 is shown
    • Pages inside of the DOM (#index, #page1)
  3. Link from index.html to page2.html
    • the first div with the data-role="page" from page2.html is loaded to the DOM
    • Pages inside of the DOM (#index, #page1, #page2)
    • if you reload the page, you will see a unstyled html page, because page2.html has no js or css file in the head
    • you can link to #index, #page1 and #page2 because all of them are inside of the DOM
  4. Link to page3.html with data-ajax="false"
    • The whole page3.html is loaded.
    • Pages inside of the DOM (#page3)
    • a can still link to page2.html
    • you can also link to the first page of index.html, but not the second page.

You can not load more then the first page of a multipage .html file with ajax. To load a multipage, you always have to load the .html file without ajax (data-ajax="false")

Code index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>

<body>
  <!-- Index -->
  <div data-role="page" id="index" data-title="index.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html(#index)</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#" class="ui-btn ui-state-persist ui-btn-active">Index.html</a>
      <a href="#page1" class="ui-btn">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->


  </div>
  <!-- /Index -->

  <!-- page1 -->
  <div data-role="page" id="page1" data-title="index.html#page1">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html#page1</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#index" class="ui-btn ">Index.html</a>
      <a href="#page1" class="ui-btn ui-state-persist ui-btn-active">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->


  </div>
  <!-- /page1 -->


</body>

</html>

Code of page2.html

<script>
  alert("hello from Page 2");
</script>




<!-- page2 -->
<div data-role="page" id="page2" data-title="page2.html">
  <!-- Header -->
  <div data-role="header" data-position="fixed">
    <h1>page2.html</h1>
  </div>
  <!-- /Header -->

  <!-- Content -->
  <div role="main" class="ui-content">
    <a href="#index" class="ui-btn ">Index.html</a>
    <a href="#page1" class="ui-btn">Page 1 (inside index.html)</a>
    <a href="page2.html" class="ui-btn ui-state-persist ui-btn-active">Page 2 (seperate .html file - ajax)</a>
    <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
  </div>
  <!-- /Content -->

</div>
<!-- /page2 -->

Code of page3.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

  <script>
    alert("hello from Page 3");
  </script>


</head>

<body>

  <!-- page2 -->
  <div data-role="page" id="page3" data-title="page3.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>page3.html</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="index.html" class="ui-btn ">Index.html (First page of a Multipage)</a>
      <a href="index.html#page1" class="ui-btn">Page 1 ((Second page of a Multipage))</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file - ajax)</a>
      <a href="page2.html" data-ajax="false" class="ui-btn ui-state-persist ui-btn-active">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->

  </div>
  <!-- /page2 -->
</body>

</html>

Upvotes: 2

Related Questions