Ask a Jedi: Two jQuery and ColdFusion questions

This post is more than 2 years old.

Syed sent some interesting questions regarding jQuery and ColdFusion. I will attempt to answer them, but I will remind people that I've only begun to play with jQuery. I'm far from being an expert. Anyway, his questions:

Hi Reymond, I've been trying to make cfform work with jquery, i think you were able to with the code below:
$.post("sendcontact.cfm",{dname:$("#dname").val(),demail:$("#demail").val(),comm ents:$("#comments").val()},formDone);

For some reason, i cant get it to work. I actually have the cfform under jquery Tabs, which should submit the form without loading, like it was doing under cf ajax feature.

So this isn't much of an answer, but I'd be willing to bet the JavaScript that cfform is spitting out is conflicting with jQuery. I would not mix the two. I'm not saying they can't be mixed, but I just wouldn't do it.

I'm trying to convert from cf ajax to jquery. The only problems i'm having is with the link within the tabs and forms.

How did you replace ajaxlink() in jquery?

Ah, now thats an interesting one. The ajaxLink() function in ColdFusion basically says, "Load URL X into the current container." So to do a basic "Load X into container Y" in jQuery, you can just do:

$("##content").load(someurl);

Nice and simple, but note that I had to specify a 'block' to load the content into. You could simply write a helper function. I haven't tested this, so forgive any typos:

function go(container,url) { $(container).load(url); }

<div id="content"> <a href="javascript:go('content','someurl.cfm')>Load it like you mean it</a> </div>

I'm sure a simpler solution exists. You could probably do it inline as well, but I find that a bit nicer to read myself. I'm not a big fan of making things shorter just to save typing. That's one of my complaints about jQuery. I like the power of it - but sometimes I almost wish it had a bit more code to it to make it readable. (Blasphemy, I know.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ken Dunnington posted on 6/4/2008 at 6:41 PM

I like to use events to hook up my UI, so instead of <a href="..."> I'd do <a click="doSomethingAwesome()"> and then add a 'return false' or event.preventDefault() to that function to stop the browser from going anywhere. Better yet, I will hook up as much as I can right in the $(document).ready() function so my markup doesn't have any ties to my JS code, but that can get tricky when you have lots of links and dynamic content and whatnot.

Comment 2 by Brian Swartzfager posted on 6/4/2008 at 6:47 PM

Another way you could approach the "load" example is to define a CSS class such that any hyperlink with that class will load its content into the parent container of the hyperlink.

$(document).ready(function () {

$("a[class=loadHere]").click(function() {
var thisLink= $(this);
//Load the page defined in the href attribute of the link into the parent container
thisLink.parent().load(thisLink.attr("href"));
//Cancel the normal click action
return false;
});

});

...

<div>
<a class="loadHere" href="someurl.cfm">Load it like you mean it</a>
</div>

This approach works as long as the hyperlink isn't enclosed in a different container from the one you want to populate with the results of the HTTP call: if you changed the above example and put the hyperlink inside of a <p></p> block, then the content would be loaded in that paragraph block instead.

Comment 3 by Randy Merrill posted on 6/4/2008 at 7:08 PM

You may also want to check out the jQuery UI. They have some tab functionality in there that may do a lot of what is necessary, including tabs.

http://ui.jquery.com/

They are currently in RC1 for the 1.5 release which is going to be awesome. Their website is somewhat halfway built right now, but they are supposed to release the 1.5 on the 8th.

You can read more about the release here:

http://jquery.com/blog/2008...

Comment 4 by Syed posted on 6/4/2008 at 8:31 PM

Ah, .load(someurl); is simple as it in coldfusion. I was looking into jquery myself, and it's really interesting how they have doen their framework with the ability to expand beyond their provided solutions.

Thank you Raymond!

Sorry for misspelling your name in the email.

Comment 5 by Rey Bango posted on 6/5/2008 at 8:06 PM

@Ray: Writing less code is a jQuery complaint of yours?? Ok Ray, you've lost your mind. Next thing you know you'll be switching to .Net or PHP because CFML is less verbose. ;)

Comment 6 by Raymond Camden posted on 6/5/2008 at 8:10 PM

@Rey: Heh, well, I think in all things you have to have a balance. We all like short, concise code. That doesn't mean we write our code all on one line. Or do stuff like res = a(b(c(d(e(f())))). Sometimes I find jQuery a bit like that - it's so wrapped its hard to follow.

Comment 7 by Rey Bango posted on 6/5/2008 at 8:55 PM

@Ray: The cool thing is that you don't need to write jQuery in one line. Chaining is done for convenience. It can also be used in a more verbose manner so you have a lot of flexibility. This is a very common misconception. Most people though, tend to use the chaining because it's EXTREMELY easy to apply methods to selected DOM elements in that manner. Also, you can do something like this to make it easier:

$( "#actionmsg" ).html("<span style='color:red;'>Question deleted and data updated!</span>")
.show()
.fadeIn('slow')
.animate({opacity: 1.0}, 3000)
.fadeOut('slow');

Notice how it's not all on 1 line and is very readable. You can also do this:

var myObj = $( "#actionmsg" );

myObj.html("<span style='color:red;'>Question deleted and data updated!</span>");
myObj.show();
myObj.fadeIn('slow');
myObj.animate({opacity: 1.0}, 3000);
myObj.fadeOut('slow');

Again, you have flexibility to write it in either way.

Hope this helps. :)

Comment 8 by Raymond Camden posted on 6/5/2008 at 8:58 PM

Yeah I know you can - it just seems like most examples don't use this format, and it bugs me.

So I'm being picky now - and I know it - but as a JS newbie I found this to be very unfriendly when I saw it.

Comment 9 by Sin posted on 10/5/2008 at 8:37 PM

hi does anyone know how to avoid expose 'secured' directory on ajaxlink?

example:
javascript:ColdFusion.navigate('/modules/payroll.cfm','pay');

where '/modules' is a secured directory.

tried cf mapping and move to 1 level above the wwwroot, but the bind attributes for cfdiv etc do not recognized maps.

Comment 10 by Raymond Camden posted on 10/5/2008 at 11:55 PM

An AJAX reqest is no different than a normal HTTP request. So if /modules is a folder protected by some security method, ColdFusion.navigate won't be able to bypass that security.

At the same time, if /modules is a CF mapping, and NOT a web server mapping, then again - because AJAX == HTTP, you won't be able to view it. Remember, if you can't open your browser and manually go to yoursite.com/modules/payrol..., than Ajax requests won't be able to as well.

Comment 11 by Sin posted on 10/6/2008 at 11:21 AM

thanks Ray. might need to do some invalid-http-referer using Application on top of /modules.

Comment 12 by Misty posted on 5/8/2012 at 12:38 AM

Hi ray, Have you ever tried this in cflayoutarea,

like write some code in cflayoutarea and it has paging and poging runs between the layout,

now add a jqery function to delete some data, and load the cflayout container again, it will break, any idea about it

Comment 13 by Raymond Camden posted on 5/8/2012 at 1:02 AM

Well, if you use function x format instead of x = function() format then it makes sense - and I think you yourself ran into that in another of my blog posts.

Comment 14 by misty posted on 5/8/2012 at 10:12 AM

it was easy, above you said, i was using it like this as said by you x=function(){}

i just passed the 'name' of the cflayoutarea and it worked

cheers