2009-09-02 15 views
6

मैं jQuery लोड समारोह के साथ अतुल्यकालिक रूप से पृष्ठों को लोड कर रहा हूँ, इस तरह:jQuery लोड मुद्दा

<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(function() { 
       if ($(this).hasClass("file")) { 
        tree.removeClass("selected"); 
        $(this).addClass("selected"); 
        content.load("content/"+this.id+".html"); 
        contentContainer.effect("highlight"); 
        SyntaxHighlighter.all(); 
       }       
      }); 

बाहरी पृष्ठों में से एक इस तरह दिखता है); उपरोक्त से tree.click() फ़ंक्शन में कॉल को सुंदर वाक्यविन्यास हाइलाइटिंग के साथ पूर्व ब्लॉक प्रस्तुत करना चाहिए, लेकिन jQuery लोड() फ़ंक्शन के माध्यम से पूर्व ब्लॉक के साथ फ़ाइल लोड करते समय यह काम नहीं करता है।

जब मैं मुख्य फ़ाइल की सामग्री div में पूर्व ब्लॉक को हार्डकोड करता हूं, तो यह काम करता है।

कोई विचार ??

अभी तक उत्तर के लिए धन्यवाद। मैं कॉलबैक भाग को समझता हूं और मैंने अब लोड फ़ंक्शन के कॉलबैक में SyntaxHighlighter.all() कॉल को लागू किया है, लेकिन अभी भी कोई भाग्य नहीं है ...

मैं 2 पूर्ण फ़ाइलों को जोड़ दूंगा, क्योंकि वे छोटे हैं आकार एटीएम में।

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.allwindow.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(); 
});

उंगलियों को पार कर गया है कि काम करता है, नहीं तो आप कुछ स्पष्ट तर्क में चक करने के लिए आवश्यकता हो सकती है (कोड को देख के आधार पर) (जहां {} विन्यास मापदंडों के एक खाली सेट है, और जब ajax लोड हैंडलर से कहा जाता thiscontent हो जाएगा):


    SyntaxHighlighter.highlight({}, this); 
एक बेवकूफ की तरह लग के जोखिम में
+0

धक्का के लिए खेद है, मैंने अभी Syntaxhighlighter.highlight() की कोशिश की; और यह ठीक काम करता है! लेकिन मुझे एक चेतावनी मिलती है() जब भी एक पाठ जोड़ा जाता है, कह रहा है: ब्रश जेएस नहीं मिला या कुछ। क्या मैं इस संदेश को अक्षम कर सकता हूं? –

+0

@searlea: धन्यवाद आपने मुझे बचाया, इसलिए मैं वोट देता हूं !! – Devima

0

आप लोड करने के लिए कॉल करने के लिए है कि कॉलबैक में की जरूरत है:

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

load अतुल्यकालिक है, इसलिए यह खुशी से बयान निष्पादित करते समय GET अनुरोध पृष्ठभूमि में किया जाता है के साथ जारी है।

संबंधित मुद्दे