vendor/sonata-project/admin-bundle/src/Resources/views/CRUD/Association/edit_many_script.html.twig line 305

Open in your IDE?
  1. {#
  3. This file is part of the Sonata package.
  5. (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
  7. For the full copyright and license information, please view the LICENSE
  8. file that was distributed with this source code.
  10. #}
  13. {#
  15. This code manages the many-to-[one|many] association field popup
  17. #}
  19. {% autoescape false %}
  21. {% set associationadmin = sonata_admin.field_description.associationadmin %}
  23. <!-- edit many association -->
  25. <script type="text/javascript">
  27.     {#
  28.       handle link click in a list :
  29.         - if the parent has an objectId defined then the related input get updated
  30.         - if the parent has NO object then an ajax request is made to refresh the popup
  31.     #}
  33.     var field_dialog_form_list_link_{{ id }} = function(event) {
  34.         initialize_popup_{{ id }}();
  36.         var target = jQuery(this);
  38.         if (target.attr('href').length === 0 || target.attr('href') === '#') {
  39.             return;
  40.         }
  42.         event.preventDefault();
  43.         event.stopPropagation();
  45.         Admin.log('[{{ id }}|field_dialog_form_list_link] handle link click in a list');
  47.         var element = jQuery(this).parents('#field_dialog_{{ id }} .sonata-ba-list-field');
  49.         // the user does not click on a row column
  50.         if (element.length == 0) {
  51.             Admin.log('[{{ id }}|field_dialog_form_list_link] the user does not click on a row column, make ajax call to retrieve inner html');
  52.             // make a recursive call (ie: reset the filter)
  53.             jQuery.ajax({
  54.                 type: 'GET',
  55.                 url: jQuery(this).attr('href'),
  56.                 dataType: 'html',
  57.                 success: function(html) {
  58.                     Admin.log('[{{ id }}|field_dialog_form_list_link] callback success, attach valid js event');
  60.                     field_dialog_content_{{ id }}.html(html);
  61.                     field_dialog_form_list_handle_action_{{ id }}();
  63.                     Admin.shared_setup(field_dialog_{{ id }});
  64.                 }
  65.             });
  67.             return;
  68.         }
  70.         Admin.log('[{{ id }}|field_dialog_form_list_link] the user select one element, update input and hide the modal');
  72.         jQuery('#{{ id }}').val(element.attr('objectId'));
  73.         jQuery('#{{ id }}').trigger('change');
  75.         field_dialog_{{ id }}.modal('hide');
  76.     };
  78.     // this function handle action on the modal list when inside a selected list
  79.     var field_dialog_form_list_handle_action_{{ id }}  =  function() {
  80.         Admin.log('[{{ id }}|field_dialog_form_list_handle_action] attaching valid js event');
  82.         // capture the submit event to make an ajax call, ie : POST data to the
  83.         // related create admin
  84.         jQuery('a', field_dialog_{{ id }}).on('click', field_dialog_form_list_link_{{ id }});
  85.         jQuery('form', field_dialog_{{ id }}).on('submit', function(event) {
  86.             event.preventDefault();
  88.             var form = jQuery(this);
  90.             Admin.log('[{{ id }}|field_dialog_form_list_handle_action] catching submit event, sending ajax request');
  92.             jQuery(form).ajaxSubmit({
  93.                 type: form.attr('method'),
  94.                 url: form.attr('action'),
  95.                 dataType: 'html',
  96.                 data: {_xml_http_request: true},
  97.                 success: function(html) {
  99.                     Admin.log('[{{ id }}|field_dialog_form_list_handle_action] form submit success, restoring event');
  101.                     field_dialog_content_{{ id }}.html(html);
  102.                     field_dialog_form_list_handle_action_{{ id }}();
  104.                     Admin.shared_setup(field_dialog_{{ id }});
  105.                 }
  106.             });
  107.         });
  108.     };
  110.     // handle the list link
  111.     var field_dialog_form_list_{{ id }} = function(event) {
  113.         initialize_popup_{{ id }}();
  115.         event.preventDefault();
  116.         event.stopPropagation();
  118.         Admin.log('[{{ id }}|field_dialog_form_list] open the list modal');
  120.         var a = jQuery(this);
  122.         field_dialog_content_{{ id }}.html('');
  124.         // retrieve the form element from the related admin generator
  125.         jQuery.ajax({
  126.             url: a.attr('href'),
  127.             dataType: 'html',
  128.             success: function(html) {
  130.                 Admin.log('[{{ id }}|field_dialog_form_list] retrieving the list content');
  132.                 // populate the popup container
  133.                 field_dialog_content_{{ id }}.html(html);
  135.                 field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  137.                 Admin.shared_setup(field_dialog_{{ id }});
  139.                 field_dialog_form_list_handle_action_{{ id }}();
  141.                 // open the dialog in modal mode
  142.                 field_dialog_{{ id }}.modal();
  144.                 Admin.setup_list_modal(field_dialog_{{ id }});
  145.             }
  146.         });
  147.     };
  149.     // handle the add link
  150.     var field_dialog_form_add_{{ id }} = function(event) {
  151.         initialize_popup_{{ id }}();
  153.         event.preventDefault();
  154.         event.stopPropagation();
  156.         var a = jQuery(this);
  158.         field_dialog_content_{{ id }}.html('');
  160.         Admin.log('[{{ id }}|field_dialog_form_add] add link action');
  162.         // retrieve the form element from the related admin generator
  163.         jQuery.ajax({
  164.             url: a.attr('href'),
  165.             dataType: 'html',
  166.             success: function(html) {
  168.                 Admin.log('[{{ id }}|field_dialog_form_add] ajax success', field_dialog_{{ id }});
  170.                 // populate the popup container
  171.                 field_dialog_content_{{ id }}.html(html);
  172.                 field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  174.                 Admin.shared_setup(field_dialog_{{ id }});
  176.                 // capture the submit event to make an ajax call, ie : POST data to the
  177.                 // related create admin
  178.                 jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  179.                 jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  181.                 // open the dialog in modal mode
  182.                 field_dialog_{{ id }}.modal();
  184.                 Admin.setup_list_modal(field_dialog_{{ id }});
  185.             }
  186.         });
  187.     };
  189.     // handle the edit link
  190.     var field_dialog_form_edit_{{ id }} = function(event) {
  191.         initialize_popup_{{ id }}();
  193.         event.preventDefault();
  194.         event.stopPropagation();
  196.         var a = jQuery(this);
  198.         field_dialog_content_{{ id }}.html('');
  200.         Admin.log('[{{ id }}|field_dialog_form_edit] edit link action');
  202.         // retrieve the form element from the related admin generator
  203.         jQuery.ajax({
  204.             url: a.attr('href'),
  205.             dataType: 'html',
  206.             success: function(html) {
  208.                 Admin.log('[{{ id }}|field_dialog_form_edit] ajax success', field_dialog_{{ id }});
  210.                 // populate the popup container
  211.                 field_dialog_content_{{ id }}.html(html);
  212.                 field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  214.                 Admin.shared_setup(field_dialog_{{ id }});
  216.                 // capture the submit event to make an ajax call, ie : POST data to the
  217.                 // related create admin
  218.                 jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  219.                 jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  221.                 // open the dialog in modal mode
  222.                 field_dialog_{{ id }}.modal();
  224.                 Admin.setup_list_modal(field_dialog_{{ id }});
  225.             }
  226.         });
  227.     };
  229.     // handle the post data
  230.     var field_dialog_form_action_{{ id }} = function(event) {
  232.         var element = jQuery(this);
  234.         // return if the link is an anchor inside the same page
  235.         if (
  236.             this.nodeName === 'A'
  237.             && (
  238.                 element.attr('href').length === 0
  239.                 || element.attr('href')[0] === '#'
  240.                 || element.attr('href').substr(0, 11) === 'javascript:'
  241.             )
  242.         ) {
  243.             Admin.log('[{{ id }}|field_dialog_form_action] element is an anchor or a script, skipping action', this);
  244.             return;
  245.         }
  247.         event.preventDefault();
  248.         event.stopPropagation();
  250.         Admin.log('[{{ id }}|field_dialog_form_action] action catch', this);
  252.         initialize_popup_{{ id }}();
  254.         if (this.nodeName == 'FORM') {
  255.             var url  = element.attr('action');
  256.             var type = element.attr('method');
  257.         } else if (this.nodeName == 'A') {
  258.             var url  = element.attr('href');
  259.             var type = 'GET';
  260.         } else {
  261.             alert('unexpected element : @' + this.nodeName + '@');
  262.             return;
  263.         }
  265.         if (element.hasClass('sonata-ba-action')) {
  266.             Admin.log('[{{ id }}|field_dialog_form_action] reserved action stop catch all events');
  267.             return;
  268.         }
  270.         var data = {
  271.             _xml_http_request: true
  272.         }
  274.         var form = jQuery(this);
  276.         Admin.log('[{{ id }}|field_dialog_form_action] execute ajax call');
  278.         // the ajax post
  279.         jQuery(form).ajaxSubmit({
  280.             url: url,
  281.             type: type,
  282.             data: data,
  283.             success: function(data) {
  284.                 Admin.log('[{{ id }}|field_dialog_form_action] ajax success');
  286.                 // if the crud action return ok, then the element has been added
  287.                 // so the widget container must be refresh with the last option available
  288.                 if (typeof data != 'string' && data.result == 'ok') {
  289.                     field_dialog_{{ id }}.modal('hide');
  291.                     {% if sonata_admin.edit == 'list' %}
  292.                         {#
  293.                            in this case we update the hidden input, and call the change event to
  294.                            retrieve the post information
  295.                         #}
  296.                         jQuery('#{{ id }}').val(data.objectId);
  297.                         jQuery('#{{ id }}').change();
  299.                     {% else %}
  301.                         // reload the form element
  302.                         jQuery('#field_widget_{{ id }}').closest('form').ajaxSubmit({
  303.                             url: '{{ path('sonata_admin_retrieve_form_element', {
  304.                                 'elementId': id,
  305.                                 'subclass':  sonata_admin.admin.getActiveSubclassCode(),
  306.                                 'objectId':  sonata_admin.admin.root.id(sonata_admin.admin.root.subject),
  307.                                 'uniqid':    sonata_admin.admin.root.uniqid,
  308.                                 'code':      sonata_admin.admin.root.code
  309.                             }) }}',
  310.                             data: {_xml_http_request: true },
  311.                             dataType: 'html',
  312.                             type: 'POST',
  313.                             success: function(html) {
  314.                                 jQuery('#field_container_{{ id }}').replaceWith(html);
  315.                                 var newElement = jQuery('#{{ id }} [value="' + data.objectId + '"]');
  316.                                 if (newElement.is("input")) {
  317.                                     newElement.attr('checked', 'checked');
  318.                                 } else {
  319.                                     newElement.attr('selected', 'selected');
  320.                                 }
  322.                                 jQuery('#field_container_{{ id }}').trigger('sonata-admin-append-form-element');
  323.                             }
  324.                         });
  326.                     {% endif %}
  328.                     return;
  329.                 }
  331.                 // otherwise, display form error
  332.                 field_dialog_content_{{ id }}.html(data);
  334.                 Admin.shared_setup(field_dialog_{{ id }});
  336.                 // reattach the event
  337.                 jQuery('form', field_dialog_{{ id }}).submit(field_dialog_form_action_{{ id }});
  338.             }
  339.         });
  341.         return false;
  342.     };
  344.     var field_dialog_{{ id }}         = false;
  345.     var field_dialog_content_{{ id }} = false;
  346.     var field_dialog_title_{{ id }}   = false;
  348.     function initialize_popup_{{ id }}() {
  349.         // initialize component
  350.         if (!field_dialog_{{ id }}) {
  351.             field_dialog_{{ id }}         = jQuery("#field_dialog_{{ id }}");
  352.             field_dialog_content_{{ id }} = jQuery(".modal-body", "#field_dialog_{{ id }}");
  353.             field_dialog_title_{{ id }}   = jQuery(".modal-title", "#field_dialog_{{ id }}");
  355.             // move the dialog as a child of the root element, nested form breaks html ...
  356.             jQuery(document.body).append(field_dialog_{{ id }});
  358.             Admin.log('[{{ id }}|field_dialog] move dialog container as a document child');
  359.         }
  360.     }
  362.     {#
  363.         This code is used to define the "add" popup
  364.     #}
  365.     // this function initializes the popup
  366.     // this can be only done this way as popup can be cascaded
  367.     function start_field_dialog_form_add_{{ id }}(link) {
  369.         // remove the html event
  370.         link.onclick = null;
  372.         initialize_popup_{{ id }}();
  374.         // add the jQuery event to the a element
  375.         jQuery(link)
  376.             .click(field_dialog_form_add_{{ id }})
  377.             .trigger('click')
  378.         ;
  380.         return false;
  381.     }
  383.     {#
  384.         This code is used to define the "edit" popup
  385.     #}
  386.     // this function initializes the popup
  387.     // this can only be done this way as popup can be cascaded
  388.     function start_field_dialog_form_edit_{{ id }}(link) {
  390.         // remove the html event
  391.         link.onclick = null;
  393.         initialize_popup_{{ id }}();
  395.         // add the jQuery event to the a element
  396.         jQuery(link)
  397.             .click(field_dialog_form_edit_{{ id }})
  398.             .trigger('click')
  399.         ;
  401.         return false;
  402.     }
  404.     if (field_dialog_{{ id }}) {
  405.         Admin.shared_setup(field_dialog_{{ id }});
  406.     }
  408.     {% if sonata_admin.edit == 'list' %}
  409.         {#
  410.             This code is used to defined the "list" popup
  411.         #}
  412.         // this function initializes the popup
  413.         // this can be only done this way as popup can be cascaded
  414.         function start_field_dialog_form_list_{{ id }}(link) {
  416.             link.onclick = null;
  418.             initialize_popup_{{ id }}();
  420.             // add the jQuery event to the a element
  421.             jQuery(link)
  422.                 .click(field_dialog_form_list_{{ id }})
  423.                 .trigger('click')
  424.             ;
  426.             return false;
  427.         }
  429.         function remove_selected_element_{{ id }}(link) {
  431.             link.onclick = null;
  433.             jQuery(link)
  434.                 .click(field_remove_element_{{ id }})
  435.                 .trigger('click')
  436.             ;
  438.             return false;
  439.         }
  441.         function field_remove_element_{{ id }}(event) {
  442.             event.preventDefault();
  444.             if (jQuery('#{{ id }} option').get(0)) {
  445.                 jQuery('#{{ id }}').attr('selectedIndex', '-1').children("option:selected").attr("selected", false);
  446.             }
  448.             jQuery('#{{ id }}').val('');
  449.             jQuery('#{{ id }}').trigger('change');
  451.             return false;
  452.         }
  453.         {#
  454.           attach onchange event on the input
  455.         #}
  457.         // update the label
  458.         jQuery('#{{ id }}').on('change', function(event) {
  460.             Admin.log('[{{ id }}|on:change] update the label');
  462.             jQuery('#field_widget_{{ id }}').html("<span><img src=\"{{ asset('bundles/sonataadmin/ajax-loader.gif') }}\" style=\"vertical-align: middle; margin-right: 10px\"/>{{ 'loading_information'|trans([], 'SonataAdminBundle') }}</span>");
  463.             jQuery.ajax({
  464.                 type: 'GET',
  465.                 url: '{{ path('sonata_admin_short_object_information', {
  466.                     'objectId': 'OBJECT_ID',
  467.                     'uniqid': associationadmin.uniqid,
  468.                     'code': associationadmin.code,
  469.                     'linkParameters': sonata_admin.field_description.options.link_parameters
  470.                 })}}'.replace('OBJECT_ID', jQuery(this).val()),
  471.                 dataType: 'html',
  472.                 success: function(html) {
  473.                     jQuery('#field_widget_{{ id }}').html(html);
  474.                 }
  475.             });
  477.             {% if btn_edit %}
  478.                 var edit_button_url = '{{
  479.                     associationadmin.generateUrl('edit', {'id' : 'OBJECT_ID'})
  480.                 }}'.replace('OBJECT_ID', jQuery(this).val());
  482.                 var edit_button_node = jQuery('#field_actions_{{ id }} a.btn-warning');
  483.                 if (jQuery(this).val()) {
  484.                     edit_button_node.removeClass('hidden').attr('href', edit_button_url);
  485.                 } else {
  486.                     edit_button_node.addClass('hidden');
  487.                 }
  488.             {% endif %}
  489.         });
  491.     {% endif %}
  494. </script>
  495. <!-- / edit many association -->
  497. {% endautoescape %}