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

by admin · Published November 3, 2020 · Updated June 17, 2021

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.

CREATE TABLE `students` (

`id` int(11) NOT NULL,

`fname` varchar(500) NOT NULL,

`sname` varchar(500) NOT NULL,

`age` int(11) NOT NULL,

`marks` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `students` (

`id` int(11) NOT NULL,

`fname` varchar(500) NOT NULL,

`sname` varchar(500) NOT NULL,

`age` int(11) NOT NULL,

`marks` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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

<?php
use Drupal\Core\Database\Database;
 
/**
 * Implements hook_schema().
 */
function dn_students_schema(){
    $schema['students'] = array(
        'description' => 'The table for storing the students data.',
        'fields' => array(
            'id' => array(
                'description' => 'The primary identifier for student',
                'type' => 'serial',
                'not null' => TRUE,
                'unsigned' => TRUE,
            ),
            'fname' => array(
                'description' => 'Student name',
                'type' => 'varchar',
                'length' => 255,
                'not null' => TRUE,
                'default' => '',
            ),
           'sname' => array(
                'description' => 'Student second name.',
                'type' => 'varchar',
                'length' => 255,
                'not null' => TRUE,
                'default' => '',
            ),
            'age' => array(
                'description' => 'Age of student',
                'type' => 'int',
                'length' => 100,
                'not null' => TRUE,
               
            ),
            'marks' => array(
                'description' => 'Mark of student',
                'type' => 'int',
                'length' => 100,
                'not null' => TRUE,
            ),
        ),
        'primary key' => array('id'),
    );
    return $schema;
}

<?php

use Drupal\Core\Database\Database;

/**

* Implements hook_schema().

function dn_students_schema(){

$schema['students'] = array(

'description' => 'The table for storing the students data.',

'fields' => array(

'id' => array(

'description' => 'The primary identifier for student',

'type' => 'serial',

'not null' => TRUE,

'unsigned' => TRUE,

'fname' => array(

'description' => 'Student name',

'type' => 'varchar',

'length' => 255,

'not null' => TRUE,

'default' => '',

'sname' => array(

'description' => 'Student second name.',

'type' => 'varchar',

'length' => 255,

'not null' => TRUE,

'default' => '',

'age' => array(

'description' => 'Age of student',

'type' => 'int',

'length' => 100,

'not null' => TRUE,

'marks' => array(

'description' => 'Mark of student',

'type' => 'int',

'length' => 100,

'not null' => TRUE,

'primary key' => array('id'),

);

return $schema;

}

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.

public function buildForm(array $form, FormStateInterface $form_state,$record = NULL) {
   
    $form['fname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('First Name'),
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' =>'',
	  '#prefix' => '<div id="div-fname">',
      '#suffix' => '</div><div id="div-fname-message"></div>',
    ];
	 $form['sname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Second Name'),
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => '',
    ];
	$form['age'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Age'),
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' =>  '',
    ];
	 $form['marks'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Marks'),
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => '',
    ];
	
	
    $form['actions']['#type'] = 'actions';
    $form['actions']['Save'] = [
      '#type' => 'submit',
      '#button_type' => 'primary',
	  '#ajax' => ['callback' => '::saveDataAjaxCallback'] ,
      '#value' => $this->t('Save') ,
    ];
	 $form['actions']['clear'] = [
      '#type' => 'submit',
      '#ajax' => ['callback' => '::clearForm','wrapper' => 'form-div',] ,
      '#value' => 'Clear',
     ];
	 $render_array['#attached']['library'][] = 'dn_students/global_styles';
    return $form;

  }

public function buildForm(array $form, FormStateInterface $form_state,$record = NULL) {

$form['fname'] = [

'#type' => 'textfield',

'#title' => $this->t('First Name'),

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' =>'',

'#prefix' => '<div id="div-fname">',

'#suffix' => '</div><div id="div-fname-message"></div>',

];

$form['sname'] = [

'#type' => 'textfield',

'#title' => $this->t('Second Name'),

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => '',

];

$form['age'] = [

'#type' => 'textfield',

'#title' => $this->t('Age'),

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => '',

];

$form['marks'] = [

'#type' => 'textfield',

'#title' => $this->t('Marks'),

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => '',

];

$form['actions']['#type'] = 'actions';

$form['actions']['Save'] = [

'#type' => 'submit',

'#button_type' => 'primary',

'#ajax' => ['callback' => '::saveDataAjaxCallback'] ,

'#value' => $this->t('Save') ,

];

$form['actions']['clear'] = [

'#type' => 'submit',

'#ajax' => ['callback' => '::clearForm','wrapper' => 'form-div',] ,

'#value' => 'Clear',

];

$render_array['#attached']['library'][] = 'dn_students/global_styles';

return $form;

}

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

'#ajax' => ['callback' => '::saveDataAjaxCallback'] ,
 '#ajax' => ['callback' => '::clearForm','wrapper' => 'form-div',]

1 2	'#ajax' => ['callback' => '::saveDataAjaxCallback'] , '#ajax' => ['callback' => '::clearForm','wrapper' => 'form-div',]

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

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Database\Database;
use Drupal\Core\Url;
use Drupal\Core\Routing;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\AlertCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Form\FormState;
use Drupal\Core\Link;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\Database\Database;

use Drupal\Core\Url;

use Drupal\Core\Routing;

use Drupal\Core\Ajax\AjaxResponse;

use Drupal\Core\Ajax\HtmlCommand;

use Drupal\Core\Ajax\InvokeCommand;

use Drupal\Core\Ajax\AlertCommand;

use Drupal\Core\Ajax\ReplaceCommand;

use Drupal\Core\Ajax\OpenModalDialogCommand;

use Drupal\Core\Form\FormState;

use Drupal\Core\Link;

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

dn_students\dn_students.libraries.yml
global_styles:

  js:
    js/pagination.js: {}  
  css:
     theme:
          css/style.css: {}
 
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

dn_students\dn_students.libraries.yml

global_styles:

js:

js/pagination.js: {}

css:

theme:

css/style.css: {}

dependencies:

- core/jquery

- core/drupal.ajax

- core/drupal

- core/drupalSettings

- core/jquery.once

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.

if($fields["fname"] == ''){
		$css = ['border' => '1px solid red'];
		$text_css = ['color' => 'red'];
        $message = ('First Name not valid.');
	
		//$response = new \Drupal\Core\Ajax\AjaxResponse();
		$response->addCommand(new \Drupal\Core\Ajax\CssCommand('#edit-fname', $css));
		$response->addCommand(new \Drupal\Core\Ajax\CssCommand('#div-fname-message', $text_css));
		$response->addCommand(new \Drupal\Core\Ajax\HtmlCommand('#div-fname-message', $message));
		return $response;
	}

if($fields["fname"] == ''){

$css = ['border' => '1px solid red'];

$text_css = ['color' => 'red'];

$message = ('First Name not valid.');

//$response = new \Drupal\Core\Ajax\AjaxResponse();

$response->addCommand(new \Drupal\Core\Ajax\CssCommand('#edit-fname', $css));

$response->addCommand(new \Drupal\Core\Ajax\CssCommand('#div-fname-message', $text_css));

$response->addCommand(new \Drupal\Core\Ajax\HtmlCommand('#div-fname-message', $message));

return $response;

}

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.

$conn->insert('students')->fields($fields)->execute();
$field = $form_state->getValues();
	
   
	$fields["fname"] = $field['fname'];
	$fields["sname"] = $field['sname'];
	$fields["age"] = $field['age'];
	$fields["marks"] = $field['marks'];
$conn->insert('students')
           ->fields($fields)->execute();

$conn->insert('students')->fields($fields)->execute();

$field = $form_state->getValues();

$fields["fname"] = $field['fname'];

$fields["sname"] = $field['sname'];

$fields["age"] = $field['age'];

$fields["marks"] = $field['marks'];

$conn->insert('students')

->fields($fields)->execute();

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

$render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');
		 $response->addCommand(new HtmlCommand('.result_message','' ));
	 $response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));
	 $response->addCommand(new HtmlCommand('.pagination','' ));
	 $response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.pagination', getPager()));
	  $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));
	   $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));
	 $response->addCommand(new InvokeCommand('.txt-class', 'val', ['']));

$render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');

$response->addCommand(new HtmlCommand('.result_message','' ));

$response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));

$response->addCommand(new HtmlCommand('.pagination','' ));

$response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.pagination', getPager()));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));

$response->addCommand(new InvokeCommand('.txt-class', 'val', ['']));

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.

<?php
namespace Drupal\dn_students\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Database\Database;
use Drupal\Core\Url;
use Drupal\Core\Routing;
use Drupal\Core\Link;

/**
 * Provides the list of Students.
 */
class StudentTableForm extends FormBase {
	
	 /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'dn_student_table_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state,$pageNo = NULL) {
    
   
   //$pageNo = 2;
    $header = [
      'id' => $this->t('Id'),
      'fname' => $this->t('First Name'),
	  'sname' => $this->t('Second Name'),
	  'age'=> $this->t('age'),
	  'Marks'=> $this->t('Marks'),	  
	  'opt' =>$this->t('Operations')
    ];

    
	
   if($pageNo != ''){
    $form['table'] = [
      '#type' => 'table',
      '#header' => $header,
      '#rows' => $this->get_students($pageNo),
      '#empty' => $this->t('No users found'),
    ];
   }else{
	    $form['table'] = [
      '#type' => 'table',
      '#header' => $header,
      '#rows' => $this->get_students("All"),
      '#empty' => $this->t('No records found'),
    ];
   }
   //$form['form2'] = $this->get_students("All");
    $form['#attached']['library'][] = 'core/drupal.dialog.ajax';
	//$form['#attached']['library'][] = 'core/drupal.ajax';
	$form['#attached']['library'][] = 'dn_students/global_styles';
	
     $form['#theme'] = 'student_form';
	  $form['#prefix'] = '<div class="result_message">';
	   $form['#suffix'] = '</div>';
	  // $form_state['#no_cache'] = TRUE;
	   $form['#cache'] = [
      'max-age' => 0
    ];
    return $form;

  }

<?php

namespace Drupal\dn_students\Form;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\Database\Database;

use Drupal\Core\Url;

use Drupal\Core\Routing;

use Drupal\Core\Link;

/**

* Provides the list of Students.

class StudentTableForm extends FormBase {

/**

* {@inheritdoc}

public function getFormId() {

return 'dn_student_table_form';

}

/**

* {@inheritdoc}

public function buildForm(array $form, FormStateInterface $form_state,$pageNo = NULL) {

//$pageNo = 2;

$header = [

'id' => $this->t('Id'),

'fname' => $this->t('First Name'),

'sname' => $this->t('Second Name'),

'age'=> $this->t('age'),

'Marks'=> $this->t('Marks'),

'opt' =>$this->t('Operations')

];

if($pageNo != ''){

$form['table'] = [

'#type' => 'table',

'#header' => $header,

'#rows' => $this->get_students($pageNo),

'#empty' => $this->t('No users found'),

];

}else{

$form['table'] = [

'#type' => 'table',

'#header' => $header,

'#rows' => $this->get_students("All"),

'#empty' => $this->t('No records found'),

];

}

//$form['form2'] = $this->get_students("All");

$form['#attached']['library'][] = 'core/drupal.dialog.ajax';

//$form['#attached']['library'][] = 'core/drupal.ajax';

$form['#attached']['library'][] = 'dn_students/global_styles';

$form['#theme'] = 'student_form';

$form['#prefix'] = '<div class="result_message">';

$form['#suffix'] = '</div>';

// $form_state['#no_cache'] = TRUE;

$form['#cache'] = [

'max-age' => 0

];

return $form;

}

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.

function get_students($opt) {
	$res = array();
	//$opt = 2;
 if($opt == "All"){

  $results = \Drupal::database()->select('students', 'st');
 
  $results->fields('st');
  $results->range(0, 15);
  $results->orderBy('st.id','DESC');
  $res = $results->execute()->fetchAll();
  $ret = [];
 }else{
	 $query = \Drupal::database()->select('students', 'st');
  
  $query->fields('st');
  $query->range($opt*15, 15);
  $query->orderBy('st.id','DESC');
  $res = $query->execute()->fetchAll();
  $ret = [];
 }
    foreach ($res as $row) {

      
	  $edit = Url::fromUserInput('/ajax/dn_students/students/edit/' . $row->id);
	  //array('attributes' => array('onclick' => "return confirm('Are you Sure')"))
	  $delete = Url::fromUserInput('/del/dn_students/students/delete/' . $row->id,array('attributes' => array('onclick' => "return confirm('Are you Sure')")));
      
	  $edit_link = Link::fromTextAndUrl(t('Edit'), $edit);
	  $delete_link = Link::fromTextAndUrl(t('Delete'), $delete);
	  $edit_link = $edit_link->toRenderable();
      $delete_link  = $delete_link->toRenderable();
	  $edit_link['#attributes'] = ['class'=>'use-ajax'];
	  $delete_link['#attributes'] = ['class'=>'use-ajax'];
	 
       
      $mainLink = t('@linkApprove  @linkReject', array('@linkApprove' => $edit_link, '@linkReject' => $delete_link));
      
	  
      $ret[] = [
        'id' => $row->id,
        'fname' => $row->fname,
		'sname' => $row->sname,
		'age' => $row->age,
		'marks' => $row->marks,
        'opt' => render($delete_link),
		'opt1' => render($edit_link),
      ];
    }
    return $ret;
}

function get_students($opt) {

$res = array();

//$opt = 2;

if($opt == "All"){

$results = \Drupal::database()->select('students', 'st');

$results->fields('st');

$results->range(0, 15);

$results->orderBy('st.id','DESC');

$res = $results->execute()->fetchAll();

$ret = [];

}else{

$query = \Drupal::database()->select('students', 'st');

$query->fields('st');

$query->range($opt*15, 15);

$query->orderBy('st.id','DESC');

$res = $query->execute()->fetchAll();

$ret = [];

}

foreach ($res as $row) {

$edit = Url::fromUserInput('/ajax/dn_students/students/edit/' . $row->id);

//array('attributes' => array('onclick' => "return confirm('Are you Sure')"))

$delete = Url::fromUserInput('/del/dn_students/students/delete/' . $row->id,array('attributes' => array('onclick' => "return confirm('Are you Sure')")));

$edit_link = Link::fromTextAndUrl(t('Edit'), $edit);

$delete_link = Link::fromTextAndUrl(t('Delete'), $delete);

$edit_link = $edit_link->toRenderable();

$delete_link = $delete_link->toRenderable();

$edit_link['#attributes'] = ['class'=>'use-ajax'];

$delete_link['#attributes'] = ['class'=>'use-ajax'];

$mainLink = t('@linkApprove @linkReject', array('@linkApprove' => $edit_link, '@linkReject' => $delete_link));

$ret[] = [

'id' => $row->id,

'fname' => $row->fname,

'sname' => $row->sname,

'age' => $row->age,

'marks' => $row->marks,

'opt' => render($delete_link),

'opt1' => render($edit_link),

];

}

return $ret;

}

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.

dn_students.studentmanage:
  path: '/admin/structure/dn_students/students/manageStudents'
  defaults:
    _title: 'Students'
    _controller: '\Drupal\dn_students\Controller\StudentController::manageStudents'

dn_students.studentmanage:

path: '/admin/structure/dn_students/students/manageStudents'

defaults:

_title: 'Students'

_controller: '\Drupal\dn_students\Controller\StudentController::manageStudents'

Create the below controller file.

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

Add below function in this controller.

/**
   * {@inheritdoc}
   */
  public function manageStudents() {
	$form['form'] = $this->formBuilder()->getForm('Drupal\dn_students\Form\StudentForm');
	$render_array = $this->formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');
	   $form['form1'] = $render_array;
	    $form['form']['#suffix'] = '<div class="pagination">'.getPager().'</div>';
    return $form;
  }

/**

* {@inheritdoc}

public function manageStudents() {

$form['form'] = $this->formBuilder()->getForm('Drupal\dn_students\Form\StudentForm');

$render_array = $this->formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');

$form['form1'] = $render_array;

$form['form']['#suffix'] = '<div class="pagination">'.getPager().'</div>';

return $form;

}

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.

dn_students.edit_student_ajax:
  path: '/ajax/dn_students/students/edit/{cid}'
  defaults:
    _controller: '\Drupal\dn_students\Controller\StudentController::editStudentAjax'
    _title: 'Edit Student'
  requirements:
    _permission: 'administer Students'

dn_students.edit_student_ajax:

path: '/ajax/dn_students/students/edit/{cid}'

defaults:

_controller: '\Drupal\dn_students\Controller\StudentController::editStudentAjax'

_title: 'Edit Student'

requirements:

_permission: 'administer Students'

See below editStudentAjax function in StudentController

public function editStudentAjax($cid) {
    
	  $conn = Database::getConnection();
      $query = $conn->select('students', 'st');
      $query->condition('id', $cid)->fields('st');
      $record = $query->execute()->fetchAssoc();
    
	 $render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentEditForm',$record);
	 //$render_array['#attached']['library'][] = 'dn_students/global_styles';
	$response = new AjaxResponse();
	 $response->addCommand(new OpenModalDialogCommand('Edit Form', $render_array, ['width' => '800']));
	 
    return $response;
  }

public function editStudentAjax($cid) {

$conn = Database::getConnection();

$query = $conn->select('students', 'st');

$query->condition('id', $cid)->fields('st');

$record = $query->execute()->fetchAssoc();

$render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentEditForm',$record);

//$render_array['#attached']['library'][] = 'dn_students/global_styles';

$response = new AjaxResponse();

$response->addCommand(new OpenModalDialogCommand('Edit Form', $render_array, ['width' => '800']));

return $response;

}

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

<?php

namespace Drupal\dn_students\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Database\Database;
use Drupal\Core\Url;
use Drupal\Core\Routing;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\AlertCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Form\FormState;

/**
 * Provides the form for edit students.
 */
class StudentEditForm extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'dn_student_form_edit';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state,$record = NULL) {
    $conn = Database::getConnection();
    
    $language = \Drupal::languageManager()->getLanguages();

    if(isset($record['id'])){
		$form['id'] = [
		  '#type' => 'hidden',
		  '#attributes' => array(
             'class' => ['txt-class'],
           ),
		  '#default_value' => (isset($record['id'])) ? $record['id'] : '',
		];
	}
    $form['fname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('First Name'),
      '#required' => TRUE,
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => (isset($record['fname'])) ? $record['fname'] : '',
    ];
	 $form['sname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Second Name'),
      '#required' => TRUE,
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => (isset($record['sname'])) ? $record['sname'] : '',
	  
    ];
	$form['age'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Age'),
      '#required' => TRUE,
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => (isset($record['age'])) ? $record['age'] : '',
    ];
	 $form['marks'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Marks'),
      '#required' => TRUE,
      '#maxlength' => 20,
	  '#attributes' => array(
       'class' => ['txt-class'],
       ),
      '#default_value' => (isset($record['marks'])) ? $record['marks'] : '',
    ];
	
	
	
    $form['actions']['#type'] = 'actions';
    $form['actions']['Save'] = [
      '#type' => 'submit',
      '#button_type' => 'primary',
	   '#attributes' => [
        'class' => [
          'use-ajax',
        ],
      ],
	  '#ajax' => ['callback' => '::updateStudentData'] ,
      '#value' => (isset($record['fname'])) ? $this->t('Update') : $this->t('Save') ,
    ];
	
	 
	
	 $form['#prefix'] = '<div class="form-div-edit" id="form-div-edit">';
	 $form['#suffix'] = '</div>';
	
	  $form['#attached']['library'][] = 'core/drupal.dialog.ajax';
    return $form;

  }
  
   /**
   * {@inheritdoc}
   */
  public function validateForm(array & $form, FormStateInterface $form_state) {
        //print_r($form_state->getValues());exit;
		
  }
 
  public function updateStudentData(array $form, FormStateInterface $form_state) {
    $response = new AjaxResponse();

    // If there are any form errors, re-display the form.
    if ($form_state->hasAnyErrors()) {
      $response->addCommand(new ReplaceCommand('#form-div-edit', $form));
    }
    else {
		 $conn = Database::getConnection();
	$field = $form_state->getValues();
	$re_url = Url::fromRoute('dn_students.student');
   
	$fields["fname"] = $field['fname'];
	$fields["sname"] = $field['sname'];
	$fields["age"] = $field['age'];
	$fields["marks"] = $field['marks'];
	
      $conn->update('students')
           ->fields($fields)->condition('id', $field['id'])->execute();
      $response->addCommand(new OpenModalDialogCommand("Success!", 'The table has been submitted.', ['width' => 800]));
	  $render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');
	
	
	  $response->addCommand(new HtmlCommand('.result_message','' ));
	   $response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));
	   $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));
	   $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));
	 
    }

    return $response;
  }
  
  
  /**
   * {@inheritdoc}
   */
 public function submitForm(array & $form, FormStateInterface $form_state) {
	
  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<?php

namespace Drupal\dn_students\Form;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\Database\Database;

use Drupal\Core\Url;

use Drupal\Core\Routing;

use Drupal\Core\Ajax\AjaxResponse;

use Drupal\Core\Ajax\HtmlCommand;

use Drupal\Core\Ajax\InvokeCommand;

use Drupal\Core\Ajax\AlertCommand;

use Drupal\Core\Ajax\ReplaceCommand;

use Drupal\Core\Ajax\OpenModalDialogCommand;

use Drupal\Core\Form\FormState;

/**

* Provides the form for edit students.

class StudentEditForm extends FormBase {

/**

* {@inheritdoc}

public function getFormId() {

return 'dn_student_form_edit';

}

/**

* {@inheritdoc}

public function buildForm(array $form, FormStateInterface $form_state,$record = NULL) {

$conn = Database::getConnection();

$language = \Drupal::languageManager()->getLanguages();

if(isset($record['id'])){

$form['id'] = [

'#type' => 'hidden',

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => (isset($record['id'])) ? $record['id'] : '',

];

}

$form['fname'] = [

'#type' => 'textfield',

'#title' => $this->t('First Name'),

'#required' => TRUE,

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => (isset($record['fname'])) ? $record['fname'] : '',

];

$form['sname'] = [

'#type' => 'textfield',

'#title' => $this->t('Second Name'),

'#required' => TRUE,

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => (isset($record['sname'])) ? $record['sname'] : '',

];

$form['age'] = [

'#type' => 'textfield',

'#title' => $this->t('Age'),

'#required' => TRUE,

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => (isset($record['age'])) ? $record['age'] : '',

];

$form['marks'] = [

'#type' => 'textfield',

'#title' => $this->t('Marks'),

'#required' => TRUE,

'#maxlength' => 20,

'#attributes' => array(

'class' => ['txt-class'],

'#default_value' => (isset($record['marks'])) ? $record['marks'] : '',

];

$form['actions']['#type'] = 'actions';

$form['actions']['Save'] = [

'#type' => 'submit',

'#button_type' => 'primary',

'#attributes' => [

'class' => [

'use-ajax',

'#ajax' => ['callback' => '::updateStudentData'] ,

'#value' => (isset($record['fname'])) ? $this->t('Update') : $this->t('Save') ,

];

$form['#prefix'] = '<div class="form-div-edit" id="form-div-edit">';

$form['#suffix'] = '</div>';

$form['#attached']['library'][] = 'core/drupal.dialog.ajax';

return $form;

}

/**

* {@inheritdoc}

public function validateForm(array & $form, FormStateInterface $form_state) {

//print_r($form_state->getValues());exit;

}

public function updateStudentData(array $form, FormStateInterface $form_state) {

$response = new AjaxResponse();

// If there are any form errors, re-display the form.

if ($form_state->hasAnyErrors()) {

$response->addCommand(new ReplaceCommand('#form-div-edit', $form));

}

else {

$conn = Database::getConnection();

$field = $form_state->getValues();

$re_url = Url::fromRoute('dn_students.student');

$fields["fname"] = $field['fname'];

$fields["sname"] = $field['sname'];

$fields["age"] = $field['age'];

$fields["marks"] = $field['marks'];

$conn->update('students')

->fields($fields)->condition('id', $field['id'])->execute();

$response->addCommand(new OpenModalDialogCommand("Success!", 'The table has been submitted.', ['width' => 800]));

$render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');

$response->addCommand(new HtmlCommand('.result_message','' ));

$response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));

}

return $response;

}

/**

* {@inheritdoc}

public function submitForm(array & $form, FormStateInterface $form_state) {

}

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

dn_students.delete_student_ajax:
  path: '/ajax/dn_students/students/delete/{cid}'
  defaults:
    _controller: '\Drupal\dn_students\Controller\StudentController::deleteStudentAjax'
    _title: 'Delete Student'
  requirements:
    _permission: 'administer Students'

dn_students.delete_student_ajax:

path: '/ajax/dn_students/students/delete/{cid}'

defaults:

_controller: '\Drupal\dn_students\Controller\StudentController::deleteStudentAjax'

_title: 'Delete Student'

requirements:

_permission: 'administer Students'

In StudentController file see below deleteStudentAjax

public function deleteStudentAjax($cid) {
     $res = \Drupal::database()->query("delete from students where id = :id", array(':id' => $cid)); 
	// $render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');
	 $render_array = $this->formBuilder->getForm('Drupal\dn_students\Form\StudentTableForm','All');
	$response = new AjaxResponse();
	  //$response->addCommand(new HtmlCommand('.result_message',$render_array ));
	   $response->addCommand(new HtmlCommand('.result_message','' ));
	   $response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));
	   $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));
	   $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));
	   
    return $response;

  }

public function deleteStudentAjax($cid) {

$res = \Drupal::database()->query("delete from students where id = :id", array(':id' => $cid));

// $render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm','All');

$render_array = $this->formBuilder->getForm('Drupal\dn_students\Form\StudentTableForm','All');

$response = new AjaxResponse();

//$response->addCommand(new HtmlCommand('.result_message',$render_array ));

$response->addCommand(new HtmlCommand('.result_message','' ));

$response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link', 'removeClass', array('active')));

$response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.pagination-link:first', 'addClass', array('active')));

return $response;

}

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.

function getPager(){
	
   $query = \Drupal::database()->select('students', 't');
   $query->addExpression('COUNT(*)');
   $count = $query->execute()->fetchField();
 
  
  $count = ceil($count/15);

 $page_link = Url::fromUserInput('/ajax/dn_students/table/page/0');
 $page_link = Link::fromTextAndUrl('<<', $page_link);
 $page_link = $page_link->toRenderable();
 $page_link['#attributes'] = ['class'=>['use-ajax']];
  $out = render($page_link);
  for($i = 0; $i < $count; $i++){
   $page = Url::fromUserInput('/ajax/dn_students/table/page/'.$i);
   $pageLink =  Link::fromTextAndUrl($i, $page); 
   $pageLink = $pageLink->toRenderable();
   $pageLink['#attributes'] = ['class'=>['use-ajax','pagination-link']];
   $out = $out.render($pageLink); 
  }
  $last_page = $count-1;
  $page_link_last = Url::fromUserInput('/ajax/dn_students/table/page/'.$last_page);
  $page_link_last = Link::fromTextAndUrl('>>', $page_link_last);
  $page_link_last = $page_link_last->toRenderable();
  $page_link_last['#attributes'] = ['class'=>['use-ajax']];
   $out = $out.render($page_link_last);
  return $out;
	
}

function getPager(){

$query = \Drupal::database()->select('students', 't');

$query->addExpression('COUNT(*)');

$count = $query->execute()->fetchField();

$count = ceil($count/15);

$page_link = Url::fromUserInput('/ajax/dn_students/table/page/0');

$page_link = Link::fromTextAndUrl('<<', $page_link);

$page_link = $page_link->toRenderable();

$page_link['#attributes'] = ['class'=>['use-ajax']];

$out = render($page_link);

for($i = 0; $i < $count; $i++){

$page = Url::fromUserInput('/ajax/dn_students/table/page/'.$i);

$pageLink = Link::fromTextAndUrl($i, $page);

$pageLink = $pageLink->toRenderable();

$pageLink['#attributes'] = ['class'=>['use-ajax','pagination-link']];

$out = $out.render($pageLink);

}

$last_page = $count-1;

$page_link_last = Url::fromUserInput('/ajax/dn_students/table/page/'.$last_page);

$page_link_last = Link::fromTextAndUrl('>>', $page_link_last);

$page_link_last = $page_link_last->toRenderable();

$page_link_last['#attributes'] = ['class'=>['use-ajax']];

$out = $out.render($page_link_last);

return $out;

}

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.

dn_students.pagination_student_ajax:
  path: '/ajax/dn_students/table/page/{no}'
  defaults:
    _controller: '\Drupal\dn_students\Controller\StudentController::tablePaginationAjax'
    _title: 'Table Pagination Student'
  requirements:
    _permission: 'administer Students'

dn_students.pagination_student_ajax:

path: '/ajax/dn_students/table/page/{no}'

defaults:

_controller: '\Drupal\dn_students\Controller\StudentController::tablePaginationAjax'

_title: 'Table Pagination Student'

requirements:

_permission: 'administer Students'

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.

public function tablePaginationAjax($no){
	  $response = new AjaxResponse();
	  $render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm',$no);
	   $response->addCommand(new HtmlCommand('.result_message','' ));
	    $response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));
		
	 
	 return $response;
	  
  }

public function tablePaginationAjax($no){

$response = new AjaxResponse();

$render_array = \Drupal::formBuilder()->getForm('Drupal\dn_students\Form\StudentTableForm',$no);

$response->addCommand(new HtmlCommand('.result_message','' ));

$response->addCommand(new \Drupal\Core\Ajax\AppendCommand('.result_message', $render_array));

return $response;

}

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

global_styles:

  js:
    js/pagination.js: {}  
  css:
     theme:
          css/style.css: {}
 
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

global_styles:

js:

js/pagination.js: {}

css:

theme:

css/style.css: {}

dependencies:

- core/jquery

- core/drupal.ajax

- core/drupal

- core/drupalSettings

- core/jquery.once

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

function dn_students_element_info_alter(array &$types) {
	
  if (isset($types['table'])) {
    $types['table']['#attached']['library'][] = 'dn_students/dn_students';
  }
}

function dn_students_element_info_alter(array &$types) {

if (isset($types['table'])) {

$types['table']['#attached']['library'][] = 'dn_students/dn_students';

}

Download the source of the completed module here

if you like this article Buy me a Coffee this will be an ispiration for me to write articles like this.

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

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

You may also like...

Get a Free Ebook

Recent Posts

Categories

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

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

You may also like...

How to configure JSON API module and create web services using JSON API specifications in Drupal

How to import excel data to Drupal with custom module

Drupal Commerce Rest API – list Products and Product details

Get a Free Ebook

Recent Posts

Categories