javascripthtmljqueryajax

Uncaught TypeError: 'append' called on an object that does not implement interface URLSearchParams

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&amp;place=Choose...&amp;dsource=listData&amp;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.

Solution

  • 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');