jquery - Why does this javascript run locally but not on a web server?

I have the following Javascript/jQuery on my page:

<script>
 $("#mymarkdown").load("./LPInfo.md");
 var md = markdown.toHTML($("#mymarkdown").html());
 $("#mymarkdown").html(md);
</script>

That page is here:

.html

The page uses bootstrap. I've looked and see no errors in the console when rendering the code.

As you can see, it is not doing what I want, which is using markdown.js to render the contents of a file into HTML.

Here's the weird part, and the root of my question:

If I open the page as a local file, Chrome does nothing. IE9 will open and properly render the page, but only after I give permission to run the script.

Both browsers fail to render the page correctly using the above link. Firefox has the same result.

I confess to being pretty much of a n00b on all this, but I'm at a loss to explain the inconsistent behavior. I understand that the code is accessing a local file, but that shouldn't be a problem when accessed via the web server, right?

Anyway, and help will be appreciated.

UPDATE: Here's the code for the page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>LeanTed Markdown Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src=".js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-preposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-preposed.png">
    <link rel="apple-touch-icon-preposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-preposed.png">
    <link rel="apple-touch-icon-preposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-preposed.png">
    <link rel="apple-touch-icon-preposed" href="../assets/ico/apple-touch-icon-57-preposed.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">LeanTed Markdown Editor</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="hero.html">Home</a></li>
              <li class="active"><a href="#">About</a></li>
              <li><a href=".aspx">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div id="mymarkdown"></div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

    <script src="markdown.js"></script>


    <script>
     $("#mymarkdown").load("./LPInfo.md");
     var md = markdown.toHTML($("#mymarkdown").html());
     $("#mymarkdown").html(md);
    </script>

  </body>
</html>

I have the following Javascript/jQuery on my page:

<script>
 $("#mymarkdown").load("./LPInfo.md");
 var md = markdown.toHTML($("#mymarkdown").html());
 $("#mymarkdown").html(md);
</script>

That page is here:

http://www.nickhodges./LeanTed/bootstrap/about.html

The page uses bootstrap. I've looked and see no errors in the console when rendering the code.

As you can see, it is not doing what I want, which is using markdown.js to render the contents of a file into HTML.

Here's the weird part, and the root of my question:

If I open the page as a local file, Chrome does nothing. IE9 will open and properly render the page, but only after I give permission to run the script.

Both browsers fail to render the page correctly using the above link. Firefox has the same result.

Anyway, and help will be appreciated.

UPDATE: Here's the code for the page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>LeanTed Markdown Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-preposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-preposed.png">
    <link rel="apple-touch-icon-preposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-preposed.png">
    <link rel="apple-touch-icon-preposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-preposed.png">
    <link rel="apple-touch-icon-preposed" href="../assets/ico/apple-touch-icon-57-preposed.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">LeanTed Markdown Editor</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="hero.html">Home</a></li>
              <li class="active"><a href="#">About</a></li>
              <li><a href="http://www.nickhodges./contact.aspx">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div id="mymarkdown"></div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

    <script src="markdown.js"></script>


    <script>
     $("#mymarkdown").load("./LPInfo.md");
     var md = markdown.toHTML($("#mymarkdown").html());
     $("#mymarkdown").html(md);
    </script>

  </body>
</html>

Share Improve this question edited Nov 19, 2012 at 23:19 asked Nov 19, 2012 at 23:14 Nick Hodges 17.1k12 gold badges71 silver badges135 bronze badges

did you upload LPInfo.md to the remote server? – Matt Commented Nov 19, 2012 at 23:16
Can you post the about.html code. – David Lloyd Brookes Commented Nov 19, 2012 at 23:18
@Matt -- yes, the file is there. It actually shows as raw, unrendered markdown. – Nick Hodges Commented Nov 19, 2012 at 23:18
nickhodges./LeanTed/bootstrap/lpinfo.md – David Lloyd Brookes Commented Nov 19, 2012 at 23:19
@DavidLloydBrookes -- HTML uploaded. Thanks. – Nick Hodges Commented Nov 19, 2012 at 23:20

Add a ment |

3 Answers 3

Sorted by: Reset to default 9

The problem is that you're trying to run markdown.toHTML on the contents of #mymarkdown before it has fully loaded into the DOM (load being asynchronous). Use the "plete" callback of load and it works:

$("#mymarkdown").load("./LPInfo.md", function() {
   var md = markdown.toHTML($("#mymarkdown").html());
   $("#mymarkdown").html(md);
});

(The reason it works locally is probably because lpinfo.md is loaded near-instantaneously, either because 1. an Ajax call to the localhost is extremely fast, or 2. your browser already has the file from localhost cached.)

Do it like so:

$(function () {
    $.get( './LPInfo.md', function ( data ) {
        $( '#mymarkdown' ).html( markdown.toHTML( data ) );
    });
});

So, the code is inside a DOMContentLoaded handler to make sure that the DOM is ready (since you're injecting content into it). Also, $.get is the appropriate retrieval mechanism here. You're doing a .load() which doesn't make much sense in your situation.

What you're doing with .load():

getting the MD file via Ajax,
inserting its contents into the DOM,
retrieving that content from the DOM,
processing the content with Markdown,
inserting the resulting HTML source code into the DOM.

What my code is doing:

getting the MD file via Ajax,
processing its contents with Markdown,
inserting the resulting HTML source code into the DOM.

Have a look at this or that question on how to enable local file system access via XHR.

Your actual problem is that .load() does only start the asynchronous load of the file. But even before it is loaded, you get the HTML content (likely empty?) and render it as markdown. Soon after, the element will get overwritten from the ajax callback. Use the callback parameter!

And don't use load at all if you are not loading HTML. jQuery has a powerful ajax function on which you even could set up a Markdown2html converter which is automatically used when a markdown file is served and html is wanted:

$.ajaxSetup({
    accepts: {
        "markdown": "text/x-markdown" // MIME type
    },
    contents: {
        "markdown": /markdown/ // MIME type matcher
    },
    converters: {
        "markdown html": markdown.toHTML
    }
});

But for your purpose, just use a simple .ajax call:

$.ajax("./LPInfo.md").done(function(md) {
    $(function() {
        $("#mymarkdown").html(markdown.toHTML(md));
    });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Why does this javascript run locally but not on a web server? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)