データを PHP Twodimental Array に格納しています。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>
TEXTAREA の QUEST、OPT_A、OPT_B の値を HTML FORM で表示しています (リッチ テキストを表示するために TinyMCE jquery プラグインを使用しています)。フォームには次のボタンがあります: NEXT & PREVIOUS。
次へをクリックすると、すべての値の配列内の次の要素からのデータで TEXT AREAS を更新したいと考えています。インターネットでの検索によると、AJAXを使用して同じことを達成できますが、HTML FORMのボタンをクリックして複数のテキスト領域のデータを同時に更新する方法はわかりません。また、データは HTML タグの形式で保存されることに注意してください (最大長は 4000 文字まで)。
現在、フォームのボタンをクリックしてページ全体を更新するという非常に古い方法を使用しています。ページが更新されたとき、ページが完全に読み込まれる前に HTML タグが一瞬表示されるなど、多くの欠点があります。
（これら2つの問題を修正する）の参照を提案してください：
- AJAX を使用してボタン (HTML-FORM 内) をクリックすると HTML-FORM の複数の Textares のデータを更新する
- ページが完全に読み込まれる前に、テキスト領域に 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>