CODEWITHSUNDEEP
jqueryajax
McLosys Creative
McLosys Creative

Reputation: 759

Hovercard not working for multiple instances

Hi i have issue with multiple instance of hovercard, the data is passed using ajax. the hovercard works for first instance, and not for second one. please help me to fix this. jsfiddle is here : http://jsfiddle.net/sakirullahi/TnTzk/6/

Upvotes: 0

Views: 367

Answers (2)

Abhidev
Abhidev

Reputation: 7253

Checkout the JSFiddle

var hoverHTMLDemoAjax = '<p><label id="username"></label></p>';
$(".demo-ajax").each(function(){
   var _this = $(this);
   _this.hovercard({        
        detailsHTML: hoverHTMLDemoAjax,
        width: 100,
        delay: 500,
        onHoverIn: function () {
            $.ajax({
                url: '/echo/json/',
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {                
                    _this.parent().find("#username").prepend("<p class='loading-text'>Loading ...</p>");
                },
                success: function (data) {   
                   console.log(_this);
                   var justatext="testing text goes here";                   
                    _this.parent().find("#username").html(justatext);                   
                },
                complete: function () {
                    $('.loading-text').remove();
                }
            });
        }
    });

});

Upvotes: 2

John
John

Reputation: 1296

You are using two labels with the same ID. You can't have that in HTML so only the first rendered label will take that ID. Try it with classes instead:

var hoverHTMLDemoAjax = '<p><label class="username"></label></p>';
    $(".demo-ajax").hovercard({        
    detailsHTML: hoverHTMLDemoAjax,
    width: 100,
    delay: 500,
    onHoverIn: function () {
        $.ajax({
            url: '/echo/json/',
            type: 'GET',
            dataType: 'json',
            beforeSend: function () {                
                $(".username").prepend("<p class='loading-text'>Loading ...</p>");
            },
            success: function (data) {   

               var justatext="testing text goes here";                   
                $(".username").html(justatext);                   
            },
            complete: function () {
                $('.loading-text').remove();
            }
        });
    }
});​

http://jsfiddle.net/brightpixel/rDGe5/

Upvotes: 1

Related Questions