jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

I would like to join a cell to the fancybox plugin...

Tags: fancybox custom formatter popup

15/04/2010
14:45

noppem

Member

Members

Forum Posts: 5

Member Since:
15/04/2010

Offline

Hi everybody,

I have a jqgrid cell modified with a custom formatter:

function detailFmt(cellValue, options, cellObject){
var link = '<a id="userDetails" title="Details for user ' + cellValue + '" href="index.cfm?TargetUrl=D_USR_D&username=' + cellValue + '"><img border="0" src="../images/info.png"/></a>';
return link;
}

To get the details data in a popup screen, I try to use the fancybox plugin:

http://fancybox.net/howto

The problem is that the fancybox method has to be linked to the id parameter of the "a" html tag: (should be like this...)

$('#userDetails').fancybox({'type':'ajax'}); (does not work -)

If instead I write: $('#pager').fancybox({'type':'ajax'}); I get the pager in the popup form (funny -)

How can I link the .fancybox method to the html id parameter of the 'a' tag inside the clicked cell of the jqgrid ?

Thank you in advance for your help, and greetings from Belgium, Wink

Michel

16/04/2010
18:55

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Try to call

$('#userDetails').fancybox({'type':'ajax'});

in gridComplete method.

You call it, but the content is not into the dom, you should either call it in gridComplete event or call this command after the grid is created and enclose it in setTimeout function.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/04/2010
12:39

noppem

Member

Members

Forum Posts: 5

Member Since:
15/04/2010

Offline

Hi tony, thank you for your answer. unfortunately I have no results...

i tried to make it in another way to test the this Id:

for example i make a formatter:

function deleteFmt(cellValue, options, rowObject){
           var encoded = encodeURIComponent(rowObject[4]);
           var link = '<a id="confirmation" href="index.cfm?TargetUrl=A_ROL_D&StrCode=' +rowObject[1]+ '&StrModifiedOn=' +encoded+ '&act=0"><img border="0" src="../images/trash.png"/></a>';
           return link;
       };

then, to test the bind in the gridComplete I wrote this:

gridComplete: function(){
               $('#confirmation').bind('click',function(){
                   alert('confirmation !');
               });
           }

If i click on the cell I cannot see any alert box. Is there something wrong in this code ?

Thanks,

Michel

20/04/2010
14:24

noppem

Member

Members

Forum Posts: 5

Member Since:
15/04/2010

Offline

I found the solution -:)

first of all for the delete fonfirmation box, instead of this:

gridComplete: function(){
               $('#confirmation').bind('click',function(){
                   alert('confirmation !');
               });
           }

I had to write it so:

loadComplete: function(){
               $("a[id='confirmation']").bind('click',function(){
                   return confirm('<cfoutput>#JSStringFormat(StLabels["LBL_JS_DELETE_CONFIRM"])#</cfoutput>');
               });
           }

So, now for the fancybox, I have the way to link the id to the fancybox method -)

gridComplete: function(){
               $("a[id='userDetails']").fancybox({'type':'ajax'});
               }
           });

... and this is OK,

Tony, thank you for all, and btw for your grid -)

Michel

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
52 Guest(s)

Currently Browsing this Page:
1 Guest(s)