Toggle Jquery form Posts

Question

私は、ユーザーが所属するグループの購読または購読解除に使用できる簡単なトグルボタンを持っています。私は投稿を取得する2つのフォームを持っており、フォームが投稿するページに応じて、ユーザーは購読中または購読中止です。ここに私のコードと私はこれを行うためのより良い方法を探しています。現在、ユーザーはクリックして購読または購読を解除できますが、ページをリロードして設定を変更する必要があります。つまり、うまくいきますが、切り替えはありません。ユーザーは、ページを更新して再送信する必要があるため、購読と購読解除の間を前後にクリックすることはできません。私はまた、トグル機能を修正したいと思います。助けてくれてありがとう。

<script type="text/javascript"> 
//Capturing get parameter 
var param1var = getQueryVariable("group_id"); 
function getQueryVariable(variable) { 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0;i<vars.length;i++) { 
    var pair = vars[i].split("="); 
    if (pair[0] == variable) { 
     return pair[1]; 
    } 
    } 
} 
var owner = getQueryVariable('group_id'); 
var dataString = "owner="+ owner; 

$(function() { 
$("#subscribe").click(function(){ 

$.ajax({ 
    type: "POST", 
    url: "groupnotifications.php", 
    data: dataString, 

success: function(){ 
$("#subscribe").removeClass("notifications_subsc"); 
$("#subscribe").addClass("not_subscribed_group"); 
} 

}); 
}); 
}); 
</script> 


<script type="text/javascript"> 
//Capturing get parameter 
var param1var = getQueryVariable("group_id"); 
function getQueryVariable(variable) { 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0;i<vars.length;i++) { 
    var pair = vars[i].split("="); 
    if (pair[0] == variable) { 
     return pair[1]; 
    } 
    } 
} 
var owner = getQueryVariable('group_id'); 
var dataString = "owner="+ owner; 

$(function() { 
$("#notsubscribed").click(function(){ 

$.ajax({ 
    type: "POST", 
    url: "groupnotificationsoff.php", 
    data: dataString, 

success: function(){ 
$("#notsubscribed").removeClass("not_subscribed_group"); 
$("#notsubscribed").addClass("notifications_subsc"); 

} 

}); 
}); 
}); 
</script> 

Answer 1

サーバー側のスクリプトが利用可能な場合は、クエリ文字列の解析に頼る必要はありません。代わりに、ページが最初に提供されたときに、group_idの値を（例えば）隠し入力フィールドに書き込むようにPHPを調整します。このフィールドはクライアント側で利用可能になり、javascript/jQueryに読み込まれます。

"groupnotifications.php"スクリプトが$ _POST ['action']命令を受信して​​購読または購読解除するようにすることをお勧めします。こうすることで、アプリケーション側のクライアント側で制御が行われます。

$(function() { 
    $("#subscribe").click(function(){ 
     var $s = $(this).attr('disabled',true);//disable button until ajax response received to prevent user clicking again 
     var clss = ['not_subscribed_group','notifications_subsc'];//The two classnames that are to be toggled. 
     var dataOj = { 
      owner : $s.closest(".groupContainer").find('.group_id').val(),//relating to element <input class="group_id" type="hidden" value="..." /> 
      action : ($s.hasClass(clss[0])) ? 1 : 0;//Instruction to 1:subscribe or 0:unsubscribe 
     }; 
     $.ajax({ 
      type: "POST", 
      url: "groupnotifications.php", 
      data: dataObj, 
      success: function(status) {//status = 1:subscribed or 0:unsubscribed 
       switch(Number(status)){ 
        case 1: 
         $s.removeClass(clss[1]).addClass(clss[0]); 
        break; 
        case 0: 
         $s.removeClass(clss[0]).addClass(clss[1]); 
        break; 
        default: 
         //display error message to user 
       } 
      } 
      error: function(){ 
       //display error message to user 
      } 
      complete: function(){ 
       $s.attr('disabled',false); 
      } 
     }); 
    }); 
}); 

テストされていない

注：$s.closest(".groupContainer").find('.group_id').val()はclass="group_id"を持つ非表示の入力要素に依存しており、複数のグループを可能文の代わりにこれらの変更により

、コードは次のようになりますそれぞれが独自のトグルアクションを使用して、同じページに表示されます。各グループがclass="groupContainer"で要素（例：divまたはtd）にラップされていることを確認してください。