切換jquery表單文章

我有一個簡單的切換按鈕，用戶可以使用它來訂閱或取消訂閱他們所屬的組。我有2個表單獲取帖子，並根據表單發佈到哪個頁面，用戶被訂閱或取消訂閱。這是我的代碼，我正在尋找更好的方法來做到這一點。目前，我的用戶可以點擊訂閱或取消訂閱，但他或她將不得不重新加載頁面以更改其設置。換句話說，它工作正常，但沒有切換......用戶不能在訂閱和取消訂閱之間來回點擊，因爲他們必須刷新頁面並重新提交。我也很想修復切換功能。謝謝你的幫助。切換jquery表單文章

<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>

來源

2012-03-01 user1011713

當服務器端腳本可用時，不需要依賴解析出查詢字符串。相反，當頁面被初始化時，安排PHP將group_id值寫入（例如）一個隱藏的輸入字段，然後變成可用的客戶端以讀入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）中。

來源

2012-03-01 06:07:11

切換jquery表單文章

回答

相關問題