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

Question

Has anyone here helped?

I would like to populate a div, for example.

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

with contents from an external file, for example.

 /includes/about-info.html 

when you click a button with a specific class, for example.

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

Does anyone have a quick code example that 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

Download the latest jQuery version:

 <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> </script> 

HTML code:

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

Answer 3

You can subscribe to the .click() paragraph event, and then use .load() to send an AJAX request to the specified URL and enter the results in the specified selector:

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

Answer 4

Try the following:

 var myurl = 'myfileonthesamedomain.html'; $('button').click(function(){ $('div.loadme').load(myurl); }); 

Answer 5

Use this simple and straightforward solution; it also performs bindings at runtime:

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