jQuery

2009-09-02 13 views
6

estoy cargando las páginas de forma asíncrona con la función de carga jQuery, así: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(); 
       }       
      }); 

Una de las páginas externas se parece a esto:

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

ahora la SyntaxHighlighter.all (); invocar la función tree.click() desde arriba debería representar el prebloque con un resaltado de sintaxis bonito, pero al cargar el archivo con el prebloque a través de la función jQuery load() esto no funciona.

Cuando codigo el prebloque en el div de contenido del archivo principal, funciona, sin embargo.

¿Alguna idea?

Gracias por las respuestas hasta el momento. Entiendo que la parte de devolución de llamada e implementé la llamada SyntaxHighlighter.all() en la devolución de llamada de la función de carga ahora, pero todavía no tuve suerte ...

Adjuntaré los 2 archivos completos, ya que son bastante pequeños en tamaño 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> 

y el otro archivo:

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

tenga en cuenta que, inicialmente, el bloque codificado previamente se rinde correctamente por SyntaxHighlighter.all(), pero el que está en la devolución de llamada de la función de carga no funciona.

+0

a riesgo de sonar como un idiota, quiso decir contentContainer.ef fect ("resaltar"); o content.effect ("resaltar"); – karim79

+0

¿La llamada a resaltar ocurre antes de que se cargue el contenido? p.ej. sería mejor como una devolución de llamada de carga del contenido? – scunliffe

Respuesta

25

SyntaxHighlighter.all se conecta al evento window.onload, que solo se dispara una vez.

a la sintaxis-destacado después se carga la página, utilice la función highlight lugar:

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

dedos cruzados para que las obras, si no (en base a mirar el código) puede que tenga que tirar en algunos argumentos explícitos (donde {} es un conjunto vacío de los parámetros de configuración, y this habrá content cuando se llama desde el controlador de carga Ajax):


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

lo siento por el impulso, acabo de probar Syntaxhighlighter.highlight(); y funciona bien! pero recibo una alerta() cuando se agrega un texto, diciendo: brush js not found o algo así. ¿Puedo desactivar este mensaje? –

+0

@searlea: gracias me salvaste, así que voto !! – Devima

0

es necesario llamar a que, en la devolución de llamada a la carga:

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

load es asíncrona por lo que continúa a lo largo de la ejecución de sentencias felizmente, mientras que la solicitud GET se realiza en segundo plano.