@Niklas给了我一个有效的答案(并改进了我的代码),但在那个阶段,我还没有弄清楚如何将要编辑的数据传递到lightbox表单。经过多次尝试和搜索,我发现这要么不可能,要么不在我的掌握范围内,因此,我将用一个最终的完整解决方案重新审视这个问题,以防其他人正在寻找一种方法,允许用户编辑他们以前在灯箱中输入的文本,并将其保存回页面。(注意,这不包括清理用户内容,这显然是必要的。)
问题是,单击蓝色编辑按钮立即启动Venobox灯箱-没有机会将现有数据加载到输入字段。我在Venobox文档中找不到关于如何实现这一点的信息。在我的项目中,将有许多行用户输入的数据,每一行都有一个相关的编辑按钮,但一旦编辑灯箱被触发,获取数据就太晚了。
解决方案是一个不同的lightbox jquery插件:Colorbox。
http://www.jacklmoore.com/colorbox/
这是有据可查的。除了处理超链接之外,它还有一种直接调用Colorbox的方法,这样我就可以通过“点击”触发编辑,设置所选的输入表单数据,然后跳转到Colorbox,并执行所有其他所需的操作。
代码如下,但再次,我在这里放置了一个可运行的示例:
http://www.informationtamers.com/colorboxtest/index.html
我已经删除了问题中提到的venobox在线代码。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="todo.css"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- colorbox is a jquery lightbox plugin -->
<link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />
<title>UG list</title>
</head>
<body>
<p>I've removed much of the functionality, like getting users' previously-added content from a JSON file, saving it after changes, sanitizing user content, and so on.</p>
<p>First, press Add to generate a line, then key in one or two more lines.</p>
<div id="inputs" class="textIn">
<form name="checkListForm" >
<input type="text" id="textEntry" name="userEntry" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Add</div>
</div>
<ul class="list">
</ul>
<p>Next, press one of the blue pencil buttons, change the text presented in the lightbox input form, and press Save changes.</p>
<p> </p>
<div style="display:none">
<div id="lightboxform">
<div class="textIn" >
<form name="editForm" >
<input type="text" id="textEdit" name="userEdit" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<center><div id="buttonSaveChange">Save changes</div></center>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> <!-- colorbox is a jquery lightbox plugin -->
<script>
// Æ to add new user input to a <li> item
function sendLineToDOM (lineType, lineText) {
var toAdd = lineText;
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
$('.list').prepend(inlineRow);
// empty text input field once data consumed
$('#textEntry').val("");
}
}
// Æ to move edited input to appropriate <li> item
function returnLineToDOM (lineType, lineText) {
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
// replace original line
$( "ul li" ).eq( whichOne ).replaceWith( inlineRow );
// empty text input field once data consumed
console.log('data consumed, empty text input field');
$('#textEdit').val("");
}
}
// Substantive START
$(document).ready(function () {
$('#textEntry').val("Some text or other here.");
/* Define global variables */
window.whichOne = 0; // global variable indicating which line selected for edit
window.extractedText = ""; // global variable to hold user text selected for edit
// Enable DRAG of list items vertically to re-order them
$(".list").sortable( {
handle: ".handle"
});
// DELETE a line when its red-button trash symbol is clicked on
$(document).on("click", ".delete", function ()
{
var whichOne = Math.floor( $("span").index(this) / 7 );
$( "ul li" ).eq( whichOne ).remove();
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function ()
{
console.log('Click on edit button detected for line #:');
var whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
var extractedText = $( "ul li" ).eq(whichOne).text();
$('#textEdit').val( extractedText );
console.log(extractedText);
});
// Add line w.text box contents as action text when Action button pressed
$('#buttonItem').click(function () {
console.log('Add Action text on button press');
sendLineToDOM ('item', $('input[name=userEntry]').val());
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function () {
console.log('Edit a line');
// The divisor in the next expression is the number of <span>s before the
// clicked one in the <li> lines constructed in sendLineToDOM(). This
// works out which blue button has been pressed, and therefore which
// <li> item to edit.
whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
extractedText = $( "ul li" ).eq(whichOne).text();
console.log('extracted:' + extractedText );
$('#textEdit').val( extractedText );
$.colorbox({inline:true, href:"#lightboxform", width:"80%", height:"25%"});
});
/* RELOAD edited line on click */
// Get the edited user input and replace the old entry with it.
$('#buttonSaveChange').click(function () {
console.log('Replace old entry on button press');
// Save edited text!!!!
returnLineToDOM ('item', $('input[name=userEdit]').val());
$.colorbox.close()
});
});
</script>
</body>
</html>
