Switching between two images and two sentences

Question

I am creating an add and delete button, when you can add above the picture it says please add and when you can delete it says please delete. I am stuck however on how to be able to make it work. What I got works when you add but not when you delete:

    $('.button a').click(function() {
        var url = $(this).attr('href');
        var info = $(this).attr('rel');
        var cct = $.cookie("<?php echo $this->config->item('csrf_cookie_name'); ?>");

        $.get(url, {<?php echo $this->security->get_csrf_token_name(); ?>: cct}, function() {
            $('.button a').empty().addClass('delete');
            $('.addText').empty().html(info);
        });
        return false;
    });

The html

<div class="addText">please add</div>

<div class="button"><a href="cabinet/add/180" class="add" rel="please delete"></a></div>

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Since you're taking the text from the link's rel attribute, you need to change the rel to what you want it to say next:

// Add to Cabinet
$('.button a').click(function() {
    var url = $(this).attr('href');
    var info = $(this).attr('rel');
    var cct = $.cookie("<?php echo $this->config->item('csrf_cookie_name'); ?>");

    $.get(url, {<?php echo $this->security->get_csrf_token_name(); ?>: cct}, function() {
        $('.button a').empty().addClass('delete');
        $('.button a').attr('rel', $('.addText').html()); // Change the rel text
        $('.addText').empty().html(info);
    });
    return false;
});

As an aside: never allow GET requests to delete data, use POST instead: https://stackoverflow.com/a/1744404/539097

You can also use toggleClass instead of addClass to alternate between adding and removing the "delete" class on your link element.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 18 '12 at 22:58

mdarwi

913
4
9

Hey, thanks for the help. I did not know that about get and post thanks for pointing that out. 1 thing though this allows for the rel text to change but what about changing between the two images? I want when you click add the class to change to delete and when you click it again it changes back – Jacinto Mar 18 '12 at 23:06
@Jacinto I added a line to my original post to say that you can use toggleClass instead of addClass to switch between adding and removing the "delete" class. – mdarwi Mar 18 '12 at 23:09
Is there also a way to switch the url? – Jacinto Mar 18 '12 at 23:15

Switching between two images and two sentences

1 Answers1