|
JQuery datatable with added FancyBox and auto refresh |
||||||||
This is relatively straightforward to do, but there are several key concepts to getting everything working correctly, so I've broken it down into a few chunks.
You can see an example of a datatable with added FancyBox here.
Firstly we cannot use the standard method of calling a datatable. We need to load it into a JavaScript function rather than just using the document.ready() method. This is because we need to check if it exists, and we need to be able to refresh it in code, and we can't do that unless it has a reference.
Below is the code to create the datatable as a JavaScript function. Notice that what it does is check if a reference exists 'dTable' and if it doesn't it runs the datatable code. If it does exist then it runs the dTable.fnDraw() method instead, which causes the datatable to refresh itself. All the other datatable code remains the same.
2 function getData()
3 {
4 if (typeof dTable == 'undefined') {
5
6 dTable = $('#displayData').dataTable( {
7 // All the rest of the datatable code goes here
8 });
9 }
10 else
11 {
12 dTable.fnDraw();
13 }
14
15 }
16</script>
Next I want to change the JSON from the remote cfc. Instead of passing the id value back in the JSON response I want to change it into a link for my pop up event. In the loop that creates the JSON I find the id value, and switch it out for a hyperlink, and give it a class of pop-up. I am also adding the id in as the element id, so that I can pick it up and pass it to our pop up window.
Be careful with your quoted values at this point, quotes may interfere with your JSON.
2 <a class=pop-up id=#rResult[variables.i][rResult.currentRow]#>Edit</a>
3<cfelse>
4 #rResult[variables.i][rResult.currentRow]#
5</cfif>
So now the datatable will have a link in it as the first element. The next part of this puzzle is attaching a JQuery selector to the 'pop-up' class on our link. As the links are loaded in dynamically we cannot just give them a regular selector. We need to bind the event using the live() JQuery event method. This is a really powerful JQuery method, I won't go into depth about what it does here, but Ben Nadel has written a great entry about it here: http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm , I'd advise reading it and making sure you are clear on what its doing.
2$(document).ready(function(){
3
4 // pop up handler
5 $( ".pop-up" ).live(
6 "click",
7 function( event ){
8
9 // get the id of the item clicked on
10 var id = $(this).attr('id');
11
12 $.fancybox({
13 'overlayOpacity' : 0.5,
14 'href' : 'blank.cfm?id=' + id,
15 'onClosed' : function() {
16 getData();
17 alert('data table reloaded');
18 }
19 });
20
21 // block the href actually working
22 return( false );
23 }
24 );
25
26 // load the datatable
27 getData();
28 });
29</script>
You can see above we are looking out for a click on any elements that exist, or are created with a class of 'pop-up'. Then we attach the fancybox plugin to them. I'm also reading the id value and using it in the href url call. In this way we can pass in the id of the record clicked on.
The fancybox plugin has a 'onClosed' option, which allows you to specify code to run when the lightbox closes through any method. in the example above I am running the getData() function, which as the datatable already exists will simply reload it.
The very last line is where you tell the page to load the datatable, as it is no longer within a document.ready() it will not auto load.
You can see an example of a datatable with added FancyBox here.
I'm looking to do something similar by having the popup edit box be triggered by a double-click on a table cell and using the ckeditor plugin to update the contents.
I guess you are trying to replicate a desktop environment?
http://blog.cutterscrossing.com/index.cfm/2011/2/7...
I currently have a simple data entry/edit web page where the users type into a ckeditor textarea, specifying each column and row by agonizing row. The results are displayed as a grid so I just thought I'd make the grid editable. Since the ckeditor menus,etc. take up so much real-estate I thought I would do a pop-out window for the edits along with a Cancel and Apply button. There would be a Save for the whole page of applied edits.
@Steve - I had looked at the DataTables plugin for another purpose but hadn't seen your extension for it. I will take a look.
@ripwit, ah, I see what you mean now. you can make each of the data items editable easily enough using the API. I'd be tempted to save each action as the user exits the editable boxes, maybe using an ajax request. That way there isn't one big commit at the end of the process.
How can I now add a pencil image for some of the columns to allow the user to edit.
The fancybox works correctly now. I am using the server side.
Thanks
Mona
I have most things working now thanks to you. I would like to see how to add a date range filter to one of the columns. I am using your server side code. I have the two date called min and max on the page.
Good to see that you have it working. You could use a datepicker plugin to add a min and max date value fields, that way when the date fields are filled in you trigger the json request passing in the values.
You'd have to amend the sql on the back end, giving it another where clause for the date fields.
I got it working thanks so much!!
That's great! Do you have a version online that we can see?
You could send me the code and I'll host it here.
When the record is updated (or the fancybox is closed, as in the demo), I note the table refreshes back to very first page of the recordset. Is it possible to instead to remain on the same page of the recordset so that the user could see that the record they clicked the edit button for was in fact updated (for eample, I could include a 'Last Updated' column on the table too)
The files of this demo are downloadable somewhere ?
Thanks a lot,
Marc
<a href="http://www.barenakedlife.com/how-to-turn-a-guy-on/...;
http://www.barenakedlife.com/how-to-turn-a-guy-on/...
how to get more instagram likes
http://socialgrand.com/buy-instagram-likes/
Thanks a lot,
http://www.theworkbootsdoctor.com/
http://www.therowingmachinedoctor.com/
code:
if (typeof dTable == 'undefined') {
5
6 dTable = $('#displayData').dataTable( {
7 // All the rest of the datatable code goes here
8 });
9 }
Where can I find the rest of the database code?
<a href="https://uk.fiverr.com/brayden_ben/do-high-trust-fl...; target="_blank">High Trust Flow backlinks</a>
3 var href = $(this).attr('href');