Question

我有一个简单的切换按钮，用户可以用它来订阅或取消订阅他们所属的群组。我有两个表单来获取帖子，并根据表单发布到哪个页面，用户订阅或取消订阅。这是我的代码，我正在寻找更好的方法来做到这一点。目前，我的用户可以单击订阅或取消订阅，但他或她将不得不重新加载页面以更改其设置。换句话说，它工作正常，但没有切换...用户无法在订阅和取消订阅之间来回点击，因为他们必须刷新页面并重新提交。我也很想修复切换功能。谢谢你的帮助。

<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

当服务器端脚本可用时，无需依赖解析查询字符串。相反，当页面最初提供时，安排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）中。

切换Jquery表单帖子

1 个答案: