CODEWITHSUNDEEP
jquery-mobile
SteMa
SteMa

Reputation: 3022

Loading HTML-Page with jQuery mobile

Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:

   <li><a href="#/link1.html" class="contentLink">Link1<span class="icon"></span></a></li>

The content of the link1.html page:

<!-- page -->
<div data-role="page" class="pages" id="link1">
  <!-- header -->
  <div data-role="header"> <a href="#" onClick="" class="showMenu menuBtn">Menu</a>
    <div class="headerlogo"></div>
  </div>
  <!-- /header -->
  <div data-role="headerimage" class="headerimage"><img     src="images/headerimages/bild1.jpg" /></div>
  <div data-role="content">
    <h3>Link1</h3>
    <p></p>    
  </div>
  <!-- /content -->
</div>
<!-- /page -->

When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.

What I want is: http://example.com/#link1.html

But what I get is: http://example.com/link1.html

So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.

What I am doing wrong?

Thx Stefan

Upvotes: 1

Views: 295

Answers (1)

Neil Bryson
Neil Bryson

Reputation: 309

You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.

Edit - This may actually achieve what you're trying to do. 

$(document).on('mobileinit', function () {
    $.mobile.pushStateEnabled = false;
});

Make sure the event handler is placed before jQuery Mobile is loaded.

Upvotes: 2

Related Questions