我将数据存储在 PHP 二维数组中。PHP ARRAY 中的示例值如下所述:
First Element in Array
ID = 1
QUES= <p>ABCD</p>
OPT_A = <p>A</p>
OPT_B = <p>B</p>
Second Element in Array
ID = 2
QUES= <p> TWOABCD </p>
OPT_A = <p>TWA </p>
OPT_B = <p>TWB</p>
我在 HTML FORM 中的 TEXTAREA 中显示 QUEST、OPT_A、OPT_B 的值(使用 TinyMCE jquery 插件来显示富文本)。表格有以下按钮:下一个和上一个。
单击 NEXT 后,我想用数组中下一个元素的数据重新刷新 TEXT AREAS 以获取所有值。根据互联网搜索,我可以使用 AJAX 实现相同的功能,但不确定如何在单击 HTML FORM 中的按钮时同时刷新多个文本区域的数据。另请注意,数据以 HTML 标签的形式存储(最大长度为 4000 个字符)。
目前,我正在使用一种非常古老的方法,即单击表单上的按钮刷新整个页面。它有很多缺点,包括当页面刷新时,用户会在页面完全加载之前看到 HTML 标记。
您能否建议任何参考(解决这两个问题):
- 使用 AJAX 单击按钮(在 HTML-FORM 内)刷新 HTML-FORM 的多个文本中的数据
- 避免在页面完全加载之前在文本区域中瞬时显示 HTML 代码。
更新的代码如下所述:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input id="id" type="hidden" name="id">
<p>Question:</p>
<p id="myInstance3" style="border: 1px solid #000;"><textarea id="quest" readonly></textarea></p>
<p>Option A:</p>
<textarea id="opt_a" ></textarea>
<p>Option B:</p>
<textarea id="opt_b" ></textarea>
<p>
<button id="previous">Previous</button>
<button id="next">Next</button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
var array = [{"id":1,"quest":"<p>ABC<\/p>","opt_a":"A","opt_b":"B"}, {"id":2,"quest":"<p>DEF<\/p>","opt_a":"1","opt_b":"2"}];
var ArrayWalker = (function () {
var _array = null,
_index = 0,
_walk = function (step) {
if (_array === null) {
throw 'Array is not initialized';
}
_index += step;
if (_index < 0 || _index === _array.length) {
_index -= step;
}
return _array[_index];
};
return {
init: function (array) {
_array = array;
_index = 0;
},
current: function () {
return _walk(0);
},
next: function () {
return _walk(1);
},
previous: function () {
return _walk(-1);
},
index: function (seek) {
if (seek !== undefined) {
_index = window.parseInt(seek);
}
return _index;
}
};
})();
function fillElements(data) {
$('#id').val(data['id']);
$('#quest').val(data['quest']);
$('#opt_a').val(data['opt_a']);
$('#opt_b').val(data['opt_b']);
}
ArrayWalker.init(array);
fillElements(ArrayWalker.current());
$('#previous').click(function (e) {
e.preventDefault();
fillElements(ArrayWalker.previous());
});
$('#next').click(function (e) {
e.preventDefault();
fillElements(ArrayWalker.next());
});
</script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('myInstance3');
});
</script>
</body>
</html>