如何在Sonata Type Collection中創建新行後添加javascript？

我注意到這是文件../vendor/sonata-project/doctrine-orm-admin-bundle/Sonata/DoctrineORMAdminBundle/Resources/views/CRUD/edit_orm_one_association_script.html.twig，它創建一個新的行時你點擊鏈接添加，特別是在這樣的代碼：如何在Sonata Type Collection中創建新行後添加javascript？

// the ajax post 
    jQuery(form).ajaxSubmit({ 
     url: '{{ url('sonata_admin_append_form_element', { 
      'code':  sonata_admin.admin.root.code, 
      'elementId': id, 
      'objectId': sonata_admin.admin.root.id(sonata_admin.admin.root.subject), 
      'uniqid': sonata_admin.admin.root.uniqid 
     } + sonata_admin.field_description.getOption('link_parameters', {})) }}', 
     type: "POST", 
     dataType: 'html', 
     data: { _xml_http_request: true }, 
     success: function(html) { 

      jQuery('#field_container_{{ id }}').replaceWith(html); // replace the html 
      if(jQuery('input[type="file"]', form).length > 0) { 
       jQuery(form).attr('enctype', 'multipart/form-data'); 
       jQuery(form).attr('encoding', 'multipart/form-data'); 
      } 
      jQuery('#sonata-ba-field-container-{{ id }}').trigger('sonata.add_element'); 
      jQuery('#field_container_{{ id }}').trigger('sonata.add_element'); 

     } 
    }); 

    return false; 
};

我想知道我怎麼能實現觸發：

jQuery('#field_container_{{ id }}').trigger('sonata.add_element');

要添加JavaScript！在Sonata Type Collection中創建新行後。

在文檔中提到：提示：jquery事件在添加行（添加了sonata-collection-item）或刪除（sonata-collection-item-deleted）之後觸發。你可以綁定到他們觸發一些自定義JavaScript導入到您的模板（例如：添加一個日曆小部件到一個剛添加日期字段）

任何幫助，歡迎！

來源

2013-08-24 Emerson Minero

好的，非常感謝你的回答@Tautrimas Pajaskas，該解決方案如下：

<script type="text/javascript"> 
    $('div[id$=_empDomicilios]').on('sonata.add_element', function(event) { 

     alert('trigger is fired '); 
     // insert here your code 
    }); 
</script>

的jQuery API說： 在jQuery 1.7中，.live（）方法已過時。使用.on（）附加事件處理程序。

如果你的確可以從觸發發送其他參數如下：

jQuery('#field_container_{{ id }}').trigger('sonata.add_element', ['{{ id }}','{{ sonata_admin.admin.root.id(sonata_admin.admin.root.subject) }}', '{{ sonata_admin.admin.root.uniqid }}']);

然後你的JavaScript代碼如下所示：

<script type="text/javascript"> 
    $('div[id$=_empDomicilios]').on('sonata.add_element', function(event, elementId, objectId, uniqid) { 

      alert('trigger is fired '): 
      alert('ElementId: '+ elementId); 
      alert('ObjectId: '+ objectId); 
      alert('Uniqid: '+ uniqid); 
      // insert here your code 
    }); 
</script>

注：我已經使用了例如具有以「_empDomicilios」結尾的ID屬性值的div。

來源

2013-08-26 19:11:30

對不起'.live（）'方法。完全忘了。是的，如果您可以通過參數觸發'sonata.add_element'，則可以更輕鬆地獲取上下文數據，但默認觸發器不會發送任何數據。 – TautrimasPajarskas

只是做一個

jQuery('[id^="field_container_"][id$="<insert element name here>"]').live('sonata.add_element', function(event) { alert('foo bar'); })

請務必測試，如果你的jQuery選擇當先預期。如果您可以設法從Javascript中的表單元素中提取該uniqId，則不必使用複雜的id^=和id$=選擇器。

來源

2013-08-25 19:27:13 TautrimasPajarskas

你有一個想法，如何讓父管理類的uniqid當在我的問題中描述的腳本模板內？ https://github.com/sonata-project/SonataDoctrineORMAdminBundle/issues/378 – webDEVILopers

對於jQuery> = 1.7，您可以使用此方法，其中idField是sonataAdmin集合中使用的名稱。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('body').on('sonata.add_element','#field_container_{{ admin.uniqid }}_idField', function(e) { 
      //Code ... 
     }); 
    }); 
</script>

jQuery的< 1.7，你可以用這個方法，其中idField是sonataAdmin收集使用的名稱。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#field_container_{{ admin.uniqid }}_idField').live('sonata.add_element', function(e) { 
      //Code ... 
     }); 
    }); 
</script>

使用完整的選擇器，您將避免運行兩次代碼。

來源

2016-03-15 15:43:19

@Emerson Minero的答案並沒有爲我工作，直到我把代碼出$(document).ready()，它適用於

$(document).on('sonata.add_element', function() { 
    console.log('toto'); 
});`

來源

2016-07-04 08:17:37 Ophiuchus

如何在Sonata Type Collection中創建新行後添加javascript？

回答

相關問題