I have this JavaScript (with jQuery):

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('.prettyprint').text(file_contents[key]);
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
            prettyPrint();
    });
});

// Variables have been set in code not shown, irrelevant to problem.
// prettyPrint() is called everytime the #viewFileModal is shown,
// but its effect is only felt once.

So prettyPrint() is invoked every time the viewFileModal modal box (courtesy of Bootstrap) is shown, it's just that it only seems to have an effect once per page load.

I have tried menting out prettyPrint() and entering at the JS console after making the modal box appear. It indeed only has an effect the first time the box is shown (per page load).

Any ideas? I have been stuck on this a while. I also tried putting the call to prettyPrint() in the viewFile function; but the effect is the same.

Thanks a lot.

Sam.

I have this JavaScript (with jQuery):

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('.prettyprint').text(file_contents[key]);
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
            prettyPrint();
    });
});

// Variables have been set in code not shown, irrelevant to problem.
// prettyPrint() is called everytime the #viewFileModal is shown,
// but its effect is only felt once.

So prettyPrint() is invoked every time the viewFileModal modal box (courtesy of Bootstrap) is shown, it's just that it only seems to have an effect once per page load.

I have tried menting out prettyPrint() and entering at the JS console after making the modal box appear. It indeed only has an effect the first time the box is shown (per page load).

Any ideas? I have been stuck on this a while. I also tried putting the call to prettyPrint() in the viewFile function; but the effect is the same.

Thanks a lot.

Sam.

• javascript
• jquery
• modal-dialog
• prettify

• 1 what do you mean with showing just once per page load? prettyPrint is not called each time you open the modal window? did you tried to use show event, instead of shown? – Mihai Matei Commented Apr 15, 2013 at 12:18
• I mean it will only work again if I refresh the page and click a button to show the modal again. I changed shown to show and it works the same.prettyPrint() is definitely being called it just has no effect on the syntax highlighting the second or more time. – Sam Saint-Pettersen Commented Apr 15, 2013 at 12:26
• 1 before calling prettyPrint() add this line of code and see if there is any change: $('pre code').not('.prettyprint').addClass('prettyprint'); – Mihai Matei Commented Apr 15, 2013 at 12:50
• 1 Are you sure you have <pre><code> inside of #viewFileModal? You are using .text() function which, as I know, doesn't parse html code.. so you can try to use .html() instead of .text() – Mihai Matei Commented Apr 15, 2013 at 13:13
• 1 I managed to fix it. Thanks for your help, you made me see what I should change. The solution was to add the <pre class="prettyprint"> block dynamically rather than just attempt to call prettyPrint() on an existing block where only the text was changed. I will post solution underneath. – Sam Saint-Pettersen Commented Apr 15, 2013 at 13:20

3 Answers 3

Calling "prettyPrint()" adds a class to your PRE tags named "prettyPrinted" after it has been prettified. The line below will remove all instances of the "prettyPrinted" class on your page so that the prettyPrint() function can re-prettify you're PRE tags. This can be done without dynamically adding PRE tags to DIVs.

$('.prettyprinted').removeClass('prettyprinted');

Thanks to Matei. Solution was to change to be like this. That is, add whole pre dynamically rather than just text.

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('#fileblock').html('<pre class="prettyprint">' + file_contents[key] + '</pre>'); // fileblock is a div.
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
        prettyPrint();
    });
});

:)

Joseph Poff answer is correct but you have to be careful. prettPrint() wraps everything in scan tags. If you remove the prettyprinted class, you aren't removing the scan tags. Unless you are clearing the contents of your pre (or stripping out all the scan tags), every time you recall prettyPrint() you will be adding scan tags, which will wrap your old scan tags. It can get out of control really quickly.