在奏鸣曲类型集合中创建新行后如何添加 javascript？

Posted 2023-02-16

【中文标题】在奏鸣曲类型集合中创建新行后如何添加 javascript？

【英文标题】：how to add javascript after creating a new row in Sonata Type Collection?

【发布时间】：2013-08-27 10:39:52

【问题描述】：

我注意到在文件 ../vendor/sonata-project/doctrine-orm-admin-bundle/Sonata/DoctrineORMAdminBundle/Resources/views/CRUD/edit_orm_one_association_script.html.twig 中，它创建了一个新行当您单击链接添加时，特别是在此代码中：

// 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-collection-item-added）或删除（sonata-collection-item-deleted）行后会触发 jQuery 事件。您可以绑定到它们以触发导入模板的一些自定义 javascript（例如：将日历小部件添加到刚刚添加的日期字段）

欢迎任何帮助！

【参考方案1】：

做一个

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

记得先测试你的 jQuery 选择器是否按预期工作。如果您可以设法从 Javascript 中的表单元素中提取该 uniqId，则不必使用复杂的 id^= 和 id$= 选择器。

【讨论】：

您知道如何在我的问题中描述的脚本模板中获取父管理类的 uniqid 吗？ github.com/sonata-project/SonataDoctrineORMAdminBundle/issues/…

【参考方案2】：

好的，非常感谢@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> 

注意：我在示例中使用了一个 id 属性值以“_empDomicilios”结尾的 div。

【讨论】：

对.live() 方法感到抱歉。完全忘记了。是的，如果您可以使用参数触发sonata.add_element，则可以更轻松地获取上下文数据，但默认触发器不发送任何数据。

【参考方案3】：

对于 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

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

使用完整的选择器，您将避免运行两次代码。

【参考方案4】：

@Emerson Minero 的答案对我不起作用，直到我从$(document).ready() 中取出代码并将其改编为

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