Web ページにチェックボックスが必要です。クリックすると、サーバーに ajax リクエストが送信されます。サーバーが応答したら、チェックボックスを変更したい。チェックボックスをクリックするとすぐに状態が変わるという事実を除いて、すべてを修正できます。
6 に答える
本当にこれが欲しいですか?Ajax リクエストには時間がかかる場合があります。フィードバックが得られない場合、ユーザーは何かが起こるまで何度もクリックする傾向があります。これがボタンを非アクティブ化すると (しばらくしてから再び)、ユーザーはさらに困惑します。
代わりに、すぐにフィードバックを提供することを検討し (ボックスをチェックするなど)、サーバーとの通信を知らせるインジケーターをその横に表示します (有名な糸車など)。結果が戻ったら、インジケータを非表示にし、必要に応じてチェックボックスを無効にします。また、ajax リクエスト中にフォームの投稿を禁止することもできます。
おそらく次のようなことができます:チェックボックスがクリックされたら、チェックボックスを「無効」に設定し(これによりチェックボックスが灰色になり、編集できなくなります)、ajax呼び出しを行い、ajaxが返されたら「無効」を削除しますチェックボックスから。このようなもの(テストされていないjQueryを使用):
$('#mycheckbox').click( function() {
var checkbox = this;
$(checkbox).attr('disabled','1');
$.post( url, data, function() {
// if successful
$(checkbox).removeAttr('disabled');
}
}
<input id="theChkbox" type="checkbox" onclick="this.checked=!this.checked;sendAjaxRequest(this);">
this.checked=!this.checked
チェックボックスの状態をクリック前の状態にリセットします。これは、状態がちらつくことなく(多すぎる)、すべてのブラウザで機能するはずです。
sendAjaxRequest()
魔法をかけ、リクエストが戻ってきたら、チェックボックスの適切なチェック状態を設定します。に渡すthis
とsendAjaxRequest()
、チェックボックスの状態を調整できるように、チェックボックスへの参照が提供されます。それができない場合は、を使用document.getElementById("theChkbox")
して参照を取得し、状態を設定します。
onclick に「return false;」を追加します。そしてそれは変わらないはずです。
onchange メソッドを次のように開始できますcheckbox.checked=NOT checkbox.checked
(選択した言語に合わせてこれを変更する必要がある場合があります)。おそらくちらつきが発生しますが、十分に迅速に元に戻す必要があります。
実際、他のアプローチを使用する必要があると思います。ユーザーからの特定のコマンド (欲求) を表すためにクリックに対していくつかのアクションを起動したいので、おそらくボタン/画像ボタンです。もっとうまく説明しようと思います: ページにはいくつかの情報があり、ユーザーがクリックして何かを実行できる (カートにアイテムを追加する) ことができるガジェットがいくつかあると思います。ガジェットに視覚的な魅力があれば、より使いやすいと思います。チェックボックスよりもユーザー (つまり、「追加」など)。
この助けを願っています。