切换Jquery表单帖子

Question

I have a simple toggle button that the user can use to either subscribe or unsubscribe from a group they belong to. I have 2 forms that get the post and depending on which page the form posts to, the user is subscribed or unsubscribed. Here's my code and I'm looking for a better way to do this. Currently, my user can click to subscribe or unsubscribe but he or she will have to reload the page to change their setting. In other words, it works fine but there's no toggle...users can't click back and forth between subscribe and unsubscribe, as they have to refresh the page and resubmit. I also would love to fix the toggle function. Thanks for any help.

<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

There's no need to rely on parsing out the query string when server-side scripting is available. Instead, when the page is initially served, arrange for PHP to write the group_id value into (eg.) a hidden input field, which then becomes available client-side to be read into javascript/jQuery. (Other techniques are available)

It's also a good idea to arrange for your "groupnotifications.php" script to receive a $_POST['action'] instruction to either subscribe or unsubscribe. That way the client-side half of the application exercises control.

With those changes in place, the code will be something like this:

$(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);
            }
        });
    });
});

untested

Note: The statement $s.closest(".groupContainer").find('.group_id').val() relies on the hidden input element having class="group_id" and allows for multiple groups, each with its own toggle action, on the same page. Just make sure each group is wrapped in an element (eg div or td) with class="groupContainer".