I am using the X-Editable plugin for jquery. I have two select fields that are dynamically supplied with data via ajax. This is my code:
The fields:
<td class="center">
<a href="#" data-name="'.$res['mid'].'" class="zone">'.$zonename.'</a>
</td>
<td class="center">
<a href="#" data-name="'.$res['mid'].'" class="area" data-zona="'.$zoneuid.'">'.$areaname.'</a>
</td>
And the jQuery:
$('a.zone').editable({
type: 'select',
url: '../admin/callbacks/quickEdit.php?t=zone',
pk: 1,
showbuttons: true,
source: function() {
var result;
$.ajax({
url: '../admin/callbacks/jsonDataList.php',
data: {t: 'zone'},
type: 'GET',
global: false,
async: false,
dataType: 'json',
success: function(data) {
result = data;
}
});
return result;
},
success: function(response, newValue) {
$(this).parent().siblings('td').children('a.area').data('zona', newValue);
console.log(response, newValue);
}
});
$('a.area').editable({
type: 'select',
pk: 1,
url: '../admin/callbacks/quickEdit.php?t=area',
showbuttons: true,
source: function() {
var result;
var zona = $(this).data('zona');
$.ajax({
url: '../admin/callbacks/jsonDataList.php',
data: {t: 'area', zone: zona},
type: 'GET',
global: false,
async: false,
dataType: 'json',
success: function(data) {
result = data;
}
});
return result;
},
success: function(response, newValue) {
console.log(response);
}
});
What I want to do is this: When they change the value of $('a.zone')
I want $('a.area')
to reload the ajax data. How can I go about doing this?