Ajax call not working with X-editable

[Sujata Aghor]

Hello Django lovers,

I am trying to use inline edit using X-editable

Here I am trying to fill 'source' value with an ajax call, which will fill a dropdown on every click.

But it's not working. If anyone tried this earlier please let me know.

If I fill the source with static values it works. 

Also I am aware of the concept  that  Ajax stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. So I even tried to code it slightly differently (option2 below) which I am sharing with you. That also is not working for me.

For ref sharing my code :

HTML has something like this:

 <td>
                        <div class="col-6 col-lg-8 d-flex align-items-center"> <a href="#" id="user{{obj.id}}" data-type="select" data-pk="1" data-value="" data-title="Select user" class="editable editable-click" data-abc="true">{{obj.user.first_name}} {{obj.user.last_name}}</a> </div>
                        <input type="hidden" id="loc{{obj.id}}" value="{{obj.companylocation.name}}">
                        <!-- <select class="selectpicker" data-size="7" data-style="btn btn-primary btn-round" title="Select Owner" name="owner{{obj.id}}" id="owner{{obj.id}}" > -->
                      </td>

Java script part :

Option1:

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<script>

jQuery(document).ready(function() {

(function($) {
'use strict';
$(function() {
if ($('#editable-form').length) {
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
'<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';


$("[id^='owner']").editable({
  id_val : $("[id^='owner']").attr('id'),
  loc : id_val.replace('owner', 'loc'),
  loc_nam: document.getElementById(loc).value,
  source: function (url, loc_nam){
    $.ajax({
    url: '/XXX/ajax/load_users',
    data: {
      'location': loc_nam
    },
    dataType: 'json',
    success: function (data) {  
      var js_obj = JSON.parse(data.loc_users);
      if(js_obj.length==0){
        alert("No Users Available in system for selected location");  
      }
       var usrdata = []
      for (var i = 0; i < js_obj.length; i++) {
        var pk = js_obj[i]['pk'];
        var name = js_obj[i]['fields']['first_name']+" "+js_obj[i]['fields']['last_name'];            
        usrdata.push({value: pk, text: name})          
      }
      console.log("==>>");
      console.log(usrdata);
      return usrdata;
    },  
   });
   }
  });

};//END if ($('#editable-form').length)

});
});

Option 2:

Tried something like below (ref : https://stackoverflow.com/questions/29594236/x-editable-how-to-pull-form-data-using-ajax  )

jQuery(document).ready(function() {

    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';

    function getSource() {
        var url = "/api/rpc/payments/status_options";
        return $.ajax({
            type:  'GET',
            async: true,
            url:   url,
            dataType: "json"
        });
    }

    getSource().done(function(result) {

        $('.payments-click').editable({
            type: 'select',
            title: 'Select status',
            placement: 'right',
            value: 2,
            source: result
            /*
             //uncomment these lines to send data on server
             ,pk: 1
             ,url: '/post'
             */
        });


    }).fail(function() {
        alert("Error with payment status function!")
    });

});

--

Thanks & Regards!

Sujata S. Aghor

[Sebastian Jung]

Hello,

You must send in all post and ajax post everytime CSRF Token. Please try it.

When you send it which response you get from django?

Regards

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAJCP8KAFF2ZMjvgFyz3mUDwX3d5A5q9rsAQO17DKn9oqkV8BTw%40mail.gmail.com.

[Sujata Aghor]

You must send in all post and ajax post everytime CSRF Token. Please try it.

Yes ..Yes .. I am sending a csrf token.

 

When you send it which response you get from django?

ajax call is not getting called only. 
The same ajax call is working for other use cases, but not getting called when using it this way for loading 'source' - x editable. 

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAKGT9myR0QYhxwSBHTgnrRtMRO8xa8jysWR4ivejSXyK9Ozr6Q%40mail.gmail.com.