[SOLVED] tooltip on datagrid + parameter = problem

[catpaw]

Hi all,

I found my response in this post:

http://www.jeasyui.com/forum/index.php?topic=1919.msg4247#msg4247

and it works but I have an issue:

1. For each row in the table the tooltip with ajax content is created.
2. I position the mouse over the cell A, the ajax content is displayed in tooltip, no problem.
3. I position the mouse over the cell B and ajax content is displayed in tooltip, no problem.
4. I position the mouse over the cell A again, the tooltip is empty.
5. I position the mouse over the cell C, the ajax content is displayed in tooltip, no problem.
6. I position the mouse over the cell A and B again, the tooltip is empty.

Here the code:

declare tooltip in the datagrid:

Code:

onLoadSuccess:function(){
  $('.ttp').tooltip({
    content: $('<div></div>'),
    position: 'right',
    hideEvent: 'none',
    onShow: function(){
      var t = $(this);
      t.tooltip('tip').focus().unbind().bind('blur',function(){
        t.tooltip('hide');
      });
    },
    onUpdate:function(content){
      var opts = $(this).tooltip('options');
      var id_ticket = opts.param;
      content.panel({
        width: 600,
        height: 'auto',
        border: false,
        href: 'resume_ticket.php?id_ticket='+id_ticket
      });
    }
  });
}

then in every cell:

Code:

formatter: function(value,row,index){
  return '<a href=\'#\' class=\'ttp\' data-options=\'param:'+row.id_ticket+'\'>'+value+'</a>';
}

what I believe is that once the contents of a cell is requested, is not updated when the content is requested again

appreciate any help

thanks

[stworthy]

All your tooltip components use the same 'content'. This is why you lose the content when moving the mouse on another cell. To solve this issue, please use this code instead.

Code:

$('.ttp').tooltip({
  content: function(){return $('<div></div>')}
});

[catpaw]

hi stworthy

I changed my code like you told me

Code:

onLoadSuccess:function(){
  $('.ttp').tooltip({
    content: function(){return '<div></div>'},
    position: 'right',
    hideEvent: 'none',
    onShow: function(){
      var t = $(this);
      t.tooltip('tip').focus().unbind().bind('blur',function(){
        t.tooltip('hide');
      });
    },
    onUpdate:function(content){
      var opts = $(this).tooltip('options');
      var id_ticket = opts.param;
      content.panel({
        width: 600,
        height: 'auto',
        border: false,
        href: 'resume_ticket.php?id_ticket='+id_ticket
      });
    }
  });
}

but I get this error:

Uncaught TypeError: content.panel is not a function

if I do an alert of content:

alert(JSON.stringify(content));

with content: function(){return '<div></div>'}, the alert is -- "<div></div>" --> get error
with content: $('<div></div>'), the alert is {"0":{},"length":1} --> remains the problem

[stworthy]

The 'content' function should be:

Code:

content: function(){return $('<div></div>')}

[catpaw]

hi stworthy, as always thank you for your help, it works now