0

I have a subscribe button, once it is clicked (and subscribed successfully) ; I want my code to show directly unsubscribe. So, I set two different div's for each button, and I thought we could toggle between them.

<div id ="subscribe_everything">
{if !$userquery->is_subscribed($u.userid)}
<a onclick="subscriber('{$u.userid}','subscribe_user','subscribe_result_cont')" class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribe-branded yt-uix-button-size-default yt-uix-button-has-icon" title="Subscribe To {$u.username}" >
<span class="subscribe-label" aria-label="Subscribe">
Subscribe
</span>
</a>  
</div>
{else}
<div id ="unsubscribe_everything">
<button class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribed-branded yt-uix-button-size-default yt-uix-button-has-icon" onclick="subscriber('{$u.userid}','unsubscribe_user','subscribe_result_cont')" type="button" aria-role="button" aria-busy="false" >
<span class="subscribed-label" aria-label="Unsubscribe">
Subscribed
</span>
<span class="unsubscribe-label" aria-label="Unsubscribe">
Unsubscribe
</span>
</button> 
</div>              
{/if}

So, basically what I'm looking for is changing the id of the div from subscribe_everything to unsubscribe_everything once the user clicks on subscribe (or the opposite). This is the function being called by onclick:

function subscriber(user,type,result_cont)
    {
            $.post(page, 
        {   
            mode : type,
            subscribe_to : user
        },
        function(data)
        {
            if(!data)
                alert("No data");
            else
            {
            }
        },'text');
    }

I have a suspicion that we can need to use the toggle function of jquery (and toggle the id's) but I don't know where to add it and how. I'm looking also for a fast way, I don't want to bore the customer with 10 seconds for the div to toggle.

Huangism
  • 16,278
  • 7
  • 48
  • 74
George Chalhoub
  • 14,968
  • 3
  • 38
  • 61
  • Changing `id` attribute is not a good idea. Consider altering the `className` property: http://stackoverflow.com/questions/1988514/javascript-css-how-to-add-and-remove-multiple-css-classes-to-an-element – sampathsris Jul 31 '14 at 15:01
  • Or you can alter the class property values: http://stackoverflow.com/questions/7125453/modifying-css-class-property-values-on-the-fly-with-javascript-jquery – sampathsris Jul 31 '14 at 15:02
  • @Krumia, I read the questions but I couldn't figure out how to apply them in my code. – George Chalhoub Jul 31 '14 at 15:04
  • Even better approach would be to have two seperate buttons with two separate IDs, then toggle the visibilities. Changing IDs are like taking your sould and putting someone else's in your body.. – Subliminal Hash Jul 31 '14 at 15:10

2 Answers2

1

You can do this with a simple if/else clause and the jQuery .attr() function. There are two ways you can do this, by selecting the parent of the link or the better way: adding a class to the div element with the id (like subscribe-button).

The way with the class can be done like this:

if ($('.subscribe-button').attr('id') == 'subscribe_everything') {
    $('.subscribe-button').attr('id', 'unsubscribe_everything');
} else {
    $('.subscribe-button').attr('id', 'subscribe_everything');
}

if you want to do it with classNames, do it like this:

if ($('#subscribe_everything').hasClass('subscribed')) {
    $('#subscribe_everything').removeClass('subscribed');
} else {
    $('#subscribe_everything').addClass('subscribed');
}

Or use the toggleClass function, like user3895968 suggested:

$('#subscribe_everything').toggleClass('subscribed');

That way you don't have to add a new class or remove it (if unsubscribed) to the div element.

Simon Jentsch
  • 707
  • 5
  • 10
0

Changing id might not be helpful in long run.

You can always use the toggleClass to change the class attribute onclick event

Swaraj
  • 383
  • 2
  • 16