Переключить JQuery формы сообщений

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

Нет необходимости полагаться на разбор строки запроса, когда доступны скрипты на стороне сервера. Вместо этого, когда страница первоначально обслуживается, организуйте для 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", и допускает создание нескольких групп, каждая со своим собственным действием переключения, на одной странице. Просто убедитесь, что каждая группа заключена в элемент (например, div или td) с class="groupContainer".