Am having a problem with my jquery
i want to delete some products
but the only problem am getting, the deletion works only on first items even if i click the last item
Lets say i want to delete <p>INFO 20002</p> it will delete <p>INFO 2000</p>
i want to be able to delete any item i want
<script>
function callB() {
$("#button1").click(function(event) {
Execute();
});
function Execute() {
$.ajax({
type: 'POST',
url: 'ajax/file.aspx',
data: {
'custId': $("input[name='custId']").val()
},
success: function(response) {
},
error: function() {
alert("error");
}
});
};
}
$(document).ready(function() {
callB();
});
</script>
<div>
<p>INFO 2000</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="348700">
</div>
<div>
<p>INFO 20001</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="4443487">
</div>
<div>
<p>INFO 20002</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="8883487">
</div>
<div>
<p>INFO 20003</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="1113487">
</div>
Because all your button have same ids i.e. button1 and when you click any button your function Execute(); executed and inside your ajax data you are sending data with $("input[name='custId']").val() means it will always give you the value of first occurrence and that is why when clicking any button because all your buttons have same ids the Execute() function executed and your first item deleted.So when you click any button send that clicked button value your problem will be solved. Also please try to give the id value unique.
$("[type=button]").on('click', function() {
var custId = $(this).closest('div').find('[name=custId]').val();
Execute(custId);
});
function Execute(custId) {
$.ajax({
type: 'POST',
url: 'ajax/file.aspx',
data: {
'custId': custId
},
success: function(response) {
},
error: function() {
alert("error");
}
});
}
Your input buttons need to have unique id attributes (or no ids at all, in this case).
Give all of them the same class-name.
<input type="button" class="deleteButton" value="Erase this" />
Put the customer id into the 'button' element, instead of its own hidden input.
<input type="button" class="deleteButton" value="Erase this" data-custid="348700" />
Then update your jquery selector for the button click event, and refer to that class-name.
$('input.deleteButton').on('click', function(event) {
var $button = $(this);
// USE THE jQUERY OBJECT'S .data() METHOD TO GET THE BUTTON's CUST-ID
// var customerId = $button.data('custid');
Execute($button);
});
Then, on the 'success' of the ajax request, refer to the '$button' object, and remove its <div> parent.
$button.closest('div').remove();