Loading HTML-Page with jQuery mobile

Question

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

Neil Bryson · Accepted Answer · 2012-07-30 11:25:33Z

2

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.

edited Jul 30, 2012 at 11:25

answered Jul 27, 2012 at 10:49

Neil Bryson

3072 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SteMa Over a year ago

Hi! Thank you for your answer. Would be nice and clean if I could do this without having these files included in the head. Is there no chance to tell jQuery mobile not to remove the hash (#) ?

Collectives™ on Stack Overflow

Loading HTML-Page with jQuery mobile

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related