0

I have this code:

success:function(data){
  newAttrValue = $('.addwish').attr('data-tooltip').closest().replace("Add to wishlist", data);
  $('.addwish').attr('data-tooltip', newAttrValue);
}

and it returns:

TypeError: $(...).attr(...).closest is not a function

While if I use:

success:function(data){
  newAttrValue = $('.addwish').attr('data-tooltip').replace("Add to wishlist", data);
  $('.addwish').attr('data-tooltip', newAttrValue);
}

without .closest() it works fine.

The reason that I want use closest it to avoid changing all my items tooltip and only change tooltip of action item.

HTML

<a data-prodid="{{$cross->id}}" data-userid="{{Auth::user()->id}}" href="#" class="tt-btn-wishlist addwish" data-tooltip="Add to WishList" data-tposition="left"></a>

Any idea?

Update

full JavaScript code

$(document).ready(function(){
            $('.addwish').on('click', function(e){
                var productID = $(this).data('prodid');
                var userID = $(this).data('userid');
                e.preventDefault();
                $.ajax({url:"{{ url('wishlist') }}",
                    type:"POST",
                    dataType:"json",
                    data:{
                        "_token": "{{ csrf_token() }}",
                        "product_id": productID,
                        "user_id": userID,
                    },
                    success:function(data){
                        alert(data);
                    }
                });
            });
        });
Community
  • 1
  • 1
mafortis
  • 6,750
  • 23
  • 130
  • 288
  • Read this: https://stackoverflow.com/questions/41545413/jquery-element-closest-attr-is-not-a-function-when-using-each – caiovisk Feb 20 '19 at 03:11
  • @caiovisk I didn't quiet understand that, i tried it but it returns `SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)` – mafortis Feb 20 '19 at 03:14
  • Neither of these explain the error you are seeing, but they are what I'd start with. [`.closest()` expects a parameter](https://api.jquery.com/closest/) - it is used to find the closest *something* to your selector. You have not specified the *something*. Also, for newer versions of jQuery, you should use [`.data()`](http://api.jquery.com/data/) to access your data attributes. – Don't Panic Feb 20 '19 at 03:31

1 Answers1

1

You're getting that error because .attr('data-tooltip') returns a string. Strings don't have a .closest() method.

You can use $(this) to refer to the clicked element. If you want to replace the entire tooltip, no need to use .replace() - just overwrite the data-tooltip entirely:

$('.addwish').on('click', function(e){
  var $self = $(this); //This allows us to use $self as the target element

  $.ajax({
    //...
    success: function(data) {
      $self.attr("data-tooltip", data);
    }
    //...
  });

});
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • that won't change it – mafortis Feb 20 '19 at 04:26
  • Ok this does change it but i must move mouse and hover again my button to see changed is there anyway to just change it without need to move the mouse? maybe append? – mafortis Feb 20 '19 at 04:29
  • Hmm, I'm not too sure. After the `$self.attr("data-tooltip", data);` line, try adding `$self.mouseover();` to manually re-trigger a hover. I believe that this is a separate question, however this looks relevant: [Refresh an element so its new tooltip shows (in jQuery/Javascript)](https://stackoverflow.com/questions/22064881/refresh-an-element-so-its-new-tooltip-shows-in-jquery-javascript) – Tyler Roper Feb 20 '19 at 04:31