2009-09-02 33 views
6

Tôi tải trang không đồng bộ với chức năng tải jQuery, như thế này:jquery tải vấn đề

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

Một trong những trang bên ngoài trông như thế này:

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

nay là SyntaxHighlighter.all (); gọi hàm tree.click() từ trên sẽ hiển thị khối trước với tô sáng cú pháp khá đẹp, nhưng khi tải tệp bằng khối tiền trước thông qua hàm load jQuery() thì nó không hoạt động.

Khi tôi cố định khối tiền trước vào div nội dung của tệp chính, tuy nhiên nó vẫn hoạt động.

Bất kỳ ý tưởng nào ??

Cảm ơn câu trả lời cho đến thời điểm này. Tôi hiểu phần gọi lại và tôi đã thực hiện cú gọi hàm SyntaxHighlighter.all() trong hàm gọi lại của hàm tải ngay bây giờ, nhưng vẫn không có may mắn ...

Tôi sẽ thêm 2 tệp hoàn chỉnh vì chúng khá nhỏ kích thước inm.

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> 

và các tập tin khác:

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

xin lưu ý rằng ban đầu các khối trước hardcoded được trả lại một cách chính xác bởi SyntaxHighlighter.all(), nhưng một trong hàm gọi lại của hàm tải không hoạt động.

+0

tại nguy cơ nghe có vẻ giống như một thằng ngốc, bạn ấy có ý contentContainer.ef fect ("highlight"); hoặc content.effect ("đánh dấu"); – karim79

+0

cuộc gọi để làm nổi bật xảy ra trước khi nội dung được tải không? ví dụ. nó sẽ được tốt hơn như là một tải lại gọi lại của nội dung? – scunliffe

Trả lời

25

SyntaxHighlighter.all quan hệ với sự kiện window.onload - sự kiện chỉ kích hoạt một lần.

cú pháp-nổi bật sau khi tải trang, sử dụng highlight chức năng thay vì:

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

Ngón tay vượt qua mà công trình, nếu không muốn nói (dựa trên xem xét mã), bạn có thể cần phải chuck trong một số lập luận rõ ràng (nơi {} là một tập rỗng các thông số cấu hình, và this sẽ content khi gọi từ xử lý tải ajax):


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

xin lỗi vì sự thúc đẩy, tôi chỉ thử Syntaxhighlighter.highlight(); và nó hoạt động tốt! nhưng tôi nhận được một cảnh báo() khi máy chủ một văn bản được thêm vào, nói: brush js không tìm thấy hoặc một cái gì đó. tôi có thể vô hiệu hóa tin nhắn này không? –

+0

@searlea: cảm ơn bạn đã cứu tôi, vì vậy tôi bỏ phiếu !! – Devima

0

Bạn cần phải gọi đó là trong callback để tải:

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

load là không đồng bộ nên nó vui vẻ tiếp tục cùng thực hiện báo cáo trong khi yêu cầu GET được thực hiện ở chế độ nền.