Very Basic Example of Editing Drupal Nodes in a Modal

Editing nodes in a modal? Yes, so you can preview the content before you hit save!
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/{{ }}/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.


Filed Under:

  1. Drupal
  2. LocalGov Drupal
  3. Drupal Planet
  4. JavaScript