I am trying to make a php page with pagination function by first submitting a form and then updating the area with a page click function. The Form that will be submitted is like this:
<form class="row g-3" name="search" id="search" method="POST" action="">
<div class="row g-3 align-items-center">
<div class="col-sm-3"><label for="departmentSer" class="col-form-label">Select Department:</label></div>
<div class="col-sm-8">
<select class="form-select" name="departmentSer" id="departmentSer" aria-label="Default select example">
<option>Choose1</option>
<option>Choose2</option>
<option>Choose3</option>
</select>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary" id="lddeptSecSub" name="lddeptSecSub" value="lddeptSearch" onclick="submitFormSea(this.value, 'departmentSer')">Get List</button>
</div>
</div>
</form>
And Following is the HTML area where the result from the ajax query will be updated:
<div class="align-items-center mt-4" id="formShowData" name="formShowData"> </div>
</div>
The Pagination links are generated like this:
<a class="page-link" href="?areac=lddeptSearch&place=Choose...&dsource=listData&page=1" onclick="submitClick(this)">1</a>
This area is first updated with with a form submit. And then replaced when the pages are clicked. The following jQuery is doing the function:
function jajax_qview(datas, field) {
var request = $.ajax({
url: "ajax_areac.php",
method: "POST",
data: datas,
cache: false,
dataType: "html",
});
request.done(function( msg ) {
$('#'+field).html(msg);
});
request.fail(function( jqXHR, textStatus ) {
console.log(datas);
alert( "Request failed: " + textStatus );
});
request.always(function() {
datas = undefined;
});
}
function submitForm(formNameS, elemIdVal) {
event.preventDefault();
var datas = {areac:formNameS, place : $('#'+elemIdVal).val()};
jajax_qview(datas, 'formS');
}
function submitClick(submitLinkVars) {
event.preventDefault();
var searchParams = new URLSearchParams(submitLinkVars.search);
var datas = searchParams;
jajax_qview(datas, 'formS');
}
Now the problem is that the function "submitForm" is working perfectly fine, when submitting is generation the required data without any error. But when the page number are clicked, the function submitClick is submitted but I am getting the error "Uncaught TypeError: 'append' called on an object that does not implement interface URLSearchParams."
And the variable datas
that is generated by the function is "submitClick" is URLSearchParams(4) { areac → "lddeptSearch", place → "7", dsource → "listData", page → "2" }
I have tried with ajax parameters processData: false,contentType: false,
. When trying with this option, no data is submitted by the ajax method to the php file. And when trying with dataType: "json"
I am getting error Request failed: parsererror
.
So, how to solve the problem and submit the data when clicking on the page links.
jQuery's $.ajax
function does not accept URLSearchParams
objects as input to the data
option, and that is the source of the error. As per the $.ajax documentation, data
can be a plain object, string or array.
The $.ajax
documentation states it will accept a URL-like querystring as input (as per the standard application/x-www-form-urlencoded
content type):
When data is passed as a string it should already be encoded using the correct encoding for contentType, which by default is application/x-www-form-urlencoded.
For your case the simplest thing is probably to use the toString() function of your URLSearchParams
object to output the parameters in that format.
The URLSearchParams
toString
documentation states:
The toString() method of the URLSearchParams interface returns a query string suitable for use in a URL.
So please try this:
var searchParams = new URLSearchParams(submitLinkVars.search);
var datas = searchParams.toString();
jajax_qview(datas, 'formS');