I have an HTML page and links. So each links call a new page inside div (#start_buttons_container).
Here is my jquery ajax script
$(document).ready(function(){
var loading = "<img src='css/images/loading.gif'/>";
$('.start_buttons').click(function(){
alert('request');
var hrefname = $(this).attr('href').split(' ');
var urlname = "parts/"+hrefname;
$.ajax({
url: urlname,
cache: false,
beforeSend: function() {
$('#start_buttons_container').html(loading);
},
success: function(data){
$("#start_buttons_container").html(data);
$("#start_buttons_container").show(200);
}
});
return false;
});
});
I am using this code and works good for me. But when I click the link on second time, alert happens 2 time, if I click 3rd time, alert happens 3 time.
My question: How can I stop duplicating request if user will click the link 20 times?
UPDATE:
<div class="form">
<table border="0" align=center cellspacing="15" cellpadding="5">
<tr class="tr1">
<td align="left"><a class="button1 start_buttons" href="new-project.php">New Project</a></td>
<td align="left"><a class="button1 start_buttons" href="user_projects.php">Import</a></td>
</tr>
</table>
<div id="start_buttons_container">
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
NOTE:
As I descripe after multiple clicking to buttons Ajax starts to respond later and site begins work hardly. But I found one thing. If i will not use js external url (js/main.js) and will write the js code at below HTML codes Ajax works perfect and responds will be fast even if you will click 100 times. Why?
You're including main.js in your AJAX HTML file that you're loading. When you reload or clear the HTML from the DOM, it still keeps the script. Move the script out so it's not part of the HTML that's being loaded.