Toggle status through AJAX from the list in PrestaShop

In this blog, we are going to learn how to toggle the status of a particular record through AJAX (without reloading the list page) in PrestaShop.

In PrestaShop, when we toggle the status of a particular record from the admin list view, PrestaShop reloads the whole page which is very annoying sometimes.

Suppose you have a table ‘ps_test_user’ with 5 columns id_user, name, mobile, active and date_add.

For creating list columns in the back office, we define the ‘fields_list’ variable with the name of columns and its type in the admin controller’s class constructor:

ie.

$this->fields_list = array(
    'id_user' => array(
        'title' => $this->l('ID'),
        'align' => 'text-center',
        'class' => 'fixed-width-xs'
    ),
    'name' => array(
        'title' => $this->l('Name'),
    ),
    'mobile' => array(
        'title' => $this->l('Phone'),
    ),
    'active' => array(
        'title' => $this->l('Status'),
        'active' => 'status',
        'align' => 'center',
        'type' => 'bool',
        'orderby' => false,
    ),
    'date_add' => array(
        'title' => $this->l('Date'),
        'align' => 'text-left',
        'type' => 'datetime',
        'class' => 'fixed-width-lg',
    ),
);

To prevent the reloading of the list page when changing the status of a record, we have to modify the ‘active’ column definition:

• Change ‘active’ key value from ‘status’ to ‘toggleActive’ (you can write any valid method name)
• Added ‘ajax’ key with value ‘true’

ie.

'active' => array(
    'title' => $this->l('Status'),
    'active' => 'toggleActive',
    'align' => 'center',
    'type' => 'bool',
    'orderby' => false,
    'ajax' => true,
),

Now we need to create a public method in the same controller and name it in ‘ajaxProcess<ActiveKeyValue><TableName>’ format:

Where:

• ActiveKeyValue: active value as defined in the active column definition (ie. ‘toggleActive’)
• TableName: Name of the table without prefix in Camel Case format (table name is ‘test_user’ then it should be ‘TestUser’)

So the method name will be ‘ajaxProcessToggleActiveTestUser()’.

Write the code to toggle the status of the user and echo the JSON response in the below format:

{
    "success": true,
    "text": "You message"
}

public function ajaxProcessToggleActiveTestUser()
{
    $idUser = (int)Tools::getValue('id_user');
    $objUser = new TestUser((int)$idUser);
    $objUser->active = !$objUser->active;
    if ($objUser->save()) {
        die(Tools::jsonEncode(array(
            'success' => 1,
            'text' => $this->l('Status updated successfully!')
        )));
    } else {
        die(Tools::jsonEncode(array(
            'success' => 0,
            'text' => $this->l('Something went wrong!')
        )));
    }
}

Note:

If the response comes from Symfony controller then data has ‘status’ and ‘message’ properties otherwise if the response comes from legacy controller then data has ‘success’ and ‘text’ properties.