代码之家 › 专栏 › 技术社区 › Emerson Minero

如何在Sonata Type Collection中创建新行后添加javascript?

sonata-admin symfony-2.1 jquery

Emerson Minero · 技术社区 · 11 年前

我注意到它已经存档了/vendor/sonata project/doctinic orm admin bundle/sonata/DoctrineORM adminBundle/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集合项)或删除行(删除了sonata收集项)后,将触发jQuery事件。您可以绑定到它们以触发一些导入到模板中的自定义javascript(例如:将日历小部件添加到刚刚添加的日期字段)

欢迎任何帮助!

4 回复 | 直到 11 年前

sjagr 7 年前

好的,非常感谢您的回答@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>

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

TautrimasPajarskas 11 年前

只要做一个

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

请记住,首先测试您的jQuery选择器是否按预期工作。你不必使用复杂的 id^= 和 id$= 选择器,如果您能够设法从Javascript中的表单元素中提取uniqId的话。

Caleb Rodriguez 9 年前

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

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

Ophiuchus 8 年前

Emerson Minero的回答对我不起作用,直到我把代码从 $(document).ready() 并使其适应

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