ajaxリクエスト後にページをリロードするように強制しました

Question

私はrails3アプリケーションでjquery関数を使用しています。ユーザーがページ上のチェックボックスをクリックすると、その状態をトグルし、フェードアウト：

当初

$('#complete_task_1').click(function() { 
    $.ajax({ 
    url: $(this).attr('href'), 
    type: 'get', 
    dataType: 'html', 
    success: function(data, textStatus, jqXHR) { 
     $('#complete_task_1').closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

私が代わりに$（「＃のcomplete_task_1」）の$（this）を使用していたが、私はそれを得ることができませんでしたワーキング。今、それはすべて正常に動作しています。

私の問題は、1つのボックスをチェックした後に手動でページをリロードする必要があることです。そうでなければ、別のアイテムチェックボックスをクリックするとjsが呼び出されないようです。それは成功でもエラーでもありません。 devのログには何もありません。

簡単な方法がありますか？

Answer 1

最初は$（ '＃complete_task_1'）の代わりに$（this）を使いたいと思っていましたが、それを得ることができませんでした。問題が容易であること

、それはthisは関数が呼び出された方法によって決定されるためだ、ではない、それはどこに定義されています。 jQueryはあなたのsuccess関数を呼び出すので、thisはjQueryによって設定されます。

あなたはcontext引数を経由してそのコールバックの内側にあるべきかthisのjQueryを伝えることができます：

$('#complete_task_1').click(function() { 
    $.ajax({ 
    url: $(this).attr('href'), 
    type: 'get', 
    dataType: 'html', 
    context: this, 
    success: function(data, textStatus, jqXHR) { 
     $(this).closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

...またはあなたが既に一度$(this)を呼び出していると私は不必要な重複を見て嫌い以来、あなたが使用することができますすでにオーバー閉じている範囲： - それ以外の場合は、ときに私

$('#complete_task_1').click(function() { 
    var $this = $(this); 
    $.ajax({ 
    url: $this.attr('href'), 
    type: 'get', 
    dataType: 'html', 
    success: function(data, textStatus, jqXHR) { 
     $this.closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

私の問題は、私は1つのボックスをチェックした後、手動でページをリロードする必要があるということです別の項目のチェックボックスをクリックすると、jsは呼び出されないようです。それは成功でもエラーでもありません。 devのログには何もありません。

あなたのコード内のIDを使用しているので、あなたは今まで（のID must be unique on the pageので）1つのチェックボックスをフックしています。私の推測では、ステータスを更新すると、1つのチェックボックスが別のアイテムを表すページを更新するときです。

IDセレクタを使用する代わりに、関連するチェックボックスのすべてに一致するクラスセレクタまたは構造セレクタを使用してください。チェックボックスでhrefを使用しているため、マークアップ以外のコードは変更されず、最初のセレクタも変更されていないようです。あなたがチェックボックスにクラスを使用したいのであれば

：

$('.someclass').click(function() { ... 

それとも彼らは、コンテナ内のすべてのなら、あなたが構造を使用することができます（この場合は、子孫）セレクタ：

$('#the_container input:checkbox').click(function() { ... 

---

更新：ここでは完全な作業例（ライブコピー）です：

HTML：

jQuery(function($) { 

    $("#container input:checkbox").click(function() { 
    var $this = $(this); 
    $.ajax({ 
     url: $this.attr("data-href"), 
     dataType: "text", 
     success: function(data) { 
     $this.closest("tr").fadeOut(); 
     display(data); 
     }, 
     error: function() { 
     display("Error"); 
     } 
    }); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 

}); 

---

オフ - ：

<table id="container"> 
    <tbody> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/1"> 
      One 
     </label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/2"> 
      Two 
     </label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/3"> 
      Three 
     </label> 
     </td> 
    </tr> 
    </tbody> 
</table> 

これらのURLはちょうど

Response 1

...または2または3

はJavaScriptを使用して返信トピック：チェックボックスにhref属性を使用しているようです。無効なHTMLです。hrefはinput[type=checkbox]の有効な属性ではありません。それをdata-hrefに変更すると、valid as of HTML5となります。