Question

我最近在我的django项目中添加了x-editable功能。我让它填充组合框并提交我的选择。它保存到数据库，一切运行良好。但是我有一个div我希望在成功提交/ POST后更新。

使用下面的source:行，我可以指定在组合框值成功 GET 后会发生什么。（success: function(data)....etc）

在 POST 成功后，我无法弄清楚如何做同样的事情。

Javascript（混合了一些django）：

$('#issueResponse').editable({
        disabled: true,
        type: 'select',
        url: '../ajax/post/issueresponse',
        params: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                },
        pk: {{ issue_obj.pk }},
        {% if issue_obj.fk_issueresponseTypeName.id == null %}
            //Do nothing
            //Do not include value: variable if existing value is set!
        {% else %}
            value: {{ issue_obj.fk_issueresponseTypeName.id }}, //value = the default value (id) of the combobox
        {% endif %}  
        showbuttons: true,

    source: function() {
        var result;
        $.ajax({
            url: '../ajax/get/responses',
            //data: {t: 'zone'},
            type: 'GET',
            global: false,
            async: false,
            dataType: 'json',
            success: function(data) {
                result = data;
                //$( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" );
            }
        });
        return result;
    },
});

我已确认$( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/"通过按钮工作（刷新指定的'div'）。我还将其添加到source: - ＆gt; success:区域，它按预期工作（在上面的代码片段中，但已注释掉）。但是我当然希望通过x-editable刷新成功发布后的。

我尝试过以下各种变体：

以下代码添加在showbuttons: true,
下

success: function(data, config) { $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" },

以下代码针对url:进行了扩展，因为我认为它可能采用与source:类似的方法，

url: function() { var result; $.ajax({ url: '../ajax/post/issueresponse', //data: {t: 'zone'}, type: 'POST', global: false, async: false, dataType: 'json', success: function(data) { $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" ); } }); return result; },

两者都没有奏效。有什么建议吗？

=====以下代码包含BabyAzerty的解决方案====

Response对应<div id="Response">您的html

$('#issueResponse').editable({ disabled: true, type: 'select', url: '../ajax/post/issueresponse', success: function(response, newValue) { $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" ); }, params: { csrfmiddlewaretoken: '{{ csrf_token }}', }, pk: {{ issue_obj.pk }}, {% if issue_obj.fk_issueresponseTypeName.id == null %} //Do nothing //Do not include value: variable if existing value is set! {% else %} value: {{ issue_obj.fk_issueresponseTypeName.id }}, //value = the default value (id) of the combobox {% endif %} showbuttons: true, source: function() { var result; $.ajax({ url: '../ajax/get/responses', //data: {t: 'zone'}, type: 'GET', global: false, async: false, dataType: 'json', success: function(data) { result = data; //$( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" ); } }); return result; }, });

Answer 1

使用X-Editable

的成功参数

$('#issueResponse').editable({
    success: function(response, newValue) {
        $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" );
    }
});

或者您可以添加事件触发器

$('#issueResponse').on('save', function(e, params) {
    alert('Saved value: ' + params.newValue);
    $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" );
});

x-editable - 成功POST后运行代码？

1 个答案: