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

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: 中-> 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/" );
});