ユーザーがテーブル行からテキストエリアに質問を追加できるようにしたい。質問が入るテキストエリアは、ユーザーが質問を選択するために選択した「.plus」ボタンによって異なります。
たとえば、ユーザーがページ上部のプラス ボタンをクリックした場合、ユーザーが [追加] ボタンをクリックすると、質問がページ上部のテキスト領域に表示されます。
別の例 ユーザーが 5 番目の表の行のプラス ボタンをクリックした場合、ユーザーが [追加] ボタンをクリックしたときの質問は、その行 (5 行目) 内のテキスト領域に入ります。
私が抱えている問題は、ユーザーが「追加」ボタンをクリックしても何も起こらないことです。モーダル ウィンドウを閉じて、質問を正しいテキスト領域に挿入すると想定されていますが、何も起こりません。モーダルウィンドウを閉じたり、質問をテキストエリアに挿入したりしていません。
私は何を間違っていますか？
以下は、アプリケーションのコードです。
<head>
<script type="text/javascript">
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each(function () {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$question.append($questionText);
});
$('.plusimage').each(function () {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
form.questionText.value = "";
$('.questionTextArea').val('');
}
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function closewindow() {
$.modal.close();
return false;
}
$(document).on('click', '.add', function () {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
$.modal.close();
return true;
});
$(document).on('click', '.plusrow', function () {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea class="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
</td>
</tr>
</table>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look
<br/>up Previous Questions)</span>
</th>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question"
onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="plusrow"></th>
<th class="question">Question</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>
モーダル ウィンドウに保存されている詳細は、「previousquestions.php」として知られる別のスクリプトから取得されます。以下は、「QuestionContent」フィールドのみが表示され、ユーザーが検索をコンパイルした後に「追加」ボタンの結果を表示するコードです。 :
<?php
$output = "";
$output .= "
<table border='1' id='resulttbl'>
<tr>
<th id='questionth'>Question</th>
</tr>
";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<tr>
<td id='questiontd'>{$questionrow['QuestionContent']}</td>
<td id='addtd'><button type='button' class='add'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
}
}
?>
ありがとうございました