Javascript in HTML not working when Panel is used within a Wicket ModalWindow

Question

I have several panels that I'm displaying in a ModalWindow. In the html files of those panels I have script-tags in the body, e.g. for SyntaxHighlighter or a JW Player. Those tags work if I embed the panel into its own page. However, they are NOT working when the panel is embedded into a ModalWindow.

Example for a panel (html-file) that displays text which is supposed to be processed by SyntaxHighlighter (this is in the body-tag):

<wicket:panel>
  <pre wicket:id="content"></pre>
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
 </wicket:panel>

I already tried many different things, e.g.

super.show(target);
target.appendJavaScript("SyntaxHighlighter.all();")

in the overridden "show()"-method of ModalWindow. I also played around with 'renderOnDomReadyJavascript', 'renderOnLoadJavascript' etc., but I guess it has to be embedded in the body-tag anyway... I just can't get it to work.

It's working if I embed the panel into a page and put that page into the ModalWindow instead of the panel, but I want to avoid that because it's not necessary and results in scrolling issues. Thanks for any hints!

EDIT: Quickstart-Example which shows the problem: Download

Answer 1

The solution to this problem is illustrated in this other answer. Method highlight() must be used in place of all().

Answer 2

I think the problem is that when you work with panels you don't have the used JavaScript function properly declared. In other words object SyntaxHighlighter is not defined in your example when you use the embedded directly into ModalWindow. Check panel's page to see if it defines some JavaScript library used by tour panel.