Question 36559 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Alter text in Button after Ajax call – Jquery

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>
Tags:

2

Answers


  1. 0

    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';
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search