⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

[SOLVED] Using custom Javascript at the datagrid list



xxaxxo
  • profile picture
  • Member

Posted 14 May 2012 - 06:45 AM

Hello ,
i'm using GC 1.2.2 and bootstrap and i've manage to create this:
[sharedmedia=core:attachments:172]
it's a simple popover box that shows up when you hover a result and shows more info for it.
The problem that I currently have is that - it shows with no problems when you load the page , but if you sort the page - the popover stops showing (and when i clear my browser chache the popover starts working again) , my guess is that the 'flexgrid sort functions' injects js that makes my popover not work properly. I've looked into the js file and i've commented the createCookie for ordering but the problem still persists.
1. Do you know anything that may be causing the problem
2. Can you tell me if there is a simple way to disable page sorting in flexgrid (for example - remove the #id that triggers it)

Sorry i'm not very good with jquery and ajax and the questions may be a bit stupid.

Thank you.

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 14 May 2012 - 07:00 AM

1. Yes the problem is that the javascript has to be called everytime an ajax is called. The first time you run grocery CRUD the list is not called from an ajax request for faster results. So if you have a javascript at the list it will just dissapear on ordering/paging or searching.
2. A work around for the ordering is

$('.field-sorting').die('click'); ,

but a better way is to use the live() function for example:


$('.test').live('click',function(){
....
});
$('.test').live('hover',function(){
....
},function(){
....
});



For more about live() my friend google will help you ;)

xxaxxo
  • profile picture
  • Member

Posted 14 May 2012 - 07:35 AM

Thank you , if it's not a problem can you hint me on " how to include" my javascript files after the ajax call so that they don't dissapear, i think that will fix the problem - i've looked at .live() but it just says in jquery.com that it's slow and it will be deprecated in the later versions.

xxaxxo
  • profile picture
  • Member

Posted 14 May 2012 - 07:59 AM

quick update - this problem (the removing of other js files after sorting and pagin) doesn't exist in datatables theme - so i switched to using it.

more benefits of datatables theme - the search works for relational columns (flexgrid can't search into columns that display related data)

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 14 May 2012 - 18:47 PM

As it is a more complicated to give you a solution with the challenge always to not change the core of grocery CRUD. I will stay with the same solution. Yes you are right live() will be deprecated so you can use

.delegate()

instead, it does exactly the same thing as live. I don't think you will have any problem with this function.

[b]P.S.[/b] What do you mean about flexigrid and relation columns . Do you mean set_relation or set_relation_n_n ? If there is a bug I want to log it.

[b]Edit: [/b]set_relation_n_n doesn't work only for ALL , if you try a search with the column name it will work as normal. I will track it as a bug. Thank you.

xxaxxo
  • profile picture
  • Member

Posted 15 May 2012 - 04:58 AM

About delegate() - i've tested it with delegate before my post that asks for a hint and it still wasn't working. With delegate() the js's still dissapear on "sorting" and "paging". That's why I made the post - to see if you have any ideas.

About the flexgrid search and Flexgrid vs Datatables
I thought you knew , because I saw some posts before about it . In flexgrid if you switch up a column with callback (you have the id and you use a callback to display a name) when you seach it doesn't work on the name- instead it works for the id. And with datatables it works for the name.
About sorting, i've noticed that if you have a callback column with numbers - with datatables if you sort them - you have no problems but with flexgrid if you sort , they are sorted by their first char (instead of 803, 90, 40, 2 - they are sorted like 90, 803, 40, 2)
I'm still testing and i'll post updates (if any) in this thread regarding to this and other related problems that i find.

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 15 May 2012 - 05:43 AM

Oh I didn't know you tried delegate() and didn't work. I will give you a guideline ASAP of how to do it without changing the core library (It will be 5-6 steps)

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 15 May 2012 - 06:16 AM

And finally after some tries I found the solution WITHOUT changing the core.

1. For the list (not the ajax request) just have it as it is.
2. As for the ajax requests you can have something like this:


function customers_management_2($operation = null)
{
$crud = new grocery_CRUD();

if($operation =='ajax_list')
{
echo '<script src="/assets/my_custom_js/test.js"></script>';
}

$crud->set_table('customers');
....
}


where test.js (just an example):


$(function(){
$('.edit-icon').hover(function(){
$(this).closest('td').css('border','1px solid red');
},function(){
$(this).closest('td').css('border','none');
});
})


Inform me if this will work for you.

xxaxxo
  • profile picture
  • Member

Posted 15 May 2012 - 11:23 AM

Yes! This "hack" works.
Thank you.

collamack8
  • profile picture
  • Member

Posted 27 May 2019 - 01:34 AM

i've tried this method, but it comes an error. $ is not defined