1

Can someone point out what I need in my code to stop it doubling up on data when you mouseenter on the hyperlink tag. I put a flag in there isLoading but it still continues to double up. I've probably done it wrong could someone have a look through my code and see whats wrong with it - see if you can prevent it from double posting on mouseenter. Please show me you're changes - Thanks from KDM.

(function($){
    $.fn.rating_display = function() {
        var _this = this;
        var id = $(_this).data('id');
        var position = $(this).parent().position();         
            var left = position.left - 15;  
            var top  = position.top + $(this).height() + 13;
        var isLoading = false;

        function clear_ratings() {
            $('.ratings-content').html(""); 
        }

        $(document).on('click', function(e) {
            var element = e.target;

            /*else if($(element).closest('.rating').length){
                $('.ratings-display').show();
            }*/

        });
        // here is where I'm having trouble with double posting
        $(this).on('mouseenter click', function(e) {
            if(isLoading == true) return false;

            $.ajax({
                type:'POST', 
                dataType:"html",
                data:{product_id:id},
                url:"../../webservices/get_rating.php",
                beforeSend: function() {
                    clear_ratings();
                    $('.ratings-display').show().css({'left':left + 'px', 'top':top + 'px'});
                    isLoading = true;   
                },
                success: function(data) {                                                                       
                    $('.ratings-content').append(data);                                             
                }, error:function(data, status, xhr) {
                    clear_ratings();
                    $('.ratings-content').html(data + "\r\n" + status + "\r\n" + xhr);  
                }
            });
        }).on('mouseleave', function(e) {
            var target = e.relatedTarget;

            if($(target).closest('.ratings-display').length) {
                return false;   
            }else{
                $('.ratings-display').hide();
                clear_ratings();
                isLoading = false;
            }
        });

        $('.ratings-display').on('mouseleave',function (e) {            
            var target = e.relatedTarget;

            if($(target).closest('.rating').length) return false;

            if(!$(target).closest('.ratings-display').length) {
                $('.ratings-display').hide();
                clear_ratings();isLoading = false;  
            }


        });
    }
})(jQuery);

2 Answers 2

2

'mouseenter click' means the action is performed once at mouseenter and again if you click.

1

Try setting isLoading = true; before the ajax call rather than in the beforesend function. And you also want to reset isLoading = false on ajax call completion rather than on mouseleave. Depending on whether you're doing it for keyboard navigation reasons or not, you could also stop listening to the click event entirely.

2
  • Thanks for you're input I do need the click event for tablet computers that's why it's there.
    – ONYX
    Apr 18, 2013 at 9:10
  • @kdm mouseenter touchstart would probably be the best events in that case
    – wheresrhys
    Apr 18, 2013 at 23:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.