I am loading content via Ajax, but I need it to not load anything when my site loads

Question

I'm loading content into several divs with

ajax_loadContent

<div class="content"><div class="container" id="contents2"><!-- Empty div for dynamic content -->Loading content. please wait...</div><script type="text/javascript">ajax_loadContent('contents2','http://www.thewebsite.com/blank.php');</script></div>

Basically, I don't want to load anything until the user clicks on the links I have specified to load content into these instances, please help! Right now, I'm loading a blank file to show nothing in the div.

Answer 1

Your function is being called inside the <script> tags, so it's going to run as soon as the javascript is loaded.

Using jQuery, run the function only when elements with the id "link_id" are clicked.

$(document).ready(function() {
    $("#link_id").click(function() {
        ajax_loadContent('contents2','http://www.thewebsite.com/blank.php');
    });
});

or using a non jQuery method:

<a href="javascript:ajax_loadContent('contents2','http://www.thewebsite.com/blank.php')">clickme</a>

or

<a href="" onClick="ajax_loadContent('contents2','http://www.thewebsite.com/blank.php');return false;">click me</a>