CODEWITHSUNDEEP
javascriptjqueryqtip2flexigrid
Tony_89
Tony_89

Reputation: 817

tooltips only on first page of table

Hi i have a flexigrid to display some data on my site. Each row has a hyperlink that when the user hovers over it brings up a tool tip containing more information. However this only works for the first page on the table, when i change pages the tool tips stop working. I know this is because i use the tool tips in document.ready but i am unsure on how to solved the problem. any help would be appreciated. I've included a fiddle for the tool tips however the table does not have pagination. See fiddle ive included the code below too. This is called in document.ready

    function tooltip(){
           $('#tblOrder tr td a').on('mouseenter', function(event) {

                var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);

                $(this).qtip({        
                    content: {
                    text: 'Loading.....',
                    ajax: {
                        url: '<%=Url.Action("Alarms") %>',
                        type: 'POST',
                        data: {id: id},
                        success: function (data, status) {
                            this.set('content.text', data);
                        },
                        error: function (xhr) {
                            console.log(xhr.responseText);                  
                                }
                            }
                        },
                        show: {
                            event: event.type,
                            ready: true,
                        effect: function () {
                            $(this).slideDown();
                            }
                        },
                        hide: {
                            effect: function () {
                         $(this).slideUp();
         }
     }

 }, event);

});
};

Upvotes: 0

Views: 202

Answers (1)

Martin Lantzsch
Martin Lantzsch

Reputation: 1901

When you are updating the content inside of #tblOrder you should rebind the event handler or even easier bind the mouseenter event to #tblOrder and filter the event callback with a detailed selector. So instead of your code - use this:

$('#tblOrder').on('mouseenter', 'tr td a', function(event) {

Upvotes: 1

Related Questions