Web Trenches

jQuery Replacements for CFGRID, CFWINDOW, and CFTOOLTIP

Ajax, ColdFusion, Default, Web Development August 26, 2008

I recently completed the beta version of CFjqAjax.  This is a library of custom tags that replicate the CFGRID, CFWINDOW, and CFTOOLTIP tags from ColdFusion 8.  The CF8 tags work, but I find YUI and Ext much harder to work with than jQuery, and the file size of the JavaScript libraries that CF8 includes is excessive.  So, I created CFjqAjax.

See the demo

View the ReadMe (documentation) file

Download CFjqAjax

Current Version: 0.7  (beta)

UPDATE (9/2/08):  This project is now on RIAForge.  http://CFjqAJAX.riaforge.org

UPDATE (11/10/08):  If you have questions or suggestions, please use the RIAforge site – not this blog! If you have comments feel free to share below, but I do not regularly monitor this blog to answer questions.

 

NOTES:
The functionality of these tags is based on three existing jQuery libraries.
1. Flexigrd (http://webplicity.net/flexigrid)
2. jqModal (http://dev.iceburg.net/jquery/jqModal/)
3. jTip "Even More Updated" (http://users.evtek.fi/~mikkowu/jtip/index.html)

 

69 Replies to “jQuery Replacements for CFGRID, CFWINDOW, and CFTOOLTIP”

  1. I love jquery too so it’s great to see someone has created CF tags that use it.

    However… while it looks good in FF3 the grid does not render correctly in IE7. The firstname and lastname column headers have been put into their own column so there are actually 4 columns showing, not 2.

    CF_window does not render correctly in IE7. The grip bar in the bottom right is misaligned and the window doesn’t reduce its X size when made smaller.

    In both IE7 and FF3 the loading anim from cf_tooltip sometimes remains on the screen if you move quickly between the two example tooltips.

    I hope you don’t mind me reporting these bugs?

    Reply

  7. The quick search in your demo is case sensitive. e.g. richard does not find Richard.

    Looking good in IE7. 🙂 Paulo has more cool features planned for Flexgrid like inline editing of records, but you probably read that in his forum.

    Reply

  8. This looks very nice…

    Another glitch that I can see in IE6: If you open up the quick search panel on the grid, then click show window underneath, then the field selection drop-down shows through on top of the window that appears.

    Keep up the good work.

    Reply

  10. Nice job Mike!

    I had to make a couple of minor changes. I added #cgi.context_path# to the defaults of the pathToXxx attributes which makes it work in the context of a webapp.

    Also jquery126-min.js and jtip.inline-support.js had to be renamed to jQuery126-min.js and jTip.inline-support.js.

    Thanks

    Reply

  11. Nice work!

    The demo you’re showing here seems to be slightly different than what’s in the download package–look at the contents of the CF_WINDOW demo.

    Reply

  15. Very nice, although the tooltip has a small problem in Opera 9.5. The tooltip only stays open if you don’t move your mouse. Once you move your mouse, it closes and re-opens.

    Reply

  16. hey michael:

    this is awesome. thanks for putting it together and sharing it.

    found a tiny bug (maybe not a bug, but a point of clarification)… in tooltip.cfm, you’ve got a for attributes.pathTojTipCSS with a default path specified. however, in the demo code, your custom tag call has an attribute for pathTojqTipCSS.

    took me a few minutes to figure out why the path i specified in the custom tag wasn’t being picked up 🙂

    thanks again!

    Reply

  20. Thanks to everyone for the overwhelming positive response to this project. It was great to come back from a long weekend and see all this. Because of the interest I have seen, I have posted this project on RIAForge – http://CFjqAjax.riaforge.org

    Please report any bugs/issues to the RIAForge site. There is also a forum there.

    Some more specific responses…

    @Gary – The search in the demo is case sensitive because I am bluffing a data source using Query of Queries. I can correct that in the demo, but it should not impact use with a real data source.

    @Andy L – I have logged the IE6 bug (select boxes show through) and will try to correct that for the next release.

    @Andy W – Thanks for letting me know about this. I hadn’t considered how other Web servers would handle the files. I only tested with IIS. I will correct this in the next release.

    @Henry – I think CFDIV would be fairly easy to replicate without needing any additional jQuery extensions, so I will give it a shot. Also, I am interested in submitting these to Railo and OpenBD. I will probably hold off on that, though, until a full 1.0 release.

    @KC – I haven’t tested any of this in Opera. I will try to get Opera support into the next release, assuming the Flexigrid, jTip, and jqModal will support it.

    @Charlie – I will correct the bad reference to pathtojTipCSS in the next release.

    Reply

  21. Curious… I don’t see docs anywhere that this grid allows edits. Does it? (Inline edits, or just edits of the data set, or when a row is selected allow the browser to know what row that is and pull the data to a form and then push it back, and what about pushing the update(s) back to the server?) We were using jqGrid before this… and are seeing if it does a full feature compare or not.

    Reply

  22. John- No, this solution does not do in-place editing yet. From what I understand, the developers of Flexigrid are working on it, though. When they add it, I will most likely add it to this project.

    Reply

  23. After reading John’s post, I took a good look at jqGrid. Anyone have any thoughts on replacing Flexigrid with jqGrid in this project? It seems to have more functionality. Anyone know of any down sides?

    Reply

  24. Trying to get the id of a row or rows selected when clicking a button.

    deleteperson = function () {
    confirm(‘Delete ‘ + $(‘.trSelected’).length + ‘ items?’)

    }

    I get the total count but can’t seem to get the values.

    Reply

  25. I figured it out …

    deleteperson = function () {

    if($(‘.trSelected’).length>0){
    if(confirm(‘Delete ‘ + $(‘.trSelected’).length + ‘ items?’)){
    var items = $(‘.trSelected’);
    var itemlist =”;
    for(i=0;i

    Reply

  28. Hi Michael,
    i’ve used jqGrid: it has a very good api, expecially in editing grid rows; as far as i know its lacks, with respect to flexgrid, are:
    1) you cannot rearrange columns dragging them;
    2) you have to display links, one for each column, to display/hide columns: flexgrid way of doing this is more immediate and less intrusive.
    regards
    salvatore

    Reply

  29. Salvatore,
    You are right on all those points… but grids are used for forms often. If we deliver to our customers on grid for data entry and another for display it presents to our customers that we are not ‘masters’. They by nature expect everything! lol We need this grid or something like it with ease of coding and data entry in one package.

    Reply

  30. John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
    jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
    regards

    Reply

  31. John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
    jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
    regards

    Reply

  32. Thanks for this great-looking alternative to the very disappointing . Your README mentions binding the grind to CFC (I imagine like ), but I don’t see how that works. The notes say you need version 1, but the release is only 0.7. Is binding to a CFC coming? Is there a way to get version 1?

    Reply

  33. Toddzilla – You should be able to bind to a CFC by passing the path into the bind attribute like this…

    bind=”cfc:test.cfc?method=getgrid&x=1″

    You’ll just need to make sure your CFC method has access=”remote” on it.

    If I misunderstood the request, please let me know by submitting the full issue at the riaforge site… http://cfjqajax.riaforge.org

    Reply

  34. Mike,

    Your CF_grid is great. I love the look and function. But, I do have a problem as it won’t
    load my data into the grid. I’m going to post the code to our CFUGCNY to see if anyone can spot my problem.

    Jim

    Reply

  35. Jim – I responded on the CFUG list, but for the benefit of those reading here…

    In order to use the tag to return data, you need t output the data from your ajax call using the included cf_gridconvert tag. It will not work with the queryconvertforgrid tag that is included in ColdFusion 8. That function is only applied to the built-in CFGRID, and will not work for Flexigrid.

    Reply

  36. Mike,

    I got it the data to display, but the column sort, Num Rows and search functions don’t work. I bind this way, not throught a somepage.cfm, as in your example.

    bind=”cfc:portal.cfc?method=GetShipments&thisDSN=#myDSN#&thisAcct=#myAcct#&numrows=#myNumRows#&sortcolumn=#form.sortcolumn#&sortdir=#mySrt#”

    Also I need to date and dollar format and link from the grid data. Would that follow jquery syntax?

    Reply

  37. Jim – I would recommend that you start from the example I provided rather than trying to use it a different way. Have your CFM file use the CFC rather than trying to call the CFC directly with access=”remote”. I think arguments are getting lost when flexigrid tries to pass information back to the CFC, but I can’t tell without seeing all the code.

    Reply

  38. I am using the cf grid and I get a javascript error when I search for Gary saying ID is undefined. I only get this error in IE 7 works fine in FF

    Reply

  39. This is the first time I am using cfgrid for displaying and updating data. I am having problem with :
    1) Formatting date in cfgrid. Currently, it gives me “March 15, 2005 00:00:00”. I only want the date to be “March 15, 2005”.

    2) The metastatic_loc supposes to display a list of location from a lookup table. Currently, it displays the id from that lookup table. How do I fix this problem so that it will have a field list(brain, lung, CNS, liver,…) to allow user to select one from the list ?

    3) How do I code to display the result grid after data is updated ?

    4) How do I code to insert new row to the existing cfgrid ?
    Thank you for helping me.


















    SELECT Pt_demographic.MRN, P1_speakers_tumor_type_lu.tumor_type,
    Diagnosis.date_of_dx, Metastatic_info.Metastatic_info_id,
    Metastatic_info.Metastatic_date,
    P1_speakers_metastatic_loc_lu.metastatic_loc_id

    FROM (((Pt_demographic
    INNER JOIN Diagnosis
    ON Pt_demographic.pt_id = Diagnosis.pt_id)
    INNER JOIN P1_SPEAKERS_TUMOR_TYPE_LU
    ON Diagnosis.tumor_type_id = P1_SPEAKERS_TUMOR_TYPE_LU.TUMOR_TYPE_ID)
    INNER JOIN Metastatic_info
    ON Diagnosis.dx_id = Metastatic_info.dx_id)
    INNER JOIN P1_speakers_metastatic_loc_lu
    ON Metastatic_info.Metastatic_loc_id = P1_speakers_metastatic_loc_lu.Metastatic_loc_id


    WHERE Pt_demographic.MRN = ‘#arguments.MRN#’
    AND Metastatic_info_id is NOT NULL








    UPDATE Metastatic_info SET
    #colname# = ‘#value#‘
    WHERE metastatic_info_id = #gridrow.metastatic_info_id#


    DELETE FROM metastatic_info
    WHERE metastatic_info_id = #gridrow.Metastatic_info_id#

    Reply

  40. Jean,

    While I am willing to provide support for these tags when there are bugs/problems, I cannot play the role of teaching you how to program jQuery or how to extend the functionality of the grids. If you have suggestions for future functionality, I will consider those. You should submit them on the RIAforge project page at: http://cfjqajax.riaforge.org/

    Some guidance for your questions…

    1. Date formatting – This can be done through jQuery. You might want to check out the Flexigrid project for more detail.

    2. This grid will display whatever comes back in your SQL query. If you want the text to display, you will need to adjust your SQL query to pull in the text instead of the ID.

    3 and 4. See the documentation at http://www.webplicity.net/flexigrid/ There is a refresh function there, but I don’t know if there is a way to insert a row without a page refresh.

    Reply

  41. I’m having the same issue Spiraldev reported except with IE6. Certain search criteria (for example ‘zz’ entered as the criteria for a Last Name search) gives a javascript error.

    Line:22
    Char:25
    Error:’id’ is null or not an object
    Code:0
    URL:http://www.webtrenches.com/cfjq/

    Reply

  42. @spiraldev and talarojm – The JavaScript error in IE should be resolved by changing line 25 of gridconvert.cfm to the following:

    {id:’#arguments.thequery.id#’,cell:[‘#jsStringformat(arguments.thequery[curcol][currentrow])#’,]},

    It is due to an extra comma at the end of the JSON data.

    Reply

  43. For the CFWindow demo… how can I get the modal window to refresh after I submit the form? If you submit your demo form, close the window, and open it again, you still see the dump. I’d like to be able to use it repeatedly without refreshing the main page. Thanks!

    Reply

  44. One simple solution for this would be to have the link that opens your window run a function that re-loads the form before showing it.

    For example…

    openWindow = function() {
    $(‘#window_content’).load(‘path/to/form.html’);
    $(‘#window’).jqmShow();
    };

    Reply

  46. I have a page with an embedded PDF using Adobe reader. I have a problem where the cfwindow displays behind the embedded PDF when it gets created. Is there a setting tweak I can make to ensure the the modal window appears on top of the PDF plugin? Thanks!

    Reply

  47. @Rex – I’ve seen this problem before – actually happens with cfwindow and cf_window. I think it is a browser/plugin bug. The only workaround I have heard of is putting your window content in an iframe. The iframe somehow overlays the plug-in. It’s not a perfect solution, but it is the only way I know of to get around it.

    Reply

  49. Hi,
    I have implemented jQuery plugin, jqModal. I am facing a common issue in IE6 only. Whenever the overlay is rendered it is hiding the select [dropdowns] beneth it. I am using jQuery-1.2.6 and jqModal r13.
    It will be of great help if you can provide quick turnaround or the alternate solution.

    Reply

  50. I’m getting the following error, so, no data is being populated, what’s wrong? thanks
    sitems.0.name is null or not an object

    Reply

  51. the following workaround did hot help.

    changing line 25 of gridconvert.cfm to the following:

    {id:’#arguments.thequery.id#’,cell:[‘#jsStringformat(arguments.thequery[curcol][currentrow])#’,]},

    Reply

  53. Has anyone got the error “G is undefined” when using this. I can see my json being being sent back in firebug but I get this error before anything has a change to render in the grid.

    Reply

  55. Michael thanks for the awesome grid. I had a quick question, is there any easy way to refresh the grid when I close the modal window? my modal window is used to update the record so when I close it I would like to see those changes on the grid.

    Reply

  56. @udip – It is possible to refresh the grid when the window is closed. There is an onHide attribute to the window tag. Write a function to refresh the grid, and then call that function in the onhide attribute.

    This is the code that will refresh the grid…

    $(“#flexigridid”).flexReload({ url: ‘/url/for/refresh’ } ;

    Reply

  57. Is there an attribute that like autoWidth=”true” that will make the columns autosize to the width of the grid? Thanks! I really like the grid!

    Reply

  59. Great Tags and great Work!! I have this demo working with a dbase called via a CFC and it populates and the grid functions as demo’d.

    My only problem is weird in that I have 5 items that can be searched. No matter what I do I only the first 3 items show up correct as they are labeled in the grid_column “header”. However, the others all show up as their “name” in the Search drop box.

    This is what I used:




    Returns:
    The ID
    Name
    Species
    idspt_anl
    isgdr_anl

    Any thoughts – thank you Jeffrey

    Reply

  60. I keepgeeing “Error:Window name not found,” despite following the instructions to the letter. Can someone help?I’m trying to build modal windows for a Cf6 application.

    Reply

  62. I cannot seem to get this working on Railo Barry (3.1.2.001 – stable production release). Guess I’ll have to wait for the CFAJAX goodness Railo promises in the next stable release (3.2, based on jQuery).

    Reply

  65. my jquerry table isnt showing.What could be the problem?.Please help.Heres my code

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






    grid



    Reply

  67. Like the cf_window functionality. One issue, does it support more than one window on a page at a time?

    I tested with two and, whilst it initially seems to work, the width/height of one window overwrites the other.

    Reply

  68. I’m trying to apply this grid to a project but I keep getting this error:
    Element THEQUERY.ID is undefined in ARGUMENTS.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *