Hello Django lovers,
I am trying to use inline edit using X-editable
<https://vitalets.github.io/x-editable/docs.html>
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
<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
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CAJCP8KAFF2ZMjvgFyz3mUDwX3d5A5q9rsAQO17DKn9oqkV8BTw%40mail.gmail.com.
