Question

I am not sure what i am doing wrong here.i have a div and i want to open up a popup if user hover over that div section and want to close on mouseout. here is my code

<div class="topCart">
  some data
</div>

this is my JQuery code

$(".topCart").mouseover(function() {
    $.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(),
     function(result) {
        $('#viewCart').html(result);
        refreshMiniCart();
        });
    $('#viewCart').slideDown('slow');
    }).mouseout(function() {
     $('#viewCart').slideUp('fast');
   });

above code is not working nor its giving any Ajax call to fetch fresh data, while if i use following code

$(document).ready(function(){
   $(".topCart").hover( function () {
    $('#viewCart').html("");
    $.get('${rolloverPopupUrl}?bustcache='+new Date().getTime(), function(result){
    $('#viewCart').html(result);
     refreshMiniCart();
    });
     if($('#viewCart').is(':hidden')){
        $('#viewCart').slideDown('slow'); }
        },
        function () {
            $('#viewCart').slideUp('fast');
        });
});

this piece of code is working and its fetching data so i do not see use of document.ready
with my limited knowledge of Jquery i tried but not able to see the reason of not working of code
can any one point me my error?

Answer 1

Try having some basic structure and cleanliness (which is next to godliness) when typing your code, and spotting errors will be much easier:

$(function() {
    $(".topCart").on({
        mouseenter: function() {
            var elem = $('#viewCart');
            elem.empty();        
            $.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(), function(result) {
                elem.html(result);
                refreshMiniCart();
            });
            if (!elem.is(':visible')) elem.slideDown('slow');
        },
        mouseleave: function() {
            $('#viewCart').slideUp('fast');
        }
    });
});​