2009-09-02 21 views
6

jestem ładowanie strony asynchronicznie z funkcją ładowania jQuery, tak:jquery obciążenia problem

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

Jedna ze stron zewnętrznych wygląda następująco:

<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> 

teraz SyntaxHighlighter.all (); wywołanie funkcji tree.click() od góry powinno renderować przedrostek z ładnym podświetlaniem składni, ale przy ładowaniu pliku z blokiem przednim za pomocą funkcji load() jQuery to nie działa.

Kiedy jednak koduję blok wstępny do elementu głównego pliku, to działa.

Jakieś pomysły?

Dzięki za odpowiedzi do tej pory. Rozumiem część oddzwaniania i zaimplementowałem wywołanie syntaxHighlighter.all() w wywołaniu funkcji ładowania teraz, ale wciąż nie ma szczęścia ...

Dołączę 2 kompletne pliki, ponieważ są raczej małe w wielkości 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> 

a drugi plik:

<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> 

proszę zauważyć, że początkowo ustalony wstępnie blok jest renderowany poprawnie SyntaxHighlighter.all(), ale ten w wywołaniu funkcji ładującej nie działa.

+0

na ryzyko brzmiące jak idiota, nie znaczy contentContainer.ef fect ("highlight"); lub content.effect ("highlight"); – karim79

+0

czy wywołanie zaznaczenia ma miejsce przed załadowaniem zawartości? na przykład czy byłoby lepiej jako oddzwonienie do pobrania treści? – scunliffe

Odpowiedz

25

SyntaxHighlighter.all wiąże się ze zdarzeniem window.onload - które jest uruchamiane tylko jeden raz.

składni-podświetlenie po załadowaniu strony, należy użyć funkcji highlight Zamiast:

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

kciuki, że prace, czy nie (na podstawie patrząc na kod) może zajść potrzeba chuck w niektórych wyraźne argumenty (gdzie {} jest pusty zestaw parametrów konfiguracyjnych i this będzie content gdy wywoływana z ajax obsługi obciążenia):


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

Przepraszam za naciśnięcie, właśnie wypróbowałem Syntaxhighlighter.highlight(); i działa dobrze! ale dostaję alert() po dodaniu tekstu, mówiąc: pędzla js nie znaleziono lub coś takiego. czy mogę wyłączyć tę wiadomość? –

+0

@searlea: dzięki, że mnie uratowałeś, więc głosuję w górę !! – Devima

0

Trzeba zadzwonić, że w celu obciążenia zwrotnego:

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

load jest asynchroniczna tak szczęśliwie nadal wzdłuż wykonywania instrukcji, gdy żądanie GET odbywa się w tle.