Score:0

Why is Admin Toolbar preventing modal from opening?

us flag

I posted this a few weeks ago: Why doesn't form submit callback get called? and with @4k4's help was able to get my custom form opening a modal when the form was submitted (see answer posted there). I had to leave this for a few weeks and when coming back to it, it seemed as though my modal no longer opens.

My form submits and the throbber spins, but the modal never opens. I see this console error:

Object { message: "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 200\nDebugging information follows.\nPath: /create-mpep-quote?ajax_form=1\nStatusText: OK\nResponseText: \nAdd payment | Specialty Insurance Agency\nSkip to main content\nToolbar items\nBack to site\nManage\nAdministration menuToolsIndexFlush all cachesFlush CSS and JavaScriptFlush plugins cacheFlush render cacheFlush routing and links cacheFlush static cacheFlush twig cacheFlush views cacheRebuild theme registryFlush compiler cacheDevelopmentConfig editorDevel Toolbar SettingsDevel settingsElement InfoEntity infoExecute PHP CodeRebuild menuReinstall modulesSession viewerState editorTheme registryRun cronRun updatesLogoutContentSIA (Policies)Extra policiesParagraphsPolicies up for renewalAdd contentAccident InvestigationArticleBasic pageComponentEvent/VenueKnowledge BaseLanding PageMPEP ApplicationMPEP QuotePerformer Certificate RequestPerformer Insurance ApplicationPolicyRequest Account ChangeSIA SlideshowSpecial EventTeamTestimonialsUpgradeVendor…", name: "AjaxError", stack: "@http://mysite/core/misc/ajax.js?v=9.4.2:110:32\n@http://mysite/core/misc/ajax.js?v=9.4.2:676:3\n" }

Not of too much use but it does look like some entries from the Admin Toolbar in the ajax response. I then recalled I was testing this a few weeks ago as anonymous (which won't have the toolbar enabled). Trying again as anonymous (or any non-admin account) and the modal does open correctly.

The modal code is pretty straight forward:

Controller to load a Node create form:

  public function createQuote() {
    $node = Node::create(['type' => 'mpep_quote']);
    $form = \Drupal::service('entity.form_builder')->getForm($node);
    $form['#attached']['library'][] = 'core/drupal.dialog.ajax';

    return $form;
  }

A form alter before-hand to modify the Node add form:

  $form['actions']['submit'] = array_merge($form['actions']['submit'], [
    '#value' => t('Get quote'),
    '#ajax' => [
      'callback' => 'openQuoteModal',
      'event' => 'click',
    ]
  ]);

And the function to open the modal:

function openQuoteModal($form, $form_state) {
  $response = new AjaxResponse();
  $cart = "Hello world!!";

  // Add an AJAX command to open a modal dialog with the form as the content.
  $response->addCommand(new OpenModalDialogCommand('Your quote', $cart, ['width' => '1000']));

  return $response;
}

Is there something that needs to be done with the modal code to prevent the toolbar from messing this up? Possibly as simple as a $response call to remove the toolbar?

Jaypan avatar
de flag
It looks like your AJAX is returning an HTML response, instead of a JSON response. The ajax callback you have looks fine so I'm suspecting it's something else in your system. Do you see any other errors in your logs?
liquidcms avatar
us flag
No errors in log and that's the only js error. I'll keep looking.
Jaypan avatar
de flag
Are you using a template for the form? Also, try uninstalling the Admin Toolbar module, and see if the Ajax works without it, to determine if that module is actually what's causing your issue (I suspect it's not)
liquidcms avatar
us flag
Good suggestion. Correct, it is not the toolbar. Disabling the toolbar removes all the toolbar items from the ajax response and allows seeing more of the output (I guess it only shows limited amount of the response in the console). Now I can see more of the actual output which is a page that the output is redirected to. Thanks.
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.