Multiple AJAX requests in a module front controller

[Samantha_94]

Hi there,

I'm writing this post because maybe you'll be able to help me as I got stuck with the module that I'm creating. I'd like to create a module adding "remove all" button to a cart that shows confirmation modal after being clicked.

Up to this point I created the following:

1. Remove all button (see screenshot below)

2. Function in front controller that allows to remove products from cart.

2. Modal itself (see screenshot + please ignore styling)

I want the function removing products from cart to be executed after a user clicks the "confirm" button in the modal, however I can't target it using query selector in my front.js file. I tried to do this with nested AJAX request and when I did it this way I've had an access to the button, however when I clicked it, I got again response with modal.

My question is:

How to handle multiple AJAX requests using module controller?

How to access the button that I displayed using AJAX?

Below you'll also find my code from main module script with function rendering a modal, code from my front controller and my jquery ajax request.

Function rendering modal:

 public function displayModal() {
	return $this->display(__FILE__,'modal.tpl');
 }

Front controller:

class RemoveAllCartButtonAjaxModuleFrontController extends ModuleFrontController {

    public function initContent() {

        $this->ajax = true;

    }

    public function displayAjax() {

        $modal = array('modal' => $this->module->displayModal());

        exit(json_encode($modal));
    }

    public function removeAll(){
        $products = $this->context->cart->getProducts();
        foreach ($products as $product) {
            $this->context->cart->deleteProduct($product["id_product"],$product["id_product_attribute"]);
        }
    }

}

Jquery AJAX

$('.remove-all-btn').click((e) => {
    e.preventDefault();

    $.ajax({
        type: 'GET',
        url: controller_link,
        success: (res) => {
            const jsonData = JSON.parse(res);
            $('#footer').before(jsonData.modal)
        }
    })
});

 

Huge thank you in advance for any advises!