页面加载完成后，如何在按下按钮时将内容加载到div中

Question

I have searched the web and forums high and low and have not found a solution that I feel accurately addresses it. I hope someone reading this can help solve my issue. I have a website that catalogs the concerts I have for various music groups. Initially, all the dates, venues, and such for a given year are visible... a year 'row'. Each date in the row is actually a link, as shown here:

<a name = "<?php echo $tag_no ?>" class="none" href="#<?php echo $tag_no ?>" title = "<?php echo $tooltip ?>" onClick="$('#<?php echo $tag_no ?>').load('/2.0/details.php3?event_no=<?php echo $tag_no ?>&amp;details=0&amp;PHPSESSID=<?php echo session_id() ?>');"><?php echo $concert_date_formatted ?> </a>

When the date is clicked, the .load() inserts the details for the concert into the div. It actually replaces the year 'row' and inserts all the details in the div. This has worked great for years. I have a little javascript routine which attaches to the div and lets the user toggle it up and down...

    <script language="JavaScript" type="text/javascript">
// window shade
function change(id){ 
 ID = document.getElementById(id); 

 if(ID.style.display == "") 
      ID.style.display = "none"; 
 else 
      ID.style.display = ""; 
}
</script>

The issue I have is that I have added some content to the details that are inserted via the .load() that takes longer than I want to populate. This happens before the page completes loading so it delays the overall list of dates and concerts from completing.

I need a way to make the content in the details load only after the user clicks the date. I don't want the page to query the database and webserver until after the link is pressed. I am using javascript and jquery in other areas.

Thanks for any insight!

Cheers

Answer 1

Assume you have a button (in your case it seems is a date field):

<button id="button" onclick="myFunction()">Click me</button>

You only want to load the content when the user clicks the button (or a date field). In this case, when the user clicks on it, the myFunction() will be executed.

In your myFunction(), you could have an AJAX event to bring the data from the DB.

function myFunction() {

//ajax event to bring data from database

}

Since you are Using JQuery, you can also do the following:

$("#button").click(function(){
    //ajax event to bring data from database
});