I recently added x-editable functionality to my django project. I have it working to populate a bobox and submit my selection. It saves to the database, all working great. However I have a div i would like to update on successful submit/POST.

With the source: line below i can specify what happens after successful GET of the bobox values. (success: function(data)....etc)

I cannot figure out how to do the same after a successful POST.

Javascript (with some django mixed in):

$('#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 bobox
        {% 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;
    },
});

I have confirmed that $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" works via a button (to refresh a specified 'div'). I have also added it into the source: -> success: area and it works as expected (in code snippet above but mented out). However of course I would like it to refresh after a successful POST by x-editable.

I have tried variations of the following:

• The below code added under showbuttons: true,

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

• The below code expanded against url: as i thought it might follow similar approach to 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;
  },
  

Neither have worked. Any suggestions?

===== The code below includes the solution by BabyAzerty ====

Response corresponds to <div id="Response"> you would have your 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 bobox
        {% 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;
    },
});

I recently added x-editable functionality to my django project. I have it working to populate a bobox and submit my selection. It saves to the database, all working great. However I have a div i would like to update on successful submit/POST.

With the source: line below i can specify what happens after successful GET of the bobox values. (success: function(data)....etc)

I cannot figure out how to do the same after a successful POST.

Javascript (with some django mixed in):

$('#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 bobox
        {% 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;
    },
});

I have confirmed that $( "#Response" ).load( "../ajax/get/{{issue_obj.id}}/response/" works via a button (to refresh a specified 'div'). I have also added it into the source: -> success: area and it works as expected (in code snippet above but mented out). However of course I would like it to refresh after a successful POST by x-editable.

I have tried variations of the following:

• The below code added under showbuttons: true,

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

• The below code expanded against url: as i thought it might follow similar approach to 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;
  },
  

Neither have worked. Any suggestions?

===== The code below includes the solution by BabyAzerty ====

Response corresponds to <div id="Response"> you would have your 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 bobox
        {% 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;
    },
});

• javascript
• ajax
• django
• x-editable

1 Answer 1

Use the success param of X-Editable

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

Or you can add an event trigger

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