我正在使用editable插件进行预编辑
这是我使用的代码,我从Doc页面获取,它应该用于添加新记录,但我想用它来修改记录)
POSITION_INDEX
这是html
<script>
$(document).ready(function() {
//init editables
$('.myeditable').editable({
url: '/post',
placement: 'right'
});
//make username required
$('#new_username').editable();
//automatically show next editable
$('.myeditable').on('save.newuser', function(){
var that = this;
setTimeout(function() {
$(that).closest('td').next().find('.myeditable').editable('show');
}, 500);
});
//create new user
$('#save-btn').click(function() {
$('.myeditable').editable('submit', {
url: '/newuser',
ajaxOptions: {
dataType: 'json' //assuming json response
},
success: function(data, config) {
if(data && data.id) { //record created, response like {"id": 2}
//set pk
$(this).editable('option', 'pk', data.id);
//remove unsaved class
$(this).removeClass('editable-unsaved');
//show messages
var msg = 'New user created! Now editables submit individually.';
$('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
$('#save-btn').hide();
$(this).off('save.newuser');
} else if(data && data.errors){
//server-side validation error, response like {"errors": {"username": "username already exist"} }
config.error.call(this, data.errors);
}
},
error: function(errors) {
var msg = '';
if(errors && errors.responseText) { //ajax error, errors = xhr object
msg = errors.responseText;
} else { //validation error (client-side or server-side)
$.each(errors, function(k, v) { msg += k+": "+v+"<br>"; });
}
$('#msg').removeClass('alert-success').addClass('alert-error').html(msg).show();
}
});
});
//reset
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null)
.editable('option', 'pk', null)
.removeClass('editable-unsaved');
$('#save-btn').show();
$('#msg').hide();
});
});
</script>
现在一切正常,除非我编辑前两行中的一行并点击确定它将发送最后一个表格<tr>
<td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a></td>
<td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
<tr>
<td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">sdqsd</a></td>
<td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
<tr>
<td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">dzadz</a></td>
<td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description">from me with love</a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location">anywhere</a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website">http://justawebsite.com</a></td>
<td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
的详细信息,有时它不会发送任何内容,它真的搞砸了我花了几个小时阅读文档,但我无法弄清楚问题
答案 0 :(得分:0)
你之后尝试过刷新吗?
对我来说,我注意到,一旦它被刷新,我得到了我一直期待的结果,但仅限于其中一个。但是,我还没有解决问题。 请告诉我你得到了什么样的结果。
否则尝试调试...禁用第一行中的一行并再次尝试..
答案 1 :(得分:0)
正如我在评论中所说,你有不同的元素具有相同的id,因此选择器不会工作(id必须是唯一的)。把它们作为类来代替:
<tr>
<td>
<a href="#" class="myeditable new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a>
</td>
<td>
<a href="#" class="myeditable description" data-type="textarea" data-name="description" data-original-title="Enter Description"></a>
</td>
<td>
<a href="#" class="myeditable location" data-type="text" data-name="location" data-original-title="Enter Location"></a>
</td>
<td>
<a href="#" class="myeditable website" data-type="text" data-name="website" data-original-title="Enter Website"></a>
</td>
<td>
<a href="#" class="myeditable picture" data-type="text" data-name="picture" data-original-title="Enter Picture">
<img src="" />
</a>
</td>
<td width="10%">
<button class="btn btn-primary btn-sm save-btn">Ok</button>
<button class="btn btn-sm pull-right reset-btn">Reset</button>
</td>
</tr>
这是帮助你入门的小提琴https://jsfiddle.net/virginieLGB/k2of9xor/1/
在那里,您会看到我选择了您要提交的可修改元素。
$('.save-btn').click(function() {
var that = $(this);
var allEditables = that.parents("tr").find(".myeditable"); // all ".myeditable" elements in the same "tr" as the ".save-btn" that was clicked on
allEditables.each(function() {
// here I've kept your code because I don't know what happens in your file, but maybe you need a bulk action
$(this).editable('submit', {
...
我不知道您的PHP文件是如何工作的,所以不知道如何保存您的用户以及是否需要一次提交所有字段。如果是这样,你必须稍微修改我的答案。