<p>As of Craft 2.2, all you need to do is add a <code>data-confirm-unload</code> attribute to the <code>&lt;form&gt;</code> element that wraps your Field Layout Designer:</p>

<pre class="lang-html prettyprint-override"><code>&lt;form method="post" accept-charset="UTF-8" data-confirm-unload&gt;
</code></pre>

<p>Craft will then automatically check to see if there were any changes in the form on page unload, and give the user a chance to stay on the page (same way the Edit Entry page works).</p>

CC BY-SA 3.0
2014-10-21T21:16:54.537Z
All I can say to this answer is WOW!!
Ben Croker
CC BY-SA 3.0
2014-10-21T21:46:55.590Z
First you let me beat Brad to the Tumbleweed badge, and then this elegant answer!
Ben Parizek
CC BY-SA 3.0
2014-10-21T17:04:42.730Z
2014-10-21T17:04:42.730Z
Brandon Kelly
<p>I've created a custom element type with it's own Field Layout Designer. The details about the custom element can be modified in the same form where the Field Layout Designer exists.  There is also a chance a person navigates away from the form without saving the changes after the Field Layout Designer is updated.</p>

<p>For example, if someone reorders one of the fields, doesn't save, and navigates away, the change they made in the editor may never get saved.  That's fine, and they have every right to, but I'd like to trigger a popup to warn them if they are about to navigate away without saved changes.</p>

<p>I can do this for all input fields with a snippet like the following.  The following snippet changes the isDirty variable to true and I can trigger a popup with my message if that value is true:</p>

<pre><code>$(':input').change(function () {
  isDirty = true;
});
</code></pre>

<p>I can't seem to figure out how to do this for the Field Layout Designer.  How can I set the value <code>isDirty</code> to true whenever someone reorders a field or tab, or perhaps drags anything.</p>

<p>I've tried to add a listener:</p>

<pre><code>this.addListener($('.tab.sel.draggable'), 'mouseup', '_onMouseUp');
</code></pre>

<p>And test for variables such as <code>Craft.FieldLayoutDesigner.fieldDrag</code> and <code>!Craft.dragger.dragging</code> but I haven't had any success and don't feel I'm approaching the problem with the right paradigm in my head.</p>

<p>Any ideas on how I can test if any items have been updated in the Field Layout Designer?</p>

<field-layout-designer>
How can I test if there are any changes in the Drag/Drop Field Layout Designer?
# How can I test if there are any changes in the Drag/Drop Field Layout Designer?

(Asked by: username_0 on 2014-10-14)

I've created a custom element type with it's own Field Layout Designer. The details about the custom element can be modified in the same form where the Field Layout Designer exists.  There is also a chance a person navigates away from the form without saving the changes after the Field Layout Designer is updated.
For example, if someone reorders one of the fields, doesn't save, and navigates away, the change they made in the editor may never get saved.  That's fine, and they have every right to, but I'd like to trigger a popup to warn them if they are about to navigate away without saved changes.
I can do this for all input fields with a snippet like the following.  The following snippet changes the isDirty variable to true and I can trigger a popup with my message if that value is true:
$(':input').change(function () {
  isDirty = true;
});

I can't seem to figure out how to do this for the Field Layout Designer.  How can I set the value isDirty to true whenever someone reorders a field or tab, or perhaps drags anything.
I've tried to add a listener:
this.addListener($('.tab.sel.draggable'), 'mouseup', '_onMouseUp');

And test for variables such as Craft.FieldLayoutDesigner.fieldDrag and !Craft.dragger.dragging but I haven't had any success and don't feel I'm approaching the problem with the right paradigm in my head.
Any ideas on how I can test if any items have been updated in the Field Layout Designer?

**Tags:** field-layout-designer


---

## 1 answers

### Answer by username_1 on 2014-10-21. Score: 3

As of Craft 2.2, all you need to do is add a data-confirm-unload attribute to the  element that wraps your Field Layout Designer:


Craft will then automatically check to see if there were any changes in the form on page unload, and give the user a chance to stay on the page (same way the Edit Entry page works).

> **Comments:**
> **username_2**: All I can say to this answer is WOW!!  
> **username_0**: First you let me beat Brad to the Tumbleweed badge, and then this elegant answer!  

---

