Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Allow local browsing of the docs without a web server #3117

Closed
wants to merge 5 commits into from

3 participants

@eddiemonge

No description provided.

@eddiemonge

Potential fix for #3113
This may affect phonegap since i think it uses: file:// but im not sure.

@toddparker

I don't think we should disable AJAX is browsing locally if we can avoid it. I'd prefer to add in the URL fix here, but leave AJAX on and add in the messaging about the server requirement. Otherwise, you won't see transitions and other important features.

@eddiemonge

How about an automatic ajax check to see if it should be disabled?

docs/_assets/js/jqm-docs.js
((5 lines not shown))
\ No newline at end of file
+});
+
+
+// Turn off AJAX for local file browsing
+if ( location.protocol.substr(0,4) === 'file' ||
+ location.protocol.substr(0,11) === '*-extension' ||
+ location.protocol.substr(0,6) === 'widget' ) {
+ $( function() {
+ // Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
+ // Start with links with only the trailing slash, and then move on to the ones that start with ..
+ $( "a" )
+ .filter( "[href='/']" ).attr( "href", "/index.html" ).end()
+ .filter( "[href^='..']" ).filter( "[href$='/']" ).each(function() {

I think we also need to do this on changePage when the ajax requests are working for these protocols to alter new links. Sorry I didn't think of this earlier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@johnbender

@eddiemonge

@toddparker and I were thinking a big yellow warning that sits above the content (ie a direct descendant of body) and uses the warning css (http://jquerymobile.com/demos/1.0/docs/api/events.html at the top) added from the js here should be fine.

@toddparker

@johnbender - simple mockup of the yellow bar of doom (and helpful information) here:
http://jsbin.com/amixum/9/edit

Content isn't right if we auto disable ajax, but that's the style.

@johnbender

@eddimonge

I pulled your changes and I'm working on adding the warning (almost done), though I'm still unclear on why we need to index.html to anything other than the links with a trailing slash. I have a feeling I'm missing some corner case you've accounted for.

@eddiemonge

@johnbender Since its adding it to all links on the page, I was account for the following examples:

  • href="/"
  • href="../"
  • href="../../" and any number of ../ added in.

However, there may also be external links that added in like:

  • href="twitter.com/"
  • href="jquerymobile.com/test/"
  • href="google.com"

So the first check tests for a single slash, which is safe and easy to do.
The second check looks for starting ".." and also has to end in /:

  • href="../docs/"
  • href="../demos/"

One link style I forgot about is the non-trailing slash ones:

  • href="../docs"
  • href="../demos"

Other links:

  • href="../docs/.."
  • href="../demos/.."

  • href="../docs.html"

  • href="../demos.html"
@eddiemonge

@johnbender @toddparker I added in more url rewrites and the warning message. I have it appending to the footer of the page. I can change it to somewhere else if need be.

@toddparker
@eddiemonge

Pull from my repo or copy the jqmdocs.js file into your source, make docs, unzip and test

@johnbender

@eddiemonge @toddparker

I'll pull eddie's latest and add the pagechange binding that I created on my end tomorrow morning.

@johnbender

changes pushed

@johnbender johnbender closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 60 additions and 2 deletions.
  1. +60 −2 docs/_assets/js/jqm-docs.js
View
62 docs/_assets/js/jqm-docs.js
@@ -30,7 +30,7 @@ $('div').live('pagecreate',function(event){
//collapse page navs after use
$(function(){
$('body').delegate('.content-secondary .ui-collapsible-content', 'click', function(){
- $(this).trigger("collapse")
+ $(this).trigger("collapse");
});
});
@@ -52,4 +52,62 @@ function setDefaultTransition(){
$(function(){
setDefaultTransition();
$( window ).bind( "throttledresize", setDefaultTransition );
-});
+});
+
+
+// Turn off AJAX for local file browsing
+if ( location.protocol.substr(0,4) === 'file' ||
+ location.protocol.substr(0,11) === '*-extension' ||
+ location.protocol.substr(0,6) === 'widget' ) {
+ $( function() {
+ // Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
+ // Start with links with only the trailing slash, and then move on to the ones that start with ..
+ $( "a" )
+ .filter( "[href='/']" ).attr( "href", "/index.html" ).end()
+ .filter( "[href^='..']" ).each(function() {
+ var href = $( this ).attr( "href" ),
+ append = "";
+
+ if ( href.substr(-2, 2) === '..' ) {
+ append = "/index.html";
+ }
+ else if ( href.substr(-1, 1) === '/' ) {
+ append = "index.html";
+ }
+ else if ( href.substr(-4, 4) !== 'html' ) {
+ append = "/index.html";
+ }
+ else if ( href.substr(-2, 2) === '..' ) {
+ append = "/index.html";
+ }
+
+ this.href = href + append;
+ });
+ });
+
+ // Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
+ $.ajax({
+ url: '.',
+ async: false,
+ isLocal: true
+ }).error(function() {
+ // Ajax doesn't work so turn it off
+ $( document ).bind( "mobileinit", function() {
+ $.mobile.ajaxEnabled = false;
+
+ var message = $( '<div>' , {
+ "class": "ui-footer ui-bar-e",
+ "style": "overflow: auto"
+ });
+
+ message
+ .append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
+ .append( "<p>The AJAX-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers such as Chrome. If you see an error message when you click a link, try a different browser or <a href='https://github.com/jquery/jquery-mobile/wiki/Downloadable-Docs-Help'>view help</a>.</p>" );
+
+ $( document ).bind( "pagecreate", function() {
+ $( "div.ui-page" ).append( message );
+ });
+ });
+ });
+}
+
Something went wrong with that request. Please try again.