Note to self: Connecting ASP.Net to SQL

Note to self:
When connecting your back-end code for ASP.Net to a SQL Server instance, always remember to include the SQL instance name in the connection string.

HOSTNAME\SQLEXPRESS (or another instance name)

Postback Freezes Animated Gifs

Hello again all,

<rant>

In all my experiences in my life as a geek, I have found few things more frustrating than developing something for any version of Internet Explorer (please hold your shouts of agreement for the end). Internet Explorer 5 never really existed (did the internet exist then even?), Internet Explorer 6 was a complete atrocity, Internet Explorer 7 I am pretty sure caused the suicide rate amongst us geeks to go up significantly, and Internet Explorer 8, while better than its predecessors, only caused a few geeks to become severely dependent on mind-altering drugs to help them cope with the frustrations of life (or maybe just web development for IE).

</rant>

You may now cheer...

Now, down to business. On the topic of Internet Explorer doing things differently from the rest of the world simply for the sake of it (hey look, they're taking after Apple), I have recently experienced a very frustrating problem with animated gifs. Referring to my previous post about the file uploader, the client I was developing that for wanted an animation icon for the upload so their customers didn't think the page had frozen. Sounds like a simple task, no?

The problem can be described as this: When a postback event occurs (ie: clicking a link or submit button), Internet Explorer freezes all animated gifs on the page.

To explain how I fixed this, I essentially placed an animated 'rotating circle' on the page which was hidden until the onSubmit() function was called. Here's the code for the image while it was hidden.

<img src="./images/loading.gif" id="loader" style="visibility:hidden;" />

Annnd here's the code for the animation problem fix as well as the code that changes the image visibility.

function showLoader()
{
 //*** Reload the image for IE ***
 document.getElementById('loader').src='./images/loader.gif';
 //*** Let's make the image visible ***
 document.getElementById('loader').style.visibility = 'visible';

}

Note that this is not needed for any browsers other than Internet Explorer (any that I know of at least). Firefox, Google Chrome, and Safari all ran the animated gif image during postback without freezing it.

To explain how the fix works, when a postback occurs in Internet Explorer, it stops all animations on the page, as mentioned. The trick to fixing this is to reload the animated gifs when the postback occurs. In the example this occurs in the first line of the JavaScript function, (document.getElementById('loader').src='./images/loader.gif');. Right there we just re-set the source for the object to the source for the same object on postback.

That's how it works. Any thoughts? Criticism? Motions to boycott Internet Explorer 7?

Javascript : Controlling onclick Event Completion

I recently ran into a small issue with a file uploader form I was coding. What I wanted to do was basically to stop the JavaScript onclick event from completing should a certain required action not be completed.

To paint out my scenario for you, I have coded an image uploader web application that I want to require the user to input a description of the image before they are allowed to select the image for upload. That being said, there are two different simple ways to do this. The first, disable the "Browse" button until the user has entered a description. The second, if the description is not entered, notify the user onclick of the "Browse" button. For my situation, the latter was what I went for (I'll write another post on the first option if anyone is interested in it...let me know in the comments section).

Let's get some initial front-end code here...

   <!-- Text box that can't be empty -->
<input type="text" id="text" />Some Text
<br />
<!-- The file box to be validated -->
<input type="file" id="filebox" onclick="return validateText('text')"/>
<br />

Here's the simple "back-end" JavaScript function...

    <script>
function validateText( ObjectName )
{
 // If there is nothing in the textbox...
 if (document.getElementById(ObjectName).value == '')
 {
   alert('Please enter a value for Some Text before trying to select a file.')
   return false;
 }
 // If textbox contains text...
 else
 {
   alert('The text in Some Text is \"' + document.getElementById(ObjectName).value + '\". You may now select a file.');
   return true;
 }
}
</script>

Hopefully the HTML code is relatively self explanatory.

Note that the file input has it's onclick attribute set to call the validateText function (passing in the id of the "Some Text" textbox as the parameter).

The javascript code is where the fun happens. There I created a function with the name validateText, requiring one parameter. The basic breakdown of the order of operations for that function is

1. Event triggered
2. Function called
3. Document element is retrieved by the parameter passed in (in the sample code this would be 'text')
4. Value is checked

• if value is equal to ' ' (empty)
• -> Alert the user saying the value is empty
• -> Cancel onclick operation by not showing the file browser window)
• else (value is not empty)
• -> Alert the user saying what the value is set to
• -> Continue onclick event by showing file browser window

What the previously shown code does is it "interrupts" the onclick event to perform a check of the value of the specified textbox. In this case, if the textbox is empty, the onclick event stops before the file explorer dialog displays.

What makes this work is in the return values. When the method is called in the html, return is specified before the function call

<input type="file" id="filebox" onclick="return validateText('text')"/>

Typically in JavaScript, a return is not specified with function calls unless you want to be able to control the event (typically for code stability such as catching exceptions and stopping the code before it does harm) during the event.

Short and succinct, if your function returns true, the event (onclick, onsubmit, onchange, etc.) will continue as originally designed. If your function returns false, the event will be stopped before completion.

That being said, don't forget to add the return actions to your function as well, otherwise it won't work.

That about sums it up for this post. I unfortunately have no funny remarks to make other than a few buzzwords to let loose...

This seamless deployment of this bit of code is mission critical. Also, don't forget our meeting later so we can touch base to discuss a synergistic team-oriented coding approach to our new workflow paradigms.

Anyone have five in a row yet?

Timex

Let's get started... again

Hi everyone,

For those of you who don't know me, I'm the author of the Musings of a Server Admin blog where I discussed many various areas relating to server security, troubleshooting, and the building and configuration of servers for Microsoft SharePoint, MSSQL, Microsoft Hyper-V, Windows Server 2008, Team Foundation Server 2010 and 2008, and various other server technologies out there.

Judging from the title of this blog you have no doubt guessed that the aforementioned Microsoft ship has sailed and we're now boarding another exciting one for more adventures into the vast world of technology. It almost makes it sound like it'll be fun. Have no worries though, I will try to do my best to make these posts as painless but helpful as possible via the use of clever buzzwords (get out your buzzword bingo cards), an xkcd.com comic here and there, and vivid imagery and screenshots to depict the dull and grey world of programming...alright, it's not THAT boring, or is that just me?

Here's to the hopefully painless, informational, and entertaining journey ahead.

Additionally, here's to Ric who aptly dubbed me Timex.

Cheers

Aaron Ball (Timex)