I have an anchor element: <a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '"> This opens a modal I found here. My problem is the id="" isn't passing into my jQuery's ItemNumber variable as expected:
$(document).ready(function() {
$('.ItemLink').on('click', function() {
var ItemNumber = $(this).attr('id');
$.ajax({
method: 'POST',
url: 'Item.php?number=' + ItemNumber,
data: {
ItemNumber: ItemNumber
},
success: function(data) {
$('#StoneDetails').html(data);
}
});
});
});<head><!-- jQuery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- jQuery Modal --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /></head><body><!--id will have placeholder for testing--><a href="#ItemPage" class="ItemLink" rel="modal:open" id="999">
dynamic info</a><!-- Modal for product page --><div id="ItemPage" class="modal"><a href="#" rel="modal:close" class="CloseModal"><span class="mdi mdi-close mdi-36px"></span><!-- Ignore this; it's for a font I found online --></a><div id="StoneDetails"></div></div></body>If I change var ItemNumber = to $('.ItemLink').attr('id'); I get the attribute of just the first element. I have a page of a bunch of dynamic links where I want the modal to open with the Item.php and the data for the clicked link dynamically by getting the id="" attribute. What am I doing wrong in my function?