title: jQuery, Shadowbox and AJAX
body: <p>I would like to load some content using AJAX and <a href="http://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox</a></p>
  
  <p>Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-</p>
  
  <p>1) Cancel the click event i.e the User must not go to a different page.</p>
  
  <p>2) Load content using ajax function in jQuery</p>
  
  <p>3) Show the content inside a shadow box</p>
  
  <p>My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.</p>
  
  <pre><code>jQuery(document).ready(function($){
      // rounded corners
      $('img').addClass('corner iradius16');
      DD_roundies.addRule('#nav li a',4,true);
      DD_roundies.addRule('.grid',6,true);
  
  
      $('h2 a').bind('click', function() {
          var id = $(this).attr('id');
          $.ajax({ 
              url: "/ajax-post.php?p="+id, 
              success: function(data){
                  Shadowbox.open({
                      content:    data,
                      player:     "html",
                      height:     350,
                      width:      350
                  });
              }
           });
          return false;
      });
  </code></pre>
  
  <hr>
  
  <h2>UPDATE 1</h2>
  
  <p>tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.</p>
  
  <pre><code>Shadowbox.init({
      skipSetup: true,
      players: ["html"]
  });
  
  
    // LOAD
  jQuery(document).ready(function($){
      // rounded corners
      $('img').addClass('corner iradius16');
      DD_roundies.addRule('#nav li a',4,true);
      DD_roundies.addRule('.grid',6,true);
  
  
      $('.post h2 a').bind('click', function() {
          var id = $(this).attr('id');
          $.ajax({ 
              url: "&lt;?php bloginfo( 'template_directory'); ?&gt;/ajax-post.php?p="+id, 
              success: function(data){
                  show_box(data);
              }
           });
          return false;
      });
  
  });
  </code></pre>
  
  <p>//shadowbox
  function show_box(html) {
      Shadowbox.open({
          content:    html,
          player:     "html",
          height:     350,
          width:      350
      });
  }</p>
  
  <hr>
  
  <h2>UPDATE 2</h2>
  
  <p>Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.</p>
  
  
  
  <p>Why is this happening ? Any ideas ?</p>