Published: July 5, 2023
Very Basic Example of Editing Drupal Nodes in a Modal
I was playing with adding use-ajax class to a Drupal listing this evening, so I could open a node and edit it in a modal.
The reason I was doing this was because I was thinking about how we could preview making changes to microsites (colours, fonts, etc) in the LocalGov Drupal Microsites distribution. I think this approach is quite a nice and simple first attempt at an approach for that.
The code to get the edit form in a modal was as simple as this:
<a href="/node/{{ node.id }}/edit" class="use-ajax" data-dialog-type="modal">Edit</a>The JavaScript was very messy, so I won't post it. The general outline was: when the modal is open, if the value in the ckeditor changes, then update the corresponding field with the new value.
Here's a video of me editing some nodes; pretend instead of text, I'm changing the values for colours and fonts and layout, etc in a microsite.