title: How to load data from external file with jQuery
body: <p>I am attempting to use AJAX in jQuery to load content to a div, however, it is severely failing:</p>
  
  <p>Here's the javascript:</p>
  
  <pre><code>$(document).ready(function() {
    $('#webdev').hide();
       $("#apply-webdev").click(function() {
          var form = $("#webdev");
          var formContent = form.find("#webdev");
          form.slideToggle();
          $.ajax({
              url: "api.php?do=get_form_webdev",
              cache: false,
              success: function(data) {
                  form.html(data.params);
          },
          dataType: "json"
        });
    });
  });
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;div class="rbutton"&gt;&lt;button title="Apply for position" id="apply-webdev" onclick="load_webdev_form()"&gt;&amp;nbsp;Apply&amp;nbsp;&lt;/button&gt;&lt;/div&gt;
      &lt;div id="webdev"&gt;
      &lt;fieldset&gt;&lt;legend&gt;Apply for position&lt;/legend&gt;&lt;div style='padding:10px; text-align:center'&gt;&lt;img src='/images/load.gif'/&gt;&lt;/div&gt;&lt;/fieldset&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <h2><strong>EDIT</strong></h2>
  
  <p>Below is the new code, based on answers given in this thread:</p>
  
  <pre><code>$(document).ready(function() {
      $('#webdev').hide();
      $("#apply-webdev").click(function() {
          $("#webdev").slideToggle();
          $("#webdev").load("api.php?do=get_form_webdev");
      });
      $('#webdevcancel').click(function()
          {
              $('#webdev').hide('slow');
          }
      );
      $('#webdevsave').click(function()
          {
          $('#webdev').block({ 
          message: '&lt;h1&gt;Processing...&lt;/h1&gt;&lt;img src="/images/load.gif" /&gt;&lt;br /&gt;&lt;br /&gt;', 
          css: { border: '3px solid #a00' } 
      });
          }
      );
  });
  </code></pre>