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>

更新

我认为您可以通过合并两个页面加载功能来节省和简化一些代码（这称为DRY原则 -不要重复自己）：

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({
          网址：'你的网址'，
          成功：函数（数据）{
            $("pre.cplus").snippet("cpp",{style:"acid"});
            $("pre.php").snippet("php",{style:"acid"});
          }
});

对于第二个问题，lserni 回答得很清楚

于 2012-10-20T20:13:19.247 回答
0

您需要使用 jquery on load 函数，如下所示：

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