2009-09-02 11 views
6

Je suis chargement de pages avec la fonction de manière asynchrone de charge jQuery, comme ceci:jquery problème de charge

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

L'une des pages externes ressemble à ceci:

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

maintenant SyntaxHighlighter.all () appeler dans la fonction tree.click() ci-dessus devrait rendre le préblocage avec une mise en surbrillance de la syntaxe, mais lors du chargement du fichier avec le préblocage via la fonction jQuery load() cela ne fonctionne pas.

Lorsque je code en dur le pré-bloc dans la div de contenu du fichier principal, cela fonctionne cependant.

Des idées?

Merci pour les réponses à ce jour. Je comprends la partie callback et j'ai implémenté l'appel SyntaxHighlighter.all() dans le rappel de la fonction load maintenant, mais toujours pas de chance ...

Je vais ajouter les 2 fichiers complets, car ils sont plutôt petits en taille 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> 

et l'autre fichier:

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

s'il vous plaît noter que d'abord le bloc avant hardcoded est rendu correctement par SyntaxHighlighter.all(), mais celui dans le rappel de la fonction de chargement ne fonctionne pas.

+0

au risque de ressembler à un idiot, vouliez-vous dire contentContainer.ef fect ("highlight"); ou content.effect ("highlight"); – karim79

+0

L'appel à mettre en surbrillance se produit-il avant le chargement du contenu? par exemple. Serait-il préférable de rappeler le contenu? – scunliffe

Répondre

25

SyntaxHighlighter.all est lié à l'événement window.onload - qui ne se déclenche qu'une seule fois.

à la syntaxe-highlight après le chargement de la page, utilisez la fonction highlight à la place:

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

Croisons les doigts qui fonctionne, sinon (basé sur la recherche du code), vous pourriez avoir besoin de mandrin dans certains arguments explicites (où {} est un ensemble vide de paramètres de configuration et this sera content lorsqu'il est appelé à partir du gestionnaire de charge ajax):


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

désolé pour la poussée, j'ai juste essayé Syntaxhighlighter.highlight(); et ça marche bien! mais je reçois un alert() quand un serveur est ajouté, en disant: brush js not found ou quelque chose. puis-je désactiver ce message? –

+0

@searlea: merci de m'avoir sauvé, alors je vote pour !! – Devima

0

Vous devez appeler dans le rappel à la charge:

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

load est asynchrone il continue joyeusement l'exécution d'instructions alors que la requête GET se fait en arrière-plan.