Ask a Jedi: Two jQuery and ColdFusion questions

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.)

Comments (11) Jun 4, 2008 9:07 AM Views: 1677

Comments

[Add Comment]
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.
# Posted By Ken Dunnington | 6/4/08 9:41 AM
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.
# Posted By Brian Swartzfager | 6/4/08 9:47 AM
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/06/02/jquery-ui-15-rel...
# Posted By Randy Merrill | 6/4/08 10:08 AM
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.
# Posted By Syed | 6/4/08 11:31 AM
@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. ;)
# Posted By Rey Bango | 6/5/08 11:06 AM
@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.
# Posted By Raymond Camden | 6/5/08 11:10 AM
@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. :)
# Posted By Rey Bango | 6/5/08 11:55 AM
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.
# Posted By Raymond Camden | 6/5/08 11:58 AM
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.
# Posted By Sin | 10/5/08 11:37 AM
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/payroll.cfm, than Ajax requests won't be able to as well.
# Posted By Raymond Camden | 10/5/08 2:55 PM
thanks Ray. might need to do some invalid-http-referer using Application on top of /modules.
# Posted By Sin | 10/6/08 2:21 AM
[Add Comment]