jQuery: изменение действий и атрибутов кнопок после запроса ajax - PullRequest
Новая
       13

jQuery: изменение действий и атрибутов кнопок после запроса ajax

0 голосов
/ 19 февраля 2012

Пожалуйста, мне нужна твоя помощь.У меня есть кнопка «Подписаться».Когда кнопка нажата, запускается событие щелчка JavaScript, а затем выполняются некоторые запросы AJAX.Если все в порядке, то кнопку «Follow» необходимо заменить на кнопку «Unfollow» с соответствующим кодом.Пока что я могу изменять только текст кнопок ... но это нехорошо, потому что если пользователь захочет подписаться, а затем отменить подписку (без обновления страницы), мой код не будет работать.

<a href="javascript:;" class="genbutton btn-follow" id="follow-239618"><span>Follow</span></a>

Вот кнопка отмены подписки: 

<a href="javascript:;" class="genbutton btn-unfollow" id="unfollow-239618"><span>Unfollow</span></a>

Вот мой JavaScript: 

    function sub(subAction, user_id) {                                                                                                              
    if(subAction == 'follow'){                                                                                                                  
        $("a#follow-"+ user_id +" span").addClass("loading");                                                                                   
    }                                                                                                                                           
    if(subAction == 'unfollow'){                                                                                                                
        $("a#unfollow-"+ user_id +" span").addClass("loading");                                                                                 
    }                                                                                                                                           
    $.ajax({                                                                                                                                    
        type: "post",                                                                                                                           
        url: "http://"+ siteDomain +"/a/subHandler",                                                                                            
        data: "do="+ subAction +"&user_id=" + user_id,                                                                                          
        success: function(data, textStatus){                                                                                                    
            if(subAction == 'follow'){                                                                                                          
                $("a#follow-"+ user_id +" span").removeClass("loading");                                                                        
            }                                                                                                                                   
            if(subAction == 'unfollow'){                                                                                                        
                $("a#unfollow-"+ user_id +" span").removeClass("loading");                                                                      
            }                                                                                                                                   
            var errorOccured = data["ERR"];                                                                                                     
            if(!errorOccured){                                                                                                                  
                if(subAction == 'follow'){                                                                                                      
                    $("a#follow-"+ user_id +" span").text("Unfollow");                                                                          
                }                                                                                                                               
                if(subAction == 'unfollow'){                                                                                                    
                    $("a#unfollow-"+ user_id +" span").text("Follow");                                                                          
                }                                                                                                                               
            }                                                                                                                                   
        }                                                                                                                                       
    }, "json");                                                                                                                                 
}                                                                                                                                               
$(".btn-follow").click(function(){var user_id = $(this).attr("id").replace('follow-', '');sub('follow', user_id);return false;});               
$(".btn-unfollow").click(function(){var user_id = $(this).attr("id").replace('unfollow-', '');sub('unfollow', user_id);return false;});

1 Ответ

0 голосов
/ 19 февраля 2012

Два предложения:

One: следующее работает без jquery. Могут быть и более эффективные способы сделать это (может даже быть некоторая магия jquery для достижения того же самого в гораздо меньшем количестве строк кода), но я бы так и сделал. Вы можете просто скопировать и вставить его в новый файл и посмотреть, как он работает. Этот фрагмент удаляет старую кнопку, а затем добавляет новую кнопку. 

<html>
<head>
    <title>unfollow example</title>
    <script type="text/javascript">
        function switchFollow() 
        {
            var buttonParent = document.getElementById('PARENTCONTAINEROFBUTTON');
            var oldButton = document.getElementById('FOLLOWBUTTON');
            buttonParent.removeChild(oldButton);
            var newButton = document.createElement('a');
            newButton.setAttribute('id', 'unfollowbutton');
            newButton.setAttribute('href', '#unfollow');
            var newButtonText = document.createElement('span');
            newButtonText.innerHTML = "unfollow";
            newButton.appendChild(newButtonText);
            buttonParent.appendChild(newButton); 
            }   
    </script>
</head>
<body>
    <div id="PARENTCONTAINEROFBUTTON">
        <a id="FOLLOWBUTTON" href="#follow"><span>follow</span></a>         
    </div>
    <div id="othercontainer">
        <button onclick="switchFollow()">switch to unfollow</button>
    </div>
</body>

Два. Если вы считаете, что удаление и добавление может привести к проблемам с производительностью (не знаю, сколько всего кнопок мы говорим и какая у вас целевая платформа), ознакомьтесь со вторым фрагментом. Если вы дадите своему диапазону идентификатор, вы можете изменить текст и ссылку без удаления и добавления. 

<html>
<head>
    <title>unfollow example 2</title>
    <script type="text/javascript">
        function switchFollow() 
        {
            button = document.getElementById('FOLLOWBUTTON');
            button.setAttribute('id', 'UNFOLLOWBUTTON');
            button.setAttribute('href', '#unfollow');
            buttonText = document.getElementById('buttontext');
            buttonText.innerHTML = "unfollow";
            }   
    </script>
</head>
<body>
    <div id="PARENTCONTAINEROFBUTTON">
        <a id="FOLLOWBUTTON" href="#follow"><span id="buttontext">follow</span></a>         
    </div>
    <div id="othercontainer">
        <button onclick="switchFollow()">switch to unfollow</button>
    </div>
</body>

...