Debugging Javascript in Visual Studio

Last week our server crashed, and had us roaming the internet with no purpose for a couple of days. Maybe one day I will write about that a separate post. The outcome of this is that all Internet Explorer definitions were reset when i connected to the new server and domain.

Since then, i was unable to debug javascript in visual studio. It took me a while to verify that I'm trying to debug the correct script and that the calling procedure is working fine.

I made sure that IIS was configured to debug asp pages, as you can see in the following pictures.

Inside the IIS console open the web site properties.


On the "Virtual directory" tab click on "Configuration".

In the configuration dialog select the Debugging tab and check the two debugging flags.

The last thing to check was Internet Explorer Options. In order to debug Javascript inside Visual Studio one must uncheck the (default) options that disable javascript debugging both on Internet Explorer and on other browsers. this is the checkbox to uncheck:

Well, Now you can just break an any Javascript line, see all values inside the Visual Studio enviroment, and generally have fun while debugging your site :)

benny is freely debugging javascript...

IFrame strikes back

Well, the IFrame bug from last post still exist, and we still don't know what to do about it.
Some good news are that this bug now appears only seldom and we are less concerned about it. We created a random query string that we attached to this frame source url, to make sure that the browser really really really not caching the page. this way the browser thinks its a new page every time. This (at least we think so) lowered to frequency of appearance of the bug to reasonable levels. Yet, the mystery continues...

IFrame object loads wrong pages !?!?!

This is truly a bug from hell.

For the last two days the upload page on our site behaves very strange. If it was not so creepy i would say the page is sick :-)
this page includes an IFrame object that shows a second page inside, we will call them Outer page and Inner page.
What happends is this: when entering the outer page we sometimes see the inner page correctly. Other times we see the inner page broken, and the source shows that not all page was loaded. Other times we see even stranger things: the inner page is partially loaded and a totally different page is appended to it's end, creating a total mess on the page.

this bug appears only on our production server (dedicated, hosted) and not on our internal network. We tried to move the javascripts on the page around with no change. We tried putting a meta tag that prevents caching of the page - again nothing changed.

We are going to try a sniffer on the response and compare it with the browser source, maybe something goes wrong while rendering this page.

I have not fount any documentation of such a bug anywhere on the net. I still didn't get any answers from any newsgroup or from Experts Exchange (a great technical solution site). I'm getting a little worried...

If anyone ever encountered such a problem or has any suggestions i will be happy to hear it.
I will keep rolling this story as it happends.

Scratching my head :-)
Benny.

Flash object fails to call Javascript function

The most popular way to show video in web pages today is to play the video files inside flash players that are embedded inside the html page. Like everyone else we did it too and it works just fine.

A new feature that we added to our site is the ability to embed our flash player into any blog or site page, and for this purpose we also added a feature that sends information from the flash player to our server each time someone plays one of our videos somewhere out there. That way we can count how many views our videos get even outside the site.

When we added this view-counter feature we could not get it to work. The flash player did not reach the server page even though we wrote the calling code properly.

After looking at some professional blogs and sites we found out the problem: we use the name "5minPlayer" as our player tag name, and the Object tag that holds the flash player should not begin with a number...

There are other limitations to this object tag, and also many things you should know if you are going to use flash on your page, especially if you are implementing extensive interaction between flash and the html page. A great page on this issue can be found here.

Browser Compatability

As we all know (and don't like it...) different browsers display HTML pages differently. We always work hard to make the pages we write to look good and the same in all browsers, or at least in the more popular ones. Some browsers that we will not mention their name (but they are made by microsoft) show HTML differently even between version. some not-very-sophisticated code works in one version and not in the other, especially new code is not backward competible.

There are two ways to tackle this situation. One is to write "lower denominator code", HTML code that all browsers and versions treat the same, and avoiding code that the browsers show differently. This leaves us with a pretty basic subset of HTML, but it can be done for simpler pages.

The second way is to write browser-specific code. something in the area of "If IE then do this, else if Firefox do that". this should be done only in cases where there is no unified solution that include all browsers.

In order to apply the second solution on the server side i suggest using these components and methods:

Create an Enum for all different supported browsers and version, something like that:

public enum Browsers
{
IE6,
IE7,
Firefox2,
Safari1
}

Create a function that recieves the BrowserCapabilities object included inside every HTTP request, and returns the specific browser and version as one of the Enum members:

public Enums.Browsers GetBrowser(HttpBrowserCapabilities browserCap)
{
string strBrowser = browserCap.Browser;
int majorVer = browserCap.MajorVersion;
return (Enums.Browsers)Enum.Parse(typeof(Enums.Browsers), strBrowser + majorVer.ToString());
}

Use this function to easily create switch cases to handle places that need different treatment for each browser: (In this case i use a negative margin to eliminate a blank area created in the original of a relatively-positioned Div element that includes an overlay image. This bug happends only in IE version 6)

switch (utils.GetBrowser(Request.Browser))
{
case Enums.Browsers.IE6:
divPlayImage.Style.Add("margin-bottom", (0- imgPlay.Height - 3).ToString() + "px");
break;
}

Happy coding,

Benny.

Formatting durations

As the internet gets filled with media files more and more sites need to display the duration of the audio/video file next to the file name and description. We store a file's play duration as a number of seconds in the database. In order to display the duration in a x:xx format we need to format it, using this small function:


private string FormatDuration(short seconds)
{
string result = string.Empty;
int minutes = seconds / 60;
int secondsLeft = seconds % 60;
result = minutes.ToString() + ":" + secondsLeft.ToString("00");
return result;
}

Parsing tags input using Split function

User input validation is one of the more complex issues in developing a solid data-entry form. Input validation is the basis of application security, database integrity, application stability and more.

Today i encountered an input validation issue regarding the input that users enter as "tags", the popular new type of information used in many User Generated Content (UGC) sites.

When i used the function Split from the String class to parse the tags into an array of strings i found out that if the user entered multiple space characters (eg. "tag1 tag2 tag3") each space from the second one will result in an empty cell in the tags array. Splitting these sample tags will result in this array:
array[0]: "tag1"
array[1]: "tag2"
array[2]: ""
array[3]: ""
array[4]: ""
array[5]: "tag3"

In order to avoid entering blank tags in the database i wrote a simple function that prepares a clean array of tags from the raw tags string. Here it is:
(Besides removing empty cells this function also convert commas to blanks and lowers the case for all tags. This avoids multiple-word tags and case differences, as our project demands)


private string[] PrepareTags(string tags)
{
char[] delim = { ' ' };
//Replace comma with blank
tags = tags.Replace(",", " ");
//Split to array with blank delimiter
string[] tagsArray = tags.Split(delim);
ArrayList tagsList = new ArrayList();
//Eliminate empty cells
string[] preparedTags;
for (int i = 0; i < tagsArray.Length; i++)
{
if (tagsArray[i].Trim().Length > 0)
//Make all tags lowercase
tagsList.Add((string)tagsArray[i].ToLower());
}
preparedTags = new string[tagsList.Count];
tagsList.CopyTo(preparedTags);
return preparedTags;
}

If you find this function useful please comment and tell me.