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

Question

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.com/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.

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="http://html5shim.googlecode.com/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-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.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.com/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.com/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>

@Matt -- yes, the file is there. It actually shows as raw, unrendered markdown. — Nick Hodges, Nov 19 '12 at 23:18

McGarnagle · Accepted Answer · 2012-11-20T00:43:48.697

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 "complete" 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.)

edited Nov 20 '12 at 00:43

answered Nov 19 '12 at 23:20

McGarnagle

101,349
31
229
260

4

I think that is some kind of record. I can't accept your answer yet because it hasn't been 6 minutes, apparently. ;-) It works great. Thanks so much. – Nick Hodges Nov 19 '12 at 23:24
1

@NickHodges - I thought it is 9 minutes... o.O – Derek 朕會功夫 Nov 19 '12 at 23:37
Yeah, it was 6 minutes left, meaning I asked my question, got an answer, and put in the fix in 3 minutes. :-) – Nick Hodges Nov 19 '12 at 23:39

Šime Vidas · Answer 2 · 2012-11-19T23:28:06.657

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.

score 1 · Answer 3 · edited May 23 '17 at 11:43

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));
    });
});

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

3 Answers3