I am currently facing an issue with a function that should refresh the page based on the selected number:
prodName="doesn't matter, not directly $.ajax related"
function searchProduct() {
var prodName = $("#admin-search-product").val().trim();
var pagenumb = 1;
$(".page-item").click(function() {
pagenumb = $(this).children('.page-link').attr('value');
});
alert(pagenumb);
if (prodName == "") {
$.ajax({
type: "POST",
url: "admin_search_product.php",
data: {
search_prod: 0,
},
success: function(respond) {
$("#admin_content").html(respond).show();
$("#admin-search-product").focus().val('').val(prodName);
}
});
} else {
$.ajax({
type: "POST",
url: "admin_search_product.php",
data: {
search_prod: 1,
searchName: prodName,
pagenumb: pagenumb
},
success: function(respond) {
$("#admin_content").html(respond).show();
$("#admin-search-product").focus().val('').val(prodName);
}
});
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="admin-search-product">
<div class="page-item">
<input class="page-link">
</div>
<button onclick="searchProduct()">clickme</button>While everything seems to be working correctly, the issue arises when the variable "pagenumb" retains the value of "1" even after attempting to retrieve the clicked page value using "pagenumb = $(this).children('.page-link').attr('value');". The alert() function confirms that the correct value is being retrieved within the click function.
Strangely, when testing the alert() function outside the click function, it appears that the variable "pagenumb" remains unchanged. This behavior is puzzling as I can successfully retrieve the desired value but encountered difficulty in updating the variable accordingly.