Dialog: Fails 'silently' when page not found or page can't be loaded

Created on 16 May 2023, about 1 year ago

Updated 2 June 2023, about 1 year ago

Problem/Motivation

When using Drupal's built in modal/dialog functionality ( https://www.drupal.org/docs/drupal-apis/ajax-api/ajax-dialog-boxes → ), if the URL it is trying to reach can't be reached for whatever reason, it fails silently. It shows the ajax loading icon for half a second and then it doesn't do anything. Your first thought is that the modal/ajax functionality is broken vs the URL being wrong, specially if the URL actually exists. If you check the console log, depending on what the URL is, it will say it can't find the page OR in a very frustrating manner, it will actually give you a 200 http code but not actually load the page.

Steps to reproduce

Using Drupal core 10.0.9

The 2 different variations here are either the page doesn't exist or the page can't be loaded for some reason (permissions??).. So create a link anywhere on your site with the following properties.
<a class="use-ajax" data-dialog-options="{"width":1200}" data-dialog-type="modal" href="asdfsdf">Click Link</a>
In your console it will say page not found, but it won't do anything on the actual page.

If you add a link like this one.
<a class="use-ajax" data-dialog-options="{"width":1200}" data-dialog-type="modal" href="/update.php">Update.php</a>
It will once again fail silently, and in the console it will say there was an ajax error, but actually give you a 200 http response which is super confusing, because once again you will think its a javascript / ajax issue, versus a permissions, or `this page can't be loaded on a drupal dialog because of reasons` thing.

Proposed resolution

I think we need to make sure the modal actually appears with some sort of message:
Either
"Page cannot be found"
or
"Page cannot be loaded"

Ideally something that signals to the user, the dialog/ajax functionality is in indeed working, its just your link is incorrect/wrong. I feel loading the 403/404 pages into the dialog result is probably overkill. Most jquery modal libraries have this sort of functionality to display a simple message of what went wrong to the user instead of expecting users to look at the console.