Getting error in ajax success function. getsaves.text is not a function

Question

This is my Code

<script>jQuery('.appendurl').click(function(e){
                e.preventDefault();
                var getsaves = jQuery(this).text();
                var ajaxurl = '/wp-admin/admin-ajax.php';
                jQuery.post(
                    ajaxurl, 
                    {
                        'action': 'add_to_wishlist',
                        'add_to_wishlist': jQuery(this).attr('data-product-id'),   
                        'product_type': jQuery(this).attr('data-product-type')
                    }, 
                    function(response){
                        if(response.result = 'true'){
                            jQuery(this).closest('.yith-wcwl-add-button').removeClass('show');
                            jQuery(this).closest('.yith-wcwl-add-button').addClass('hide');
                            jQuery(this).closest('.yith-wcwl-wishlistexistsbrowse').removeClass('hide');
                            jQuery(this).closest('.yith-wcwl-wishlistexistsbrowse').addClass('show');
                            saves = getsaves.replace(' saves','');
                            countInc = parseInt(saves, 10) + 1;
                            updatedText = countInc + ' saves';
                            alert(updatedText);
                            getsaves.text(updatedText);
                        }
                    }
                );
            });</script>

I am gettting error on last line in ajax success function. error is TypeError: getsaves.text is not a function getsaves.text(updatedText);

getsaves.text(updatedText)

In alert i am getting value and same getsaves i have used above that line to replace some string.

Answer 1

getsaves is a string, not a jQuery object, so you can't call .text on it.

I suggest that you assign $this = jQuery($this) and replace all occurrences of the latter with $this , and then also use that on the line in question.

This will also resolve the issue that this inside those callbacks isn't the this that you think it is:

jQuery('.appendurl').click(function(e) {
    e.preventDefault();
    var $this = jQuery(this);
    var getsaves = $this.text();
    var ajaxurl = '/wp-admin/admin-ajax.php';
    jQuery.post(ajaxurl, {
       'action': 'add_to_wishlist',
       'add_to_wishlist': $this.attr('data-product-id'),
       'product_type': $this.attr('data-product-type')
    }, function(response) {
       if (response.result == 'true' ) {  // fixed '=' error here!
           $this.closest('.yith-wcwl-add-button').removeClass('show');
           $this.closest('.yith-wcwl-add-button').addClass('hide');
           $this.closest('.yith-wcwl-wishlistexistsbrowse').removeClass('hide');
           $this.closest('.yith-wcwl-wishlistexistsbrowse').addClass('show');
           saves = getsaves.replace(' saves','');
           countInc = parseInt(saves, 10) + 1;
           updatedText = countInc + ' saves';
           // alert(updatedText);
           $this.text(updatedText);
       }
   });
});

You could also chain the two pairs of .removeClass and .addClass calls, eg:

$this.closest('.yith-wcwl-add-button').removeClass('show').addClass('hide');