Casual Rumblings - Javascript

Why does IE suck so #$(*# much!? Great error message!

Wed, 03 Mar 2010 12:28:00 -0700

Now if only I can find line #131,265,925 I'd be able to fix it.

I don't have 131k lines of code on this page! How do you diagnose this? None of the available tools out there work well for IE.

Gawd...IE is going to drive me to give up web programming and become a used car salesman.

::: hair pulling :::

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

SVN/CVS: Any good Commit Comment templates?

Fri, 08 May 2009 11:11:00 -0700

We're implementing SVN in our office and well, things are well under way.

However, people are going to start committing their changes in various ways. So reading commits from multiple developers (might) prove to be confusing.

I was playing around with SVN for eclipse and it's got a great feature called, "Commit Templates".

Being new, I created 2 templates for myself and was thinking about making Commit Templates a standard among the developers.

Here's what I made up so far:

=BUG FIX=

Bug Description:

Fix:

Project:

=NEW FEATURE=

Description:

Project:

Again, these are just for me. I was wondering if anyone else has any other templates that you use and like?

Thanks!

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 dialog + load external content

Thu, 19 Mar 2009 11:33:00 -0700

I was intrigued by Ray Camden's blog about simple dialog popups with jQuery. I saw some of his examples and wanted to take them a step further.

http://www.coldfusionjedi.com/index.cfm/2009/2/1/Creating-a-Dialog-with-jQuery-UI

His example shows that the content is inline with the document and the jQuery code just extracts it from the page and shows it in a dialog box. Cool, yeah, but...what if you wanted to pull in external content?

This is what I came up with:


$(document).ready(function(){
	//define config object
   var dialogOpts = {
		title: "My First AJAX dialog",
		modal: true,
		autoOpen: false,
		height: 500,
		width: 500,
		open: function() {
		//display correct dialog content
		$("#example").load("beta/loremipsum.html");}
		};
    $("#example").dialog(dialogOpts);	//end dialog
	
	$('#showdialog').click(
		function (){
			$("#example").dialog("open");
			return false;
		}
	);

});

The "example" div is within the page. It's blank. But, get's populated by the open option within the dialog options. That's how I got around it.

Can anyone tell me if this is the "best practices" way of doing this? Is there a better more efficient way?

Dialog 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]

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>