CODEWITHSUNDEEP
javascriptjqueryhyperlink
Nere
Nere

Reputation: 4097

How to change link value from "Choose" to "Chosen"?

Here is my input:

<a id="choose" alt="554">Choose</a>

How I can get the output after click the link "Choose" become "Chosen" and then back to "Choose" after click it once again?

My expected Output: 

<a id="choose" alt="554">Choosen</a>

Here is my Ajax: 

   $(function(){
   
     $('#choose').live('click',function(){
            var $this = $(this);
            var chapter_id = $this.attr('alt');

            if($this.hasClass('edu_level_active')){
                del_chapter(chapter_id,$this);
            }else{
                if($this.hasClass('disabled')){
                    return false;
                }else{
                    ins_chapter(chapter_id,$this);
                }
            }

        });
   
   }); 

  function ins_chapter(chapter_id,$this)
    {
        $.ajax({
            type      : 'post',
            url       : '/dashboard/choose/',
            data      : 'chapter_id:'+chapter_id,
            beforeSend: function(){
                $this.addClass('edu_level_active');
            },error   : function(){
                alert('error');
            }
        });

        return false;
    }

Upvotes: 1

Views: 39

Answers (3)

Nin-ya
Nin-ya

Reputation: 252

You can define a boolean variable which indicates a click or unclick.

var retVal = false
$('#choose').on('click', function(){
 if (!retVal){
  retVal = true;
     $(this).text('Choosen');
 }
 else {
 retVal = false;
       $(this).text('Choose');
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="choose" alt="554">Choose</a>

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Try this:.

$('#choose').on('click',function(){
        var $this = $(this);
        var chapter_id = $this.attr('alt');
        var a_text = $this.text().trim();

        if(a_text=="Choose"){
           $this.text('Choosen');
        }
        else{
           $this.text('Choose');
        }


        if($this.hasClass('edu_level_active')){
            del_chapter(chapter_id,$this);
        }else{
            if($this.hasClass('disabled')){
                return false;
            }else{
                ins_chapter(chapter_id,$this);
            }
        }

    });

Upvotes: 0

Dustin Hayes
Dustin Hayes

Reputation: 236

It's simple, just test for the current value of the text and change it accordingly: 

$('#choose').live('click',function(){
    var $this = $(this);
    var chapter_id = $this.attr('alt');
    var chapter_text = $this.text().trim();

    if (chapter_text === 'Chosen') {
        $this.text('Choose');
    } else if (chapter_text === 'Choose') {
        $this.text('Chosen');
    }

    if ($this.hasClass('edu_level_active')) {
        del_chapter(chapter_id,$this);
    } else{
        if ($this.hasClass('disabled')) {
            return false;
        } else{
            ins_chapter(chapter_id,$this);
        }
    }
});

Upvotes: 0

Related Questions