jquery code snippet on load

Question

I'm working with this code snippet plugin : http://www.steamdev.com/snippet/ for my blog but the plugin doesn't work on page load. It only works at first page refresh.

I load my content in a specific div with jquery.ajax request and i'm trying this :

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

I also tried to trigger the load event but i don't know if it is correct..

Another question : i build my html with php string like this example:

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

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

echo $string;   // ajax -> success

but the PHP snippet shows empty (the c++ is ok). Any other way (or plugin) to show php code snippet on my page? Thank you.

SOLVED: The problem isn't the plugin or Iserni suggestions.. i had a problem in page load (ajax).. This is how i load the pages:

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.

I know this is experimental , i have made a mix of various tutorials but now it works.. comments are much appreciated.. Thanks to all.

Answer 1

The PHP snippet seems empty because the browser believes it's a sort of HTML tag.

Instead of

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

you need to do:

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

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

As for the jQuery, it is probably due to where you put the jQuery code: try putting it at the bottom of the page, like this:

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

Update

I think you could save and simplify some code by merging the two page loading functions (it's called the DRY principle - 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.)
    });
}

You can then change the calls to getPage, or reimplement them as wrappers:

function getHomePage(){ return getAnyPage('homeloader.php', "#php"); }
function getPage()    { return getAnyPage('loader.php', document.location.hash); }

Answer 2

ok for the first issue I would suggest to

• see what your JS error console saying
• ensure correspondent js plugin file is loaded
• and use the following code when you are using ajax (the key thing is "success" event function):

$.ajax({
          url: 'your_url',
          success: function(data) {
            $("pre.cplus").snippet("cpp",{style:"acid"});
            $("pre.php").snippet("php",{style:"acid"});
          }
});

for the second issue lserni answered clearly

Answer 3

you need to use to jquery on load function like so:

$(function(){
  RunMeOnLoad();
  });