0

This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.

The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link. I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.

I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page--newsletter--subscribe.html.twig, its working But submit button not working not ajax is working.

    BootstrapDialog.show({
    title: 'Subscribe To Newsletter',
    message: jQuery('<div></div>').load('/newsletter/subscribe'),
    closable: false,
    draggable: true,
    closeByBackdrop: false,
    closeByKeyboard: false,
    buttons: [{
        label: 'Close',
        action: function(dialogRef){
            dialogRef.close();
        }
    }]
});

I saw there is an example in code node.preview.js file like this:

          var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
      Drupal.dialog($previewDialog, {
        title: Drupal.t('Leave preview?'),
        buttons: [{
          text: Drupal.t('Cancel'),
          click: function click() {
            $(this).dialog('close');
          }
        }, {
          text: Drupal.t('Leave preview'),
          click: function click() {
            window.top.location.href = event.target.href;
          }
        }]
      }).showModal();

But I never able to make it working in my custom module.

If some one can help on this, will be really great!

Update: I just tried to put a link manually in the template and tried to open the dialog, but it gives me some error:

<a href="/newsletter/registration" class="use-ajax " data-dialog-type="modal">Show Dialog</a>

The error is as follows:

dialog.js?v=8.6.4:35 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=8.6.4:35)
at Object.dialog.showModal (dialog.js?v=8.6.4:52)
at Drupal.AjaxCommands.openDialog (dialog.ajax.js?v=8.6.4:96)
at Drupal.Ajax.success (ajax.js?pkvhqx:155)
at Object.success (ajax.js?v=8.6.4:234)
at i (jquery.min.js?v=3.2.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
at A (jquery.min.js?v=3.2.1:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)

It seems some of the library is not loaded. Here is my global attachement:

  dependencies:
- core/jquery
- core/jquery.ui
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/drupal.dialog
- core/drupal.dialog.ajax
- core/jquery.form
- core/jquery.once
- core/modernizr
  • You can't just load a page/route with .load and expect that to work. You need to have something return a renderable form or a fully rendered form only, – Kevin Jan 5 at 17:51
  • that url "/newsletter/subscribe" - returning a subscription form – Md. Shafiq Hossain Jan 5 at 17:55
  • And that code is... – Kevin Jan 5 at 18:01
  • Its loading using router ymlp.route.registration: path: '/newsletter/registration' defaults: _form: '\Drupal\ymlp\Form\YmlpRegistrationForm' _title: 'Newsletter Registration' requirements: _permission: 'access content' – Md. Shafiq Hossain Jan 5 at 18:11
  • To go along the answer below... Where jQuery might use $('element').on('click', function), you can use $('element').click() in your .load() or .ready() for example. You can let jQuery click for the user. – Prestosaurus May 13 at 14:54
0

What I did, hide the link in the body and from javascript trigger the click event of the link, will show the dialog.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.