Alter text in Button after Ajax call-CodePudding

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.

Last EDIT:

I added id="btn" to the HTML code and its 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>

CodePudding user response：

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/[email protected]/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/[email protected]/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/

CodePudding user response：

Identify your button by adding an id and put your text inside a span

<a href='$add_wish' id='my_button' 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>

You have to change the innerText of the span, just add the following code after the product is added :

document.querySelector('#my_button span').innerText = 'Added to wishlist';