Casual Rumblings - Ajax

HELP: CFC+jquery+JSON

Thu, 25 Mar 2010 13:48:00 -0700

Ok, I've been at this for a couple of hours now. I thought I was on the right track, but it looks like I'm still a bit lost :(

I have a modal login form using jquery and colorbox plugin.

Here is a snippet of my jquery ajax call: $j.ajax({ url: 'cfc/security.cfc?method=login', data: datastring, dataType: 'json', success: function(data) { var response = eval(data); console.log(response.MESSAGE); $j('.ajaxMsg').css({"display":"block"}).html(data); $j.fn.colorbox.resize(); } });
When calling this CFC from a URL using the correct parameters, I get this: {"MESSAGE":"Verified! Logging in...","FNAME":"John","LNAME":"Smith","VALID":true} This is exactly what I want.

However, when running the ajax call above I get:

{"MESSAGE":"Verified! Logging in....","FNAME":"John","LNAME":"Smith","VALID":true}

And this is screwing me up.

Here is my CFC snippet: .... sql statements ... if valid if invalid

Ok...what am I doing wrong? :(

jquery ajax + xml + IE = hair loss

Mon, 26 Oct 2009 12:01:00 -0700

I've done ajax before with jQuery with good results on all browsers...until

I used an XML return with IE (all IE's that is).

When returning XML from a CFC (or any other server-side script), IE doesn't treat the XML document as, well, XML.

It actually barfs on it unless you tell it to load up the ActiveX control to parse your XML doc. (psst..Thanks Microsoft).

Just look at this:


$.ajax({
type: "POST",
url: "ajaxtest.cfc?method=getallblogs",
data: datastring,
success: function(data) {
var xml;
if ( $.browser.msie ) {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find('blog').each(function(){
var id = $(this).attr('id');
var title = $(this).find('name').text();
var url = $(this).find('url').text();
$('
').html(''+title+'').appendTo('#blogInfo');
});
}
});

See that little blurb in the ajax call for "if ($.browser.msie)"? That's the call you'll need to do to make IE behave like 99% of the other browsers out there.

I've put together a short demo. I know the code is duplicated, but this is for demo purposes. Hope this helps you guys doing XML data returns.

Oh and once again "Thank you Microsoft" for making my web development career such a wild adventure.

XML data return demo

p.s. the data returned is from my blackberry bloggers site. If you're a blackberry fan, check it out (http://www.blackberrybloggers.org). It might look a bit familiar :)

jQuery + ajax + logout form

Tue, 24 Mar 2009 13:17:00 -0700

I love jquery! Let me just say that now. I'm a true convert from prototype/scriptaculous. I love prototype for all it's pros. But, I can't deny the support from the jQuery community and the momentum it has in the web world.

With that said, I dove in and started playing around with the jQuery UI plugin (built by the jQuery guys of course). The dialog plug in is simply DOPE!! (is that a youngin' term?)

I was playing around with a logout confirmation dialog and here's what I've come up with. It's a bit verbose for my taste and by NO means the best way to do this. But, I do hope it points people in the right direction if they're looking to do something like this.


$('#logout').click(
		function(e){
		e.preventDefault();
		
        $('Are you sure you want to log out?').dialog(
			{
			modal: true,
			height: 100, 
			width:350,
			show:"blind",
			hide: "blind",
			buttons:{
				"Yes":function() {
					$.ajax({ 
						url: 'someActionCall.cfm', 
						complete: function() {
							$('#confirmLogout').html("See you next time!");
							$('.ui-dialog-buttonpane').css('display','none');
							var dlg = $("#confirmLogout").parents(".ui-dialog:first");
							dlg.animate({ width: 200},50);
							setTimeout(function(){$("#confirmLogout").dialog("close")},3000);
							setTimeout(function(){location.reload();},1500);	
							} 
						});
					},
				"No":function() {
					$("#confirmLogout").dialog("close");
					}
			},
			close:function(){
				 $("#confirmLogout").remove();
			}
			});

        return false; 
	});

The demo can be found here: Logout demo

jQuery ajax with coldfusion

Wed, 18 Mar 2009 04:42:00 -0700

Ray Camden blogged about this recently and I thought I'd take time out to do some of this jQuery/Ajaxy stuff myself.

I was in the midst of trying to figure out how to to a simple login authentication process with CF8 and jQuery.
I've done this in the past with Prototype and this wonderful ajax library JSMX. Simple library to use..just love it! But, with the times, I figured I should try this "jQuery" thing. Seems to be alot of momentum behind it and there's been a lot of raves. So I dove in. [More]

Web 2.0 Expo 44% discount code

Fri, 16 Jan 2009 14:19:00 -0700

If you're planning on attending Web 2.0 Expo coming up, you are going to want to use this discount code.

Registration Promo code: obama22 = 44% discount.

It works! I just did a faux registration with it and the full conference pass @ $1,395 was chopped to $781.20.

Not sure how long it will work (meaning time or # of uses), but get on it fast if you want to save some big bucks :)

Yahoo! Mail Beta -- frustratingly.....

Sun, 09 Dec 2007 17:51:24 -0700

sloooooooow....

Is Yahoo's mail beta slow due to the fact that it's trying too much to be like a desktop app or is it a ding on the weight/performance issues with ExtJS or both?

I just know that it's nice eyecandy and it functions well when it's fully loaded...but you have to wait and wait (even on a full T1 pipe at my office).

I'm going back to the original quick version. I don't need that kinda eye candy. I'll leave that up to Outlook.

Autocomplete + InPlaceEditor + Proto/Scriptaculous...finally!!

Sun, 25 Nov 2007 15:21:00 -0700

I blogged a while back about trying to mash up Spry/Prototype/Scriptaculous to do an inplace-edit and an autocomplete. Unfortunately, I lost a bit of momentum using Spry for this purpose because we're not using Spry in the office.

I picked up the ball to use just Prototype/Scriptaculous for our needs. What I found out was that there was a bit of a disconnect with Scriptaculous' Ajax.Autocompleter and Ajax.InPlaceEditor (to complete what I needed done).

What I needed: The ability to Add a Tag to a profile with InPlaceEditor but, I didn't want to have multiple versions of the same tag. (Ex. Dog, Dogs, Doggie) I needed to give the person who's inputting a new tag the ability to see tags that are similar to what he/she is currently typing.

Scriptaculous' Ajax.InPlaceEditor builds a form with an input or a textarea on the fly when you click on a link. Awesome! The only issue is that the or </code> code doesn't include an ID for the html element created. The disconnect is that Autocomplete needs to target an INPUT's ID name. </p> <p> With this knowledge, I had to make a change to Scriptaculous' library: contols.js. I am using the latest 1.8.0 version, so here is where I made my change at around line 551: <code> createEditField: function() { ... fld.id = this.options.formId + '_input'; ... } </code> After making this change, viewing the generated javascript (god I love the web developer add-on for Firefox), I can see my form's dynamically generated input field, now has an ID. YAY!!! </p> <p> Now I can continue with the Ajax.Autocompleter to target the INPUT field. But wait...There's a hangup :( </p> <p> The generated form and the autocomplete execute almost simultaneously and there's an error. My Ajax.Autocompleter is complaining that the INPUT field that I am targetting doesn't exist? Huh? Doesn't exist? OH YEAH!! Need to do this in sequence :) My fix was to put a short setTimeOut function to execute the autocomplete library AFTER the INPUT field has been generated. </p> <p>PHEW!! What a pain that was. But, hey, I learned alot with this little exercise. I'm almost certain that someone out there has done this before and probably did it better than me. If so, please point me in that direction :) Here's the demo: <a href="http://www.christopherchin.com/sandbox/autocompleteinplacedit.html" target="newWindow">Ajax.Autocompleter + Ajax.InPlaceEditor</a><br> (Try: Chris or phil or Boot or Hal) </article> <article> <h1>Spry + Autocomplete + InPlaceEditing...anyone?</h1> <p>Tue, 13 Nov 2007 20:30:00 -0700</p> <p>I have been trying to use Spry's autocomplete with <a href="http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor" target="newWindow">Prototype Ajax.InPlaceEdit</a> function but can't seem to see how to integrate the 2. </p> <p> I have successfully added Prototypes Ajax.InplaceEdit with <a href="http://www.codeproject.com/jscript/jsactb.asp" target="newWindow2">ACTB javascript</a> (see if I can get a link up later to this sample). </p> <p>If anyone has done this or knows how to combine InPlaceEditing with Autocompleting (spry and prototype), please reply :)</p> <p>I'm surprised at 2 things. 1) Spry hasn't added InPlaceEditing (along with drag/drop) 2)Combining the 2 to begin with and having a demo up somewhere. I'm sure I'm not the only one who needs this combo.</p> <p>In the meantime, I'll be plugging away at this and see if I can frankenstein the 2.</p> </article> </main></body></html>