Debug Javascript Over Running Website

Debugging javascript over running website should not be a problem, as long as you're equipped with Firebug plug-in for Firefox.
Just find the relevant script peace of code and insert new breakpoint.

What if you don't have Firebug installed, or you need to debug the script specifically over Internet Explorer for some reason (e.g. no javascript error on FF, only with IE)?

Nice trick is to use the "Web Development Helper" IE plug-in to achieve this.
Just open its Script Console window and write:

debugger;
problematicFunction(args);

Press the "execute".

This how we're able to insert "debugger" into the javascript without editing the original code.
The "debugger" will stop the script just before executing the bugged function so you will be able to step into and exam the objects/values to find the error cause.

Hope this helps,
Tamir Shlomi

Internet Explorer Web Development Helper

Every web developer using Firefox might have Firebug plug-in installed.

For the ones who uses Internet Explorer during the development there is similar tool that you probably already know, the "IE Developer Toolbar".

It's very nice one but it is lacking a bit compared to Firebug.

This post will talk about the "Web Development Helper" which is a complementary tool for IE web developers, developed by Nikhil Kothari.

This tool introduce few helpful features, here is some of them:

• Script Console: to execute your javascript code straight from the browser console.
  Additionally you can also load exist script file or save script to a file.
• HTTP Logging: log HTTP request sent from the browser and view the request and response details (much lighter, not over detailed like Fiddler).
  Include JSON viewer, very useful feature especially with AJAX calls.
• Script Class Browser: allows you to explore the javascript classes sent to the client side similarly as the .NET Reflector. you can watch the classes declaration and method overloads etc, just like the image below:
  

There are some more features like the DOM inspector, page information viewer and so on,
so if you don't have this installed already, it is very recommended to have it.
For further reading and download, click here.

Enjoy!
Tamir Shlomi

Delete space between table rows

There is a bug with IE (6/7) that when you try to draw a table to splice few images together there is some space between rows, that doesn’t clear even when you set the table cellpadding, cellspacing or even the border with “0” value.

Something like this:

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>
       <img src="first.gif">
    </td>
  </tr>
  <tr>
    <td>
       <img src="second.gif">
    </td>
  </tr>
</table>

It’s nothing with your WYSIWYG editor, it’s only the Internet Explorer.
(Well, other browsers might be bugged too, but not FF/Chrome)

What you can do to remove that space?

Two solutions:
The first and quick one is to shrink your HTML with no space (even not a row breaking) inside the TD elements.
Like this:

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><img src="first.gif"></td>
  </tr>
  <tr>
    <td><img src="second.gif"></td>
  </tr>
</table>

Second option is setting vertical-align to your images using CSS.
Setting the upper image to the bottom and the bottom image to the top will fix that too.
Find more detailed explanation about this option here at Shlomo's blog [Hebrew].

Page_Load Event Fires Twice

I had a very annoying bug today.
One of the pages at my web application raises its Page_Load event twice for some reason.
At the first time, Page.IsPostBack = true, and false at the second time.

One of the interesting things was that this wrong behavior described above was occurring only when browsing using Internet Explorer. Firefox wasn’t post back again (well, except if you right clicked the image and choose “View Image”, then it was posting back one more time, but not twice at a time).
Go figure.

I tried to debug my code, maybe I was executing some code that cause the page to load again, maybe something from the client-side was doing post back to the server, nothing.

Start googling.

I did found a few reasons about what can cause the page load event to fire twice:
things like setting the Page’s “AutoEventWireup” property as “true” (while explicit wiring the page event in code), redirecting back to the page itself, or maybe one of the auto post back controls fire the wasted post back and none of those cases was not my problem.

When googling, I noticed someone talk about img element (or another element’s background-image url) that when its src attribute ignored, set to nothing (“”) or just “#” it can make the page load event to fire twice, but I was very skeptic about it, so I try to check options that seems more relevant to me.

After trying all the options, I searched my app where I set “” to src of an image, and I did found one image that cause this double post back.
This image src should be set on the client side so i didn’t set it on the markup, so as a solution for this issue, I set the initial image src using 1x1 px transparent image.
Page_Load raise only once each.

The explanation for this odd behavior is very simple:
When you create an img element and leave its src attribute empty, it will automatically set as your root directory (e.g. “http://www.mysite.com/”).
Therefore, when the Page_Load event fire for the first time, with the original post back (POST request) the Page.IsPostBack will be set with “true”. But when the server response will be parsed at the client side, another GET request will be fired to the server, requesting that image (that its src was set to the root url by default) and this is why the Page.IsPostBack property will be initialized with “false” value  for the second time.
So, notice that all of your page images will have their src filled :-)

Telerik RadComboBox Cause An Error Saying: “Stop running this script?”

In our current project we are using the RadControls toolkit for ASP.NET AJAX from Telerik at the presentation layer.

One of the controls we were used the most was the RadComboBox for its wide client side API, enables you to make changes at the client side without bothering the server with tasks like filling new list of items, remove some etc.

I had few cascading combo boxes and I was using AJAX web-service to add items to the one depends on the other selected value on the client-side.
Everything was fine until one big response sent back from the WS with new list of items and IE prompted the following script error message:

"Stop running this script?
A script on page is causing Internet Explorer to run slowly..."

Well, I checked the response from the WS and it wasn't that big, but still, the script was already exceed its time-out period and cause an error message to alert.

The Telerik formal way for adding new RadComboBoxItems at the client side is like this:

function AddNewItem()
{   
   var combo = $find("<%= RadComboBox1.ClientID %>");
   var comboItem = new Telerik.Web.UI.RadComboBoxItem();
   comboItem.set_text("New Item");
   combo.trackChanges();
   combo.get_items().add(comboItem);
   comboItem.select();
   combo.commitChanges();
} 

notice the “trackChanges” and the “commitChanges” methods, which's responsible to transparent the client changes at the server side.

Those two calls to track and commit are the bottleneck preventing the script from running free as long as they tracking changes for many items.

If you remove them, you can find how fast this script running, but the direct result will be losing all those items on the server side.

To enjoy the speed when there is no tracking and get the finally user’s selected item, I used a nice trick ;)

I used the same way for adding new items, without the track/commit changes methods, and set new client event handler at the form submit button with the following functionality:

function onSubmitForm () {
   var combo = $find("<%= RadComboBox1.ClientID %>");
   // clearing the combo items so the following combo item insert will take effect.
   // notice: combo items will be reset after post back, except this saved one.
   combo.clearItems();
   // create new ComboItem for the user's selected item
   var selectedItem = new Telerik.Web.UI.RadComboBoxItem();
   selectedItem.set_text(combo.get_text());
   selectedItem.set_value(combo.get_value());
   // add the item to the combo under "Tracking changes" mode
   combo.trackChanges();
   combo.get_items().add(selectedItem);
   combo.commitChanges();
}