Alter text in Button after Ajax call

September 21, 2022

I’m hitting some trouble in trying to change the text in a button after a user clicks on the wishlist link. The Ajax call is working successfully right now and the data is updated correctly in the DB, currently the function displays a notification pop up in the browser when a user clicks on wishlist, but I would like to change the "wishlist" part of the button to "Added to wishlist" after a successful submission.

EDIT:

I have added $("#btn span").text("Added to wishlist");

But it’s still not working.

function wish($p_id){
    var w_id = $p_id;
    var email = $(".wish").data("user");

    if(email != 0){
        $.ajax({
            url:"function.php",
            method:"post",
            data:{w_id:w_id,email:email},
            success: function($wish){
                if($wish > 0){
                    notif({
                        msg:"Product Already Added to wishlist!!!",
                        type:"warning",
                        width:330,
                        height:40,
                        timeout:1000,
                    })
                }else{
                   $("#btn span").text("Added to wishlist"); 
                    notif({
                        msg:"Added to wishlist",
                        type:"success",
                        width:330,
                        height:40,
                        timeout:1000,
                    })
                }
            }
        })
    }
}

and the HTML part

<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
    <i class='glyphicon glyphicon-heart'></i> Wishlist
</a>

>Solution :

The issue is that in this code:

$("#btn span").text("Added to wishlist");

your selector is missing the target. It tries to find an element with the ID of "btn", which is fine, but then it tries to look for a <span> element inside that, which doesn’t exist.

It’s trivial to resolve of course by wrapping the text in the expected <span>:

$("#btn span").text("Added to wishlist");

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
    <i class='glyphicon glyphicon-heart'></i>
    <span>Wishlist</span>
</a>

N.B. Note that writing simply

$("#btn").text("Added to wishlist")

is undesirable because it will erase the <i> containing the icon.

Demo (for comparison with above):

$("#btn").text("Added to wishlist");

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='$add_wish' id="btn"class='btn btn-default add-to-cart wish' data-user='$s_email' onclick='wish($id)'>
    <i class='glyphicon glyphicon-heart'></i>
    Wishlist
</a>

Relevant documentation: https://api.jquery.com/category/selectors/