1

このコード スニペット プラグインを使用しています: http://www.steamdev.com/snippet/ブログ用ですが、ページの読み込み時にプラグインが機能しません。最初のページの更新時にのみ機能します。

jquery.ajax リクエストを使用して特定の div にコンテンツをロードし、これを試しています:

$(window).on("load", function(){ 
  $("pre.cplus").snippet("cpp",{style:"acid"});
  $("pre.php").snippet("php",{style:"acid"});
  });

また、ロードイベントをトリガーしようとしましたが、それが正しいかどうかわかりません..

別の質問: 次の例のように、php 文字列を使用して html を作成します。

$string = '<pre class="cplus">  
           #include <iostream>   
           int main()
           {
            //c++ code             
           }           
           </pre>

           <pre class="php">
           <?php
           function foo()
           {
            // PHP code
           }
           ?>
           </pre>';

echo $string;   // ajax -> success

しかし、PHP スニペットには空が表示されます (c++ は問題ありません)。私のページにphpコードスニペットを表示する他の方法(またはプラグイン)はありますか? ありがとうございました。

解決済み: 問題はプラグインや Iserni の提案ではありません.. ページの読み込み (ajax) に問題がありました.. これがページの読み込み方法です:

function pageload(hash) {
    if(hash == '' || hash == '#php')
    {
      getHomePage();
    }

    if(hash)
    {
     getPage();
    }

} 


function getHomePage() {
    var hdata = 'page=' + encodeURIComponent("#php");
    //alert(hdata);
    $.ajax({
        url: "homeloader.php",  
        type: "GET",        
        data: hdata,        
        cache: false,
        success: function (hhtml) { 
            $('.loading').hide();               
            $('#content').html(hhtml);
            $('#body').fadeIn('slow');      

        }       
    });
}

function getPage() {
    var data = 'page=' + encodeURIComponent(document.location.hash);
    //alert(data);
    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  
            $('.loading').hide();               
            $('#content').html(html);
            $('#body').fadeIn('slow');      

        }       
    });
} 

 $(document).ready(function() {

 // content
   $.history.init(pageload);    

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');
        $('#body').hide();
        $('.loading').show();

        getPage();

        return false;
    }); 
    // ..... other code for menus, tooltips,etc.

私はこれが実験的であることを知っています.さまざまなチュートリアルを組み合わせて作成しましたが、今では機能します..コメントは大歓迎です..すべてに感謝します.

4

3 に答える 3

1

PHP スニペットは、ブラウザが一種の HTML タグであると認識しているため、空のように見えます。

それ以外の

$string = '<pre class="php">
       <?php
       function foo()
       {
        // PHP code
       }
       ?>
       </pre>';

あなたがする必要があります：

// CODE ONLY
$string = '<?php
       function foo()
       {
        // PHP code
       }
       ?>';

// HTMLIZE CODE
$string = '<pre class="php">'.HTMLEntities($string).'</pre>';

jQuery に関しては、おそらく jQuery コードを配置する場所が原因です。次のように、ページの下部に配置してみてください。

....
<!-- The page ended here -->
<!-- You need jQuery included before, of course -->
<script type="text/javascript">
    (function($){ // This wraps jQuery in a safe private scope
        $(document).ready(function(){ // This delays until DOM is ready

        // Here, the snippets must be already loaded. If they are not,
        // $("pre.cplus") will return an empty wrapper and nothing will happen.
        // So, here we should invoke whatever function it is that loads the snippets,
        // e.g. $("#reloadbutton").click();

        $("pre.cplus").snippet("cpp",{style:"acid"});
        $("pre.php").snippet("php",{style:"acid"});

        });
    })(jQuery); // This way, the code works anywhere. But it's faster at BODY end
</script>
</body>

アップデート

2 つのページ読み込み関数をマージすることで、いくつかのコードを節約して簡素化できると思います (これはDRY原則と呼ばれます - Don't Repeat Yourself ):

function getAnyPage(url, what) {
    $('.loading').show(); // I think it makes more sense here
    $.ajax({
        url: url,
        type: "GET",        
        data: 'page=' + encodeURIComponent(what),
        cache: false,
        success: function (html) { 
            $('.loading').hide();
            $('#content').html(hhtml);
            $('#body').fadeIn('slow');
        }
        // Here you ought to allow for the case of an error (hiding .loading, etc.)
    });
}

その後、呼び出しを に変更するgetPageか、ラッパーとして再実装できます。

function getHomePage(){ return getAnyPage('homeloader.php', "#php"); }
function getPage()    { return getAnyPage('loader.php', document.location.hash); }
于 2012-10-20T20:10:51.767 に答える
1

私が提案する最初の問題についてはわかりました

  • あなたのJSエラーコンソールが言っていることを見てください
  • 対応するjsプラグインファイルがロードされていることを確認してください
  • ajaxを使用している場合は、次のコードを使用します（重要なのは「成功」イベント関数です）：
$.ajax({
          url: 'your_url',
          成功: 関数 (データ) {
            $("pre.cplus").snippet("cpp",{style:"acid"});
            $("pre.php").snippet("php",{style:"acid"});
          }
});

2番目の問題について、lserniは明確に答えました

于 2012-10-20T20:13:19.247 に答える
0

次のようにロード関数でjqueryを使用する必要があります。

$(function(){
  RunMeOnLoad();
  });
于 2012-10-20T20:10:26.733 に答える