Reputation: 1
I am calling ajax with below code in my index.php file.
<script type="text/javascript">
$(document).ready(function(){
$("#counting").click(function(){
$.ajax({
type: 'POST',
url: 'https://example.com/update.php',
data: {url: '<?=$url?>'},
success: function(data) {
// alert(data);
//$("p").text(data);
}
});
});
});
</script>
It's working perfectly, but the issue is I have div called counting multiple times on the page. example
<div id="counting">
<a href="example.com">example</a>
</div>
<div id="counting">
<a href="example.com">example</a>
</div>
Issue - Ajax call only works with first div, not below divs. How to make it work with all divs with id counting
Upvotes: 0
Views: 525
Reputation: 3270
Id attributes are supposed to be unique. You're only ever going to get the first div called because once the DOM sees that, it's met it's requirement and doesn't search further. I suggest you give you divs unique ids and then use a class that is the same for all of them.
<div id="div1" class="counting_class">
<a href="example.com">example</a>
</div>
<div id="div2" class="counting_class">
<a href="example.com">example</a>
</div>
Then your jQuery would look something like this:
$(".counting_class").click(function(){
var id = $(this).attr('id');
//then call ajax based on the individual ID
}
Upvotes: 2