テーブル内のいくつかの検索用語の検索頻度を示す Web ページを作成しています。そのテーブルの上には、個別の検索結果を表示するか、すべての結果を表示するかをユーザーが選択できる 2 つのラジオ ボタンがあります。
この JavaScript を使用する場合:
$(function() {
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
this.form.submit();
});
});
それは正常に動作します。テーブルの値を正しく切り替えて、何度も切り替えることができます。ただし、このjavascriptを使用すると:
$(function() {
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
$('form#searchTermForm').submit();
});
});
フォームは次のように定義されます。
<form id="searchTermForm" action="/searchterms.php" method="POST">
<div class="configDiv">
<input name="distinct" id="radio-choice-v-2a" class="distinct_radio" value="false" <?php if (strcmp($distinct, "false") == 0) {echo "checked=\"checked\"";}?> type="radio">
<label for="radio-choice-v-2a">Show total number of searches.</label>
<input name="distinct" id="radio-choice-v-2b" class="distinct_radio" value="true" <?php if (strcmp($distinct, "true") == 0) {echo "checked=\"checked\"";}?> type="radio">
<label for="radio-choice-v-2b">Show number of different people</label>
</div>
</form>
関連するいくつかのphp：
<?php
if(isset($_POST['distinct'])){
$distinct = $_POST['distinct'];
} else {
$distinct = "false";
}
?>
私が使用しているJavascript：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
これを jquery mobile 1.3.1 に更新しても問題は解決しません。
ラジオボタンを初めてクリックすると正常に動作します。その後、まったく反応がありません。ページを手動で更新すると、もう一度機能します。
最初のスクリプトでは、「submit distinct_radio」というメッセージがコンソールに出力され、送信自体によってコンソールがクリアされます。
2 番目のスクリプトでは、「submit distinct_radio」というメッセージがコンソールに出力されますが、コンソールはクリアされません。そのメッセージと、実行中の POST 要求が出力されます。ただし、POST 要求は実際に実行され、Web ページは正しく更新されます。もう一度クリックしても、コンソールにメッセージが出力されたり、要求が実行されたりすることはありません。
2 番目のスクリプトで、"action" の後のパスを存在しないパスに変更すると、クリックするたびにコンソール メッセージが出力され、存在しない場所への POST 要求を新たに試行します。
FireFox、Chrome、および Opera でこの問題に直面しています。
好奇心の次に、これを使用して、ユーザーがテーブル ヘッダーをクリックして並べ替えたときにフォームを送信したいと考えています。そこから、「this.form.submit();」を使用できません。
この動作はどのように説明できますか?
編集：
@peddle に感謝します (以下の回答を参照): Jquery Mobile に問題があるようです。jquery.mobile-1.3.0.min.js への参照を削除すると、何度も何度も機能します (したがって、非常に醜い)。Javascript の参照はhttp://jquerymobile.com/blog/2013/04/10/announce-jquery-mobile-1-3-1/で提案されているように、jqm 1.3.1 と jquery 1.9.1 が連携することを意図しています。