2009-09-02 2 views
6

Я загрузки страниц асинхронно с функцией загрузки JQuery, как это:JQuery вопрос нагрузки

tree.click(function() { 
       if ($(this).hasClass("file")) { 
        tree.removeClass("selected"); 
        $(this).addClass("selected"); 
        content.load("content/"+this.id+".html"); 
        contentContainer.effect("highlight"); 
        SyntaxHighlighter.all(); 
       }       
      }); 

Одним из внешних страниц выглядит следующим образом:

<pre class="brush: java;"> 
    /** 
    * The HelloWorldApp class implements an application that 
    * simply prints "Hello World!" to standard output. 
    */ 
    class HelloWorldApp { 
     public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
     } 
    } 
</pre> 

ныне SyntaxHighlighter.all (); вызов функции tree.click() сверху должен отображать предварительный блок с подсветкой синтаксиса, но при загрузке файла с предварительным блоком через функцию jQuery load() это не работает.

Когда я перекодировал pre-блок в содержимое div основного файла, он действительно работает.

Любые идеи?

Спасибо за ответы. Я понимаю часть обратного вызова, и я реализовал вызов SyntaxHighlighter.all() в обратном вызове функции загрузки сейчас, но все равно не повезло ...

Я добавлю 2 полных файла, так как они довольно маленькие в размере atm.

index.php:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>braindump</title> 
    <link type="text/css" href="css/style.css" rel="stylesheet" /> 
    <link type="text/css" href="css/jquery.treeview.css" rel="stylesheet" /> 
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script> 
    <script type="text/javascript" src="jquery/jquery.treeview.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shCore.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shBrushJava.js"></script> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shCore.css"/> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shThemeDefault.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var tree = $("#tree li"); 
      var contentContainer = $("#contentContainer"); 
      var content = $("#content"); 

      SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.0.320/scripts/clipboard.swf'; 
      SyntaxHighlighter.all(); 

      // Treeview 
      $("#tree").treeview({ 
       persist: "location", 
       collapsed: true 
      }); 

      tree.click(function() { 
       if ($(this).hasClass("file")) { 
        tree.removeClass("selected"); 
        $(this).addClass("selected"); 
        content.load("content/"+this.id+".html", function() { 
         contentContainer.effect("highlight"); 
         SyntaxHighlighter.all(); 
        }); 
       }       
      }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 

     </div> 

     <div id="leftMenu" class="thinDottedBorder"> 
      <div class="min500px"></div> 
      <ul id="tree" class="filetree"> 
       <li> 
        <span class="folder selectable">Design Patterns</span> 
        <ul> 
         <li id="softwareengineering/designpatterns/decorator" class="file"><span class="file selectable">Decorator Pattern</span></li> 
         <li id="softwareengineering/designpatterns/visitor" class="file"><span class="file selectable">Visitor Pattern</span></li> 
         <li id="softwareengineering/designpatterns/chainofresponsibility" class="file"><span class="file selectable">Chain of Responsibility</span></li> 
        </ul> 
       </li> 
       <li> 
        <span class="folder selectable">Design Principles</span> 
        <ul> 
         <li></li> 
        </ul> 
       </li> 
      </ul> 
      <div class="clear"></div> 
     </div> 

     <div id="contentContainer" class="thinDottedBorder"> 
      <div class="min500px"></div> 
      <div id="content"> 
       <pre class="brush: java;"> 
/** 
* The HelloWorldApp class implements an application that 
* simply prints "Hello World!" to standard output. 
*/ 
class HelloWorldApp { 
    public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
    } 
} 
</pre> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</body> 

и другой файл:

<pre class="brush: java;"> 
/** 
* The HelloWorldApp class implements an application that 
* simply prints "Hello World!" to standard output. 
*/ 
class HelloWorldApp { 
    public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
    } 
    } 
</pre> 

обратите внимание, что изначально жёстко предварительно блок правильно оказываемая SyntaxHighlighter.all(), но то в обратном вызове функции загрузки не работает.

+0

на рискуя как идиот, вы имели в виду contentContainer.ef fect ("изюминка"); или content.effect («выделить»); – karim79

+0

действительно ли вызов, который нужно выделить, до загрузки содержимого? например было бы лучше, как обратный вызов загрузки содержимого? – scunliffe

ответ

25

SyntaxHighlighter.all связывается с событием window.onload, которое срабатывает только один раз.

Чтобы синтаксически выделить после загрузки страницы, используйте highlight функцию вместо:

content.load("content/"+this.id+".html", function() { 
    // this is executed after the content is injected to the DOM 
    contentContainer.effect("highlight"); 
    SyntaxHighlighter.highlight(); 
});

пальцы скрещены, что работает, если нет (на основе глядя на код), вы, возможно, придется бросить в некоторые явные аргументы (где {} является пустым набором параметров конфигурации, и this будет content при вызове из Аякса обработчика нагрузки):


    SyntaxHighlighter.highlight({}, this); 
+0

извините за толкание, я просто попробовал Syntaxhighlighter.highlight(); и он отлично работает! но я получаю предупреждение(), когда сервер добавлен текст, говоря: brush js не найден или что-то в этом роде. могу ли я отключить это сообщение? –

+0

@searlea: спасибо, что вы меня спасли, поэтому я проголосую !! – Devima

0

Вам нужно позвонить, что в функции обратного вызова для загрузки:

content.load("content/"+this.id+".html",function() { 
    SyntaxHighlighter.all(); 
    }); 

load асинхронный так счастливо продолжается вдоль выполнения операторов в то время как запрос GET выполняется в фоновом режиме.

Смежные вопросы