dshtze500055 2012-03-01 03:16
浏览 33

切换Jquery表单帖子

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>
  • 写回答

1条回答 默认 最新

  • dqgxazo4483 2012-03-01 06:07
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名