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:
我正在使用j -ery的X-Editable插件。我有两个选择字段,通过ajax动态提供数据。这是我的代码:
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:
和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?
我想要做的是:当他们改变$('a.zone')的值时,我想要$('a.area')重新加载ajax数据。我该怎么做呢?
2 个解决方案
#1
1
I struggled with this for a bit. Basically, what ended up working was
我有点挣扎。基本上,最终工作的是
- conditioning the update of my downstream editable on the success of an edit of the upstream editable by triggering it in the editables success function,
- 通过在editables success函数中触发编辑上游可编辑的成功来调整我的下游可编辑的更新,
- replacing the old downstream editable with a clone of itself to get rid of the attached form (which I haven't figured out how to update directly), and
- 用自己的克隆替换旧的下游可编辑,以摆脱附加的表单(我还没想出如何直接更新),以及
- calling the editables function on the replacement.
- 在替换上调用editables函数。
Check it out below.
请在下面查看。
var editable_triggered_updates = function (changed_element, newValue) {
var update_second_editable = function (el_id, newUpstreamValue) {
var data = {
id_upstream_editable: "oldUpstreamValue"
};
if (data[el_id]===undefined) {
return;
}
// IE cache workaround
var n = new Date().getTime();
$.getJSON(my_lookup_url, {t:n, my_get_parameter: newUpstreamValue}, function(return_object){
// Step 2: get rid of old editable form by replacing editable with clone
$('#id_downstream_editable').replaceWith($('#id_downstream_editable').clone());
$('#id_downstream_editable').attr('data-source', return_object['data-source']);
// Step 3: call editable on new objects
$('#id_downstream_editable').editable({
mode: 'inline',
ajaxOptions: {
dataType: 'json',
sourceCache: 'false'
}
});
});
};
update_second_editable(changed_element.id, newValue);
};
!function (triggered_updates) { // editables setup
$(".editable").editable({
mode: 'inline',
ajaxOptions: {
dataType: 'json',
sourceCache: 'false'
}
success: function(response, newValue) {
triggered_updates(this, newValue); // Step 1
},
});
}(editable_triggered_updates || console.log); // Step 1 also
#2
0
I haven't used the plugin before, but glancing at the docs it seems this would work:
我之前没有使用过这个插件,但是看一下这个文档似乎可行:
$('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);
}
});
function loadArea(){
$('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);
}
});
}
loadArea();
$('a.zone').on('save', function(e, params) {
loadArea();
});
#1
1
I struggled with this for a bit. Basically, what ended up working was
我有点挣扎。基本上,最终工作的是
- conditioning the update of my downstream editable on the success of an edit of the upstream editable by triggering it in the editables success function,
- 通过在editables success函数中触发编辑上游可编辑的成功来调整我的下游可编辑的更新,
- replacing the old downstream editable with a clone of itself to get rid of the attached form (which I haven't figured out how to update directly), and
- 用自己的克隆替换旧的下游可编辑,以摆脱附加的表单(我还没想出如何直接更新),以及
- calling the editables function on the replacement.
- 在替换上调用editables函数。
Check it out below.
请在下面查看。
var editable_triggered_updates = function (changed_element, newValue) {
var update_second_editable = function (el_id, newUpstreamValue) {
var data = {
id_upstream_editable: "oldUpstreamValue"
};
if (data[el_id]===undefined) {
return;
}
// IE cache workaround
var n = new Date().getTime();
$.getJSON(my_lookup_url, {t:n, my_get_parameter: newUpstreamValue}, function(return_object){
// Step 2: get rid of old editable form by replacing editable with clone
$('#id_downstream_editable').replaceWith($('#id_downstream_editable').clone());
$('#id_downstream_editable').attr('data-source', return_object['data-source']);
// Step 3: call editable on new objects
$('#id_downstream_editable').editable({
mode: 'inline',
ajaxOptions: {
dataType: 'json',
sourceCache: 'false'
}
});
});
};
update_second_editable(changed_element.id, newValue);
};
!function (triggered_updates) { // editables setup
$(".editable").editable({
mode: 'inline',
ajaxOptions: {
dataType: 'json',
sourceCache: 'false'
}
success: function(response, newValue) {
triggered_updates(this, newValue); // Step 1
},
});
}(editable_triggered_updates || console.log); // Step 1 also
#2
0
I haven't used the plugin before, but glancing at the docs it seems this would work:
我之前没有使用过这个插件,但是看一下这个文档似乎可行:
$('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);
}
});
function loadArea(){
$('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);
}
});
}
loadArea();
$('a.zone').on('save', function(e, params) {
loadArea();
});