SyntaxHighlighter with $().load Not Working

Question

Edit: Editing for clarity and actual use. Actual use might even make this situation easier?

I'm building a style guide and I want to include source code to the common styles/patterns for people who will be using the guide. My plan is to abstract out all the heavy HTML code modules into external files and pull them in using jQuery then use SyntaxHighlighter to highlight what's being presented on the screen. The HTML below shows my intent and what I'd like to do.

I've removed all JavaScript for now since it doesn't add any value to the question at hand. I'll update with anything I come up with.

<div class="sg-section">
    <div class="sg-section-body">
        <div data-load="markup/pagination.html"></div>
    </div>
    <div class="sg-section-code">
        <small>Source Code</small>
        <pre class="brush: js">
            <!-- This is where I want to print out the contents  -->
            <!-- of the 'sg-section body' above and show it's source -->
        </pre>
    </div>
</div>

I can get the data loaded with a simple $('[data-load]'.each(); statement, but I'm having a hard time printing the result out into sg-section-code and getting it hightlighted.

Conclusion: Switched to Prism. Works beautifully.

Sean · Accepted Answer · 2014-02-08T05:32:06.317

1

Edited:

  function loadScript(placeholder){
    var $p = $(placeholder);
    var deferred = $.Deferred();
    $p.load($p.attr('data-load'),function(response){
        $p.parent().append(response).end().remove();   
        deferred.resolve();
    });
    return deferred;
}

to remove the placeholder and insert your code from external html directly, this should solve your problem that only display the placeholder instead of real code.

your problem is that load is an async method, and you don't know when to call SyntaxHighlight.all();

so, the solution come into my head is use jQuery.Deferred object. let load tell you when it fininsh loading all external scripts.

first extract the method loadScript

function loadScript(placeholder){
  var $p = $(placeholder);
  var deferred = $.Deferred();
  $p.load($p.attr('data-load'),function(){
    deferred.resolve();
  });
  return deferred;
}

then push all the task into an array, finally use $.when().then() to notify when all the script has been loaded, then call SyntaxHighlighter.all();

$(function(){
  var q = [];
  $('[data-load]').each(function(item){
    q.push(loadScript(item));
  });
  $.when.apply($, q).done(function(){
    SyntaxHighlighter.all();
  });
});

edited Feb 08 '14 at 05:32

answered Feb 08 '14 at 02:16

Sean

2,990
1
21
31

unfortunately when I try this, I just get `
` returned twice through SyntaxHightlighter. This is what happened when I tried to use `$().load("test.html", function(response){ ... });` since `load`'s second parameter is a callback method if I'm not mistaken. – EHorodyski Feb 08 '14 at 02:36
1

[jsfiddler](http://jsfiddle.net/xujihui1985/eQ5f8/) sorry try loadScript(this) instead of item – Sean Feb 08 '14 at 02:40
1

yes, the second parameter is a callback which will be called when it successfully load from remote, and `deferred.resolve();` to indicate it finish loading – Sean Feb 08 '14 at 02:45
1

$.when is a method to wait until all defererd object resolved and it will kickoff the callback in it's done() method, so my idea is to wait until all external html loaded then kickoff SyntaxHighlighter.all() – Sean Feb 08 '14 at 02:47
@Sean I have, but it's still not working. Tomorrow when I have the time and energy I'll try a separate HTML page without the rest of my fluff (which I excluded in my code sample above) and see if those scripts alone make it work then figure out how to implement it in the rest of my code. – EHorodyski Feb 08 '14 at 04:02
1

@AmitJoki yes what's the problem? – Sean Feb 08 '14 at 05:04
1

@AmitJoki have you debugged into `SyntaxHighlighter.all()` to see what it did before use the 'complete callback' of $.load? – Sean Feb 08 '14 at 05:15
1

it's funny someone give me a downvote, if you thought your solution is better just show your code – Sean Feb 08 '14 at 05:51
@Sean, I upvoted you :-). We're getting there...the code renders correctly but SyntaxHighlighter won't syntax highlight it! I still haven't tried isolating the code though...maybe later today if I get some time. You're help is very much appreciated. – EHorodyski Feb 08 '14 at 17:28
We're so close. I had it running once but it didn't work on a refresh. I think the issue is that deferred doesn't have the function assigned to it? – EHorodyski Feb 09 '14 at 00:03
1

let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47102/discussion-between-sean-and-ehorodyski) – Sean Feb 09 '14 at 01:17

score 0 · Answer 2 · edited Feb 09 '14 at 16:26

0

$(document).ready(function(){

    // Get Markup Pages
    $("[data-load]").each(function (index) {
        $(this).load($(this).attr("data-load"),function(){SyntaxHighlighter.all()});
    });
});

This should work, as SyntaxHighlighter.all(); is executed after test.html is loaded

edited Feb 09 '14 at 16:26

BenMorel

34,448
50
182
322

answered Feb 08 '14 at 03:30

Amit Joki

58,320
7
77
95

@EHorodyski, I don't think so, its given in jquery docs. Look at here https://api.jquery.com/load/ – Amit Joki Feb 08 '14 at 04:04
@AmitJoki do you realize `SyntaxHighlighter.all()` will be called everytime in the loop? if there are 10 elements, it will be called 10 times while 'SyntaxHighlighter.all()' this method should only be called once, don't you think this is terrible? – Sean Feb 08 '14 at 05:07
@AmitJoki don't think problem too easy, your solution work, not good – Sean Feb 08 '14 at 05:08

SyntaxHighlighter with $().load Not Working

2 Answers2