Jump to content


[SOLVED] Using custom Javascript at the datagrid list

flexgrid js sort

  • Please log in to reply
9 replies to this topic

#1 xxaxxo

xxaxxo

    grocery CRUD Expert

  • Members
  • PipPipPip
  • 71 posts
  • LocationBulgaria

Posted 14 May 2012 - 06:45 AM

Hello ,
i'm using GC 1.2.2 and bootstrap and i've manage to create this:
popover.png
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.

Attached Thumbnails

  • popover.png


#2 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,075 posts
  • LocationLondon

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 ;)
Posted Image

#3 xxaxxo

xxaxxo

    grocery CRUD Expert

  • Members
  • PipPipPip
  • 71 posts
  • LocationBulgaria

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.

#4 xxaxxo

xxaxxo

    grocery CRUD Expert

  • Members
  • PipPipPip
  • 71 posts
  • LocationBulgaria

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)

Edited by xxaxxo, 14 May 2012 - 10:27 AM.


#5 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,075 posts
  • LocationLondon

Posted 14 May 2012 - 06: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.

P.S. 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.

Edit: 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.

Edited by web-johnny, 14 May 2012 - 06:51 PM.

Posted Image

#6 xxaxxo

xxaxxo

    grocery CRUD Expert

  • Members
  • PipPipPip
  • 71 posts
  • LocationBulgaria

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.

#7 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,075 posts
  • LocationLondon

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)
Posted Image

#8 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,075 posts
  • LocationLondon

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.
Posted Image

#9 xxaxxo

xxaxxo

    grocery CRUD Expert

  • Members
  • PipPipPip
  • 71 posts
  • LocationBulgaria

Posted 15 May 2012 - 11:23 AM

Yes! This "hack" works.
Thank you.

#10 collamack8

collamack8

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 27 May 2019 - 01:34 AM

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






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users