How to load and render a webform with Ajax

Question

I'm new on Drupal 8, and I want to make a custom module to load any webform of (webform module) on other pages of the website.

The idea is to load the webform when the page load. All webform has configured with ajax submission.

I don't know how I can do that. I someone can help me. I'm on Drupal 8

---

I've create a custom module with a custom path in routing.yml:

path: '/webform-data/{webformid}'

In my controller I've created a public function to retrieve the webform by id.

I want for example create a link, like:

<a href="/webform-data/{webformid}">Click</a>

When I click on the link, the webform load in a wrapper, but when I submit the webform, I have a redirection to the path of webform and I don't want the redirection. I just want the inline confirm message without reloading the page.

I have this in my controller :

// Controller
namespace Drupal\ajax_webform\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Ajax\AjaxResponse;
use \Symfony\Component\HttpFoundation\Response;

class AjaxWebformController extends ControllerBase {

    public function getWebform($webformid) {

        $build['webform'] = [
            '#type' => 'webform',
            '#webform' => $webformid
        ];

        $renderer = \Drupal::service('renderer');
        $rendered = $renderer->renderRoot($build);

        $response = new Response();
        $response->setContent($rendered);
        return $response;
    }

}

Answer 1

I think this is the basic code of a controller which loads and renders a webform with ajax:

  public function getWebform($webformid) {

    $build['webform'] = [
      '#type' => 'webform',
      '#webform' => $webformid,
    ];

    $response = new AjaxResponse();
    $response->addCommand(new HtmlCommand('#webform-wrapper', $build));

    return $response;
  }

The link ajaxified by adding the class use-ajax:

<a href="/webform-data/{webformid}" class="use-ajax">Click</a>

You need the library core/drupal.ajax for the page containing this link and a <div id="webform-wrapper"></div> as target.

Answer 2

You might want to look into the Ajax links API. Sadly, there is an issue with the Webform module and BigPipe that needs to be fixed.