Question

I’m trying to test loading an AJAX response on jsfiddle.net and cant seem to figure out how to do it.

I’m calling .load('/echo/html') but I’m not sure how to pass in the data?

refer this jsfiddle

JS:

$(function() {
    $("div.post-big").hide();

    $("div.expand").click(function() {
    $(this).parent().hide();
    $(this).parents('.post').load('/echo/html/');        
  });
});

Supporting HTML:

<div class="post">
  <div class="post-small">
    <div>Title</div>
    <div>Content</div>
    <div class="expand">expand</div>
  </div>
  <div class="post-big"></div>
</div>

<div class="post">
  <div class="post-small">
    <div>Title</div>
    <div>Content</div>
    <div class="expand">expand</div>
  </div>
  <div class="post-big"></div>
</div>

<div class="post">
  <div class="post-small">
    <div>Title</div>
    <div>Content</div>
    <div class="expand">expand</div>
  </div>
  <div class="post-big"></div>
</div>

Supporting CSS:

.post {
    border: 1px solid #911;
    margin: 5px;
}

Answer 1

You need to supply a second argument to the .load method, with an html property.

.load('/echo/html/', { html: 'Hello!' });

See the working example at jsfiddle

In this demo, click on the text that says expand to trigger the load.