fix javascript event propagation causing multiple ajax requests and weird behaviors with modal

Author: rande

CHANGES

@@ -1,4 +1,9 @@
-08/02/2011
+03/03/2011
+----------
+* add sortable option
+
+
+ 08/02/2011
 ----------
 * add prototype for nested admin
 

Resources/public/base.js

@@ -7,9 +7,26 @@ jQuery(document).ready(function() {
 
 var Admin = {
 
-    add_pretty_errors: function(subject) {
-
+    /**
+     * render log message
+     * @param mixed
+     */
+    log: function() {
+        var msg = '[Sonata.Admin] ' + Array.prototype.join.call(arguments,', ');
+        if (window.console && window.console.log) {
+            window.console.log(msg);
+        }
+        else if (window.opera && window.opera.postError) {
+            window.opera.postError(msg);
+        }
+    },
 
+    /**
+     * display related errors messages
+     * 
+     * @param subject
+     */
+    add_pretty_errors: function(subject) {
         jQuery('div.sonata-ba-field-error', subject).each(function(index, element) {
             var input = jQuery('input, textarea', element);
 
@@ -44,6 +61,11 @@ var Admin = {
         });
     },
 
+    /**
+     * Add the collapsed toggle option to the admin
+     *
+     * @param subject
+     */
     add_collapsed_toggle: function(subject) {
         jQuery('fieldset legend a.sonata-ba-collapsed', subject).live('click', function(event) {
             event.preventDefault();

Resources/views/CRUD/edit_many_association_script.html.twig

@@ -30,7 +30,8 @@ This code manage the many-to-[one|many] association field popup
         initialize_popup_{{ field_element.id }}();
         
         event.preventDefault();
-
+        event.stopPropagation();
+        
         var element = jQuery(this).parents('#field_dialog_{{ field_element.id }} td.sonata-ba-list-field');
 
         // the user does does click on a row column
@@ -60,7 +61,8 @@ This code manage the many-to-[one|many] association field popup
         initialize_popup_{{ field_element.id }}();
 
         event.preventDefault();
-
+        event.stopPropagation();
+        
         var a = jQuery(this);
 
         field_dialog_{{ field_element.id }}.html('');
@@ -113,15 +115,19 @@ This code manage the many-to-[one|many] association field popup
         initialize_popup_{{ field_element.id }}();
 
         event.preventDefault();
+        event.stopPropagation();
 
         var a = jQuery(this);
 
         field_dialog_{{ field_element.id }}.html('');
 
+        Admin.log('[{{ field_element.id }}|field_dialog_form_add] add link action');
         // retrieve the form element from the related admin generator
         jQuery.ajax({
             url: a.attr('href'),
             success: function(html) {
+
+                Admin.log('[{{ field_element.id }}|field_dialog_form_add] ajax success', field_dialog_{{ field_element.id }});
                 
                 // populate the popup container
                 field_dialog_{{ field_element.id }}.html(html);
@@ -139,6 +145,7 @@ This code manage the many-to-[one|many] association field popup
                     resizable: false,
                     title: '{{ field_description.associationadmin.label }}',
                     close: function(event, ui) {
+                        Admin.log('[{{ field_element.id }}|field_dialog_form_add] dialog closed - removing `live` events');
                         // make sure we have a clean state
                         jQuery('a', field_dialog_{{ field_element.id }}).die('click');
                         jQuery('form', field_dialog_{{ field_element.id }}).die('submit');
@@ -152,7 +159,9 @@ This code manage the many-to-[one|many] association field popup
     var field_dialog_form_action_{{ field_element.id }} = function(event) {
 
         event.preventDefault();
-
+        event.stopPropagation();
+        
+        Admin.log('[{{ field_element.id }}|field_dialog_form_action] action catch', this);
         initialize_popup_{{ field_element.id }}();
 
         var element = jQuery(this);
@@ -168,19 +177,27 @@ This code manage the many-to-[one|many] association field popup
             return;
         }
 
+        if(element.hasClass('sonata-ba-action')) {
+            Admin.log('[{{ field_element.id }}|field_dialog_form_action] reserved action stop catch all events');
+            return;
+        }
+
         var data = {
             _xml_http_request: true
         }
 
         var form = jQuery(this);
 
+        Admin.log('[{{ field_element.id }}|field_dialog_form_action] execute ajax call');
+        
         // the ajax post
         jQuery(form).ajaxSubmit({
             url: url,
             type: type,
             data: data,
             success: function(data) {
 
+                Admin.log('[{{ field_element.id }}|field_dialog_form_action] ajax success');
                 if(typeof data == 'string') {
                     field_dialog_{{ field_element.id }}.html(data);
                     return;
@@ -243,6 +260,8 @@ This code manage the many-to-[one|many] association field popup
 
             // move the dialog as a child of the root element, nested form breaks html ...
             jQuery(document).append(field_dialog_{{ field_element.id }});
+
+            Admin.log('[{{ field_element.id }}|field_dialog] move dialog container as a document child');
         }
     }
 

Resources/views/CRUD/edit_many_to_many.html.twig

@@ -21,8 +21,11 @@ file that was distributed with this source code.
             <a
                 href="{{ field_description.associationadmin.generateUrl('create') }}"
                 onclick="start_field_dialog_form_add_{{ field_element.id }}(event)"
-                class="action">
-                    <img src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}" alt="{% trans 'btn_add' from 'AdminBundle' %}" />
+                class="sonata-ba-action">
+                    <img
+                        src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}"
+                        alt="{% trans 'btn_add' from 'AdminBundle' %}"
+                    />
             </a>
         </span>
 

Resources/views/CRUD/edit_many_to_one.html.twig

@@ -43,10 +43,22 @@ file that was distributed with this source code.
             <span id="field_actions_{{ field_element.id }}" >
 
                 {% if field_description.options.edit == 'list' %}
-                    <a href="{{ field_description.associationadmin.generateUrl('list') }}" onclick="start_field_dialog_form_list_{{ field_element.id }}(event)" class="action"><img src="{{ asset('bundles/sonataadmin/famfamfam/application_view_list.png') }}" alt="{% trans 'btn_add' from 'AdminBundle' %}" /></a>
+                    <a  href="{{ field_description.associationadmin.generateUrl('list') }}"
+                        onclick="start_field_dialog_form_list_{{ field_element.id }}(event)"
+                        class="sonata-ba-action">
+                        <img src="{{ asset('bundles/sonataadmin/famfamfam/application_view_list.png') }}"
+                             alt="{% trans 'btn_add' from 'AdminBundle' %}"
+                        />
+                    </a>
                 {% endif %}
 
-                <a href="{{ field_description.associationadmin.generateUrl('create') }}" onclick="start_field_dialog_form_add_{{ field_element.id }}(event)" class="action"><img src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}" alt="{% trans 'btn_add' from 'AdminBundle' %}" /></a>
+                <a  href="{{ field_description.associationadmin.generateUrl('create') }}"
+                    onclick="start_field_dialog_form_add_{{ field_element.id }}(event)"
+                    class="sonata-ba-action">
+                        <img src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}"
+                            alt="{% trans 'btn_add' from 'AdminBundle' %}"
+                        />
+                </a>
             </span>
 
             <div class="container sonata-ba-modal sonata-ba-modal-edit-one-to-one" style="display: none" id="field_dialog_{{ field_element.id }}">

Resources/views/CRUD/edit_one_association_script.html.twig

@@ -26,6 +26,7 @@ This code manage the one-to-many association field popup
     var field_add_{{ field_element.id }} = function(event) {
 
         event.preventDefault();
+        event.stopPropagation();
 
         var form = jQuery(this).closest('form');
 

Resources/views/CRUD/edit_one_to_many.html.twig

@@ -68,7 +68,7 @@ file that was distributed with this source code.
                 <a
                     href="{{ field_description.associationadmin.generateUrl('create') }}"
                     onclick="start_field_retrieve_{{ field_element.id }}(event)"
-                    class="action">
+                    class="sonata-ba-action">
                     <img
                         src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}"
                         alt="{% trans 'btn_add' from 'AdminBundle' %}"
@@ -90,13 +90,11 @@ file that was distributed with this source code.
                         // update the input value position
                         jQuery('div#field_container_{{ field_element.id }} tbody.sonata-ba-tbody td.sonata-ba-td-{{ field_element.id }}-position').each(function(index, element) {
                             // remove the sortable handler and put it back
-
-                            // <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
-
                             jQuery('span.sonata-ba-sortable-handler', element).remove();
-                            jQuery(element).append('<span class="sonata-ba-sortable-handler ui-icon ui-icon-arrowthick-2-n-s"></span>');
+                            jQuery(element).append('<span class="sonata-ba-sortable-handler ui-icon ui-icon-grip-solid-horizontal"></span>');
                             jQuery('input', element).hide();
                         });
+                        
                         jQuery('div#field_container_{{ field_element.id }} tbody.sonata-ba-tbody td.sonata-ba-td-{{ field_element.id }}-position input').each(function(index, value) {
                             jQuery(value).val(index + 1);
                         });
@@ -121,7 +119,7 @@ file that was distributed with this source code.
                 <a
                     href="{{ field_description.associationadmin.generateUrl('create') }}"
                     onclick="start_field_dialog_form_add_{{ field_element.id }}(event)"
-                    class="action">
+                    class="sonata-ba-action">
                     <img
                         src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}"
                         alt="{% trans 'btn_add' from 'AdminBundle' %}"

Resources/views/CRUD/edit_one_to_one.html.twig

@@ -42,10 +42,24 @@ file that was distributed with this source code.
             <span id="field_actions_{{ field_element.id }}" >
 
                 {% if field_description.options.edit == 'list' %}
-                    <a href="{{ field_description.associationadmin.generateUrl('list') }}" onclick="start_field_dialog_form_list_{{ field_element.id }}(event)" class="action"><img src="{{ asset('bundles/sonataadmin/famfamfam/application_view_list.png') }}" alt="{% trans 'btn_add' from 'AdminBundle' %}" /></a>
+                    <a  href="{{ field_description.associationadmin.generateUrl('list') }}"
+                        onclick="start_field_dialog_form_list_{{ field_element.id }}(event)"
+                        class="sonata-ba-action">
+                            <img
+                                src="{{ asset('bundles/sonataadmin/famfamfam/application_view_list.png') }}"
+                                alt="{% trans 'btn_add' from 'AdminBundle' %}"
+                            />
+                          </a>
                 {% endif %}
 
-                <a href="{{ field_description.associationadmin.generateUrl('create') }}" onclick="start_field_dialog_form_add_{{ field_element.id }}(event)" class="action"><img src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}" alt="{% trans 'btn_add' from 'AdminBundle' %}" /></a>
+                <a  href="{{ field_description.associationadmin.generateUrl('create') }}"
+                    onclick="start_field_dialog_form_add_{{ field_element.id }}(event)"
+                    class="sonata-ba-action">
+                        <img
+                            src="{{ asset('bundles/sonataadmin/famfamfam/add.png') }}"
+                            alt="{% trans 'btn_add' from 'AdminBundle' %}"
+                        />
+                </a>
             </span>
 
             <div class="container sonata-ba-modal sonata-ba-modal-edit-one-to-one" style="display: none" id="field_dialog_{{ field_element.id }}">