How to create a custom module form with ajax add,update and delete operations without page refresh in Drupal 8 and Drupal 9

Here we are going to discuss how to make your custom form into an ajax submission form and display submitted data on the same page without page reload. Also, we will create custom pagination for the table, and while changing the page, the table will be populated without page refresh. Also, delete and edit operations are done on the same page without page refresh.

See the final screen and source code in the below link.

Download the source of the completed module here 

There are a lot of challenges while creating a single-page application with Drupal and it’s ajax API.

Drupal AJAX API in Core one of the most powerful API available in Drupal 8 and Drupal 9 versions.

Here in this tutorial, we are going to split these tasks into the below steps

  • Save data and display data in a table without page load using ajax
  • Edit table  data and refresh table without page load using ajax
  • Delete table row and  refresh table without page load using ajax
  • Custom pagination and refresh each page without page load using ajax

Save data and display data in a table without page load using ajax

So here first we going to create a simple ajax form that submits data into the database. Then after submission, we will show a success message in the same form and populate the table list on the same page.

First, we are going to create a custom table for students with the below fields.

 

Schema script can be created in .install file of you module as below.

Next, we are going to create a custom save form in our module.  This form is used for saving data to students table without page reload.

We have 4 fields in the field and see the code.

Create the below file in the custom module path.

\dn_students\src\Form\StudentForm.php

dn_students is the custom module name.

See the build from function below.

You can see ajax call back for save and clear buttons.

Since we are using different Ajax API’s use below use statements at the top of your  StudentForm.php

in our module ibraries.yml, we need to load some ajax libraries as shown below.

We will be discussing more pagination.js in the pagination section.

Logic for saving and clear fields are written in below Ajax call back functions.

saveDataAjaxCallback function

in this call back function, we are doing below things.

  • Validate input fields
  • Insert data into students table.
  • Update table data with inserted data.

The below code validates whether input field is filled or not. You replicate this code to other fields.

Here we highlighting fname field with an error message.

Next in the same function, we are inserting data to data if all validations are successful.

Next, we are going to load table data with newly inserted data.

Here we are loading StudentTable form into div tag which has result_message  class. we are discussing more  about StudentTableForm in the next section. This table will be dynamically loaded for each operation.

Also in the above code, we are making the first page an active page for each update.

Create  StudentTableForm.php file in the below path.

\dn_students\src\Form\StudentTableForm.php

See below the source code of the file.

As you can see above $pageNo variable is used for pagination purposes.

get_students function is the implementation of retrieving data from the database.

You can place this function in your .module file as below.

Here we are displaying 15 rows and bases on page number query range will be updated.

Here we are creating edit and delete which are mailed to controller functions in .routing.yml file, these functionalities will be discussed in the edit and delete sections.

Now we have created a save and table form.

Next, we have to display these two forms on the same page.

We are going to create a route in routing.yml which will display below forms on a single page.

\dn_students\src\Form\StudentForm.php

\dn_students\src\Form\StudentTableForm.php

Add the below route to your module .routing.yml file.

Create the below controller file.

\modules\dn_students\src\Controller\StudentController.php

Add below function in this controller.

We will discuss more getPager() function in the last section of this article.

Now we have a page where we can save data and display data without page refresh.

 Edit table data and refresh table without page load using ajax

Next, we are going to discuss edit functionality.

As you saw in the previous step, while clicking on the edit link, we have provided a mapping routing.yml file.

See the below route.

See below  editStudentAjax function in StudentController

As seen in the above code   OpenModalDialogCommand will create a pop-up in which StudentEditForm will appear as an edit form with select row data loaded.

See below code for  \dn_students\src\Form\StudentEditForm.php

As seen in the above Ajax call back of edit form updateStudentData  will update selected row and  reload StudenTable Form

Delete table row and  refresh table without page load using ajax

Add below entry in routing.yml file

In StudentController  file see below deleteStudentAjax

Custom pagination and refresh each page without page load using ajax

Here we are not using the pager available in Drupal. In order to make page traverse as an ajax call, we are creating a custom pager.

In  your .module, create a function as below.

As you can see in the above code, we are making links with class ‘use-ajax’ so that we can apply ajax response while clicking on hyperlinks.

This function will be called in manageStudents function in StudentController.php

So link /ajax/dn_students/table/page/{pageNo} is mapped into   tablePaginationAjax function as below in routing.yml file.

See below tablePaginationAjax function in StudentController.php

So here we are passing page no into StudentTableForm and which will be passed to get_students  function for getting the results between query range.

We have below css and js files for making the look and feel of paginations div.

\dn_students\js\pagination.js

\dn_students\css\style.css

Load this in your libraries.yml

 

Also, load this in the table as below in .module file.

Download the source of the completed module here 

 



Get Free E-book
Get a free Ebook on Drupal 8 -theme tutorial
I agree to have my personal information transfered to MailChimp ( more information )
if you like this article Buy me a Coffee this will be an ispiration for me to write articles like this.

You may also like...