CODEWITHSUNDEEP
javascriptjqueryhtml
theGreenCabbage
theGreenCabbage

Reputation: 4845

Changing button text and behavior using jQuery

I got a JS method that changes depending on the state of the button, defined by the indexOf("..some text..")

$('#add1').click(function(){
    if($(this).text().indexOf("Add Me!")) {
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/add') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            ... do stuff ...
        });
        $(this).removeClass('btn-material-yellow-600');
        $(this).addClass('btn-danger');
        $(this).text('Remove Me!');
        return false;
    } else if($(this).text().indexOf("Remove Me!")){
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/remove') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            ... do stuff ...
        });
        $(this).removeClass('btn-danger');
        $(this).addClass('btn-material-yellow-600');
        $(this).text('Add Me!');
        return false;
    }
});

What works:

When I click the initial "Add Me!", it would change to "Remove Me!". However, when the state of the button is in "Remove Me!", it seems the conditional is not satisfied, and the state stays in "Remove Me" no matter how many times I press the button.

Apologies for the messy and redundant code.. I'm very very new to JS, so everything is a muck fest.

Upvotes: 0

Views: 91

Answers (3)

KAD
KAD

Reputation: 11102

The indexOf return the position of the string it finds, and the position of your string is confusing the conditional if/else and it is always landing on the else if condition. Use == operator as follows :

$('#add1').click(function(){
  

    if($(this).text().trim() == "Add Me!") {
        
        $(this).text('Remove Me!');
        return false;
      
    } else if($(this).text().trim() == "Remove Me!"){
       
        $(this).text('Add Me!');
        return false;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add1">Add Me!</button>

Upvotes: 3

haakym
haakym

Reputation: 12358

html

<button id="add1">Add Me!</button>

Javascript/Jquery

$add1Btn = $('#add1');

$add1Btn.click(function() {
    var btnText = $add1Btn.html();
    console.log(btnText);

    if (btnText === 'Add Me!') {
            $add1Btn.html('Remove Me!');
    } else if (btnText === 'Remove Me!') {
            $add1Btn.html('Add Me!');
    }
});

http://jsfiddle.net/zymcm6jv/

Your AJAX calls may be causing an issue if things don't seem to be working properly. Also, I think you would want to be putting the change of text in the success call back for the AJAX call, that way the text will change once the response has been received.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

indexOf() needs a comparison when used in conditional since 0 is valid index but will be falsy in the conditional.

Use greater than -1 for truthy test since it will be -1 if index doesn't exist

if($(this).text().indexOf("Add Me!") >-1)..

Upvotes: 2

Related Questions