jQuery/AJAX - Load content into a div when button clicked?

Question

Would someone be able to help here?

I would like to fill a div e.g.

<div id="contenthere"></div>

with content from an external file e.g.

/includes/about-info.html

when a button with a certain class is clicked e.g.

<p class="classloader">Click Here</p>

Does anyone have a quick code example they can show me to achieve this?

Answer 1

Use jQuery.click and jQuery.load:

$(document).ready(function(){
    $('.classloader.').click(function(){
        $('#contenthere').load('/includes/about-info.html');
    });
})

Answer 2

Load latest version of jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

jQuery code:

<script language="javascript">
$(function(){
  $(".classloader").click(function(){
    $("#contenthere").load("/includes/about-info.html");
  });
});
</script>

HTML code:

<p class="classloader">Click Here</p>
<div id="contenthere"></div>

Answer 3

You could subscribe to the .click() event of the paragraph and then use the .load() function to send an AJAX request to the given url and inject the results into the specified selector:

$(function() {
    $('.classloader').click(function() {
        $('#contenthere').load('/includes/about-info.html');
        return false;
    });
});