Category Archives: Javascript

Internet Explorer renders incorrect HTML if UserAgent string is too long

I’ve encountered a strange problem: 2 identical client machines (WinXP/IE7) were connecting to a website (running on IIS6, ASP.NET 1.1 and employing some Infragistics controls – UltraWebGrid, WebTab, WebMenu). One machine showed a perfectly rendered page, while the other displayed page with missing images and styles and JavaScript functions behaved weirdly. Also, closer examination of HTML source of the page revealed that Infragistics controls rendered very different HTML between 2 machines. Mystery.

The only difference between 2 browsers I found was UserAgent string (For quick way to check your user agent go to http://whatsmyuseragent.com/). Continue reading →

View real HTML source of a page

All browsers support “View page source” feature. But what it displays is source of the page as it was originally rendered by the server. In today’s Web 2.0 world page content can change a thousand times after that. Client-side script, user input, AJAX calls can contribute to page update.

But one line of JavaScript code can show you a real up-to date page source. Type following in your browser address bar:

javascript:void prompt('HTML Source',document.documentElement.innerHTML)

Continue reading →

Javascript: Keeping popup window always on top

I was looking for a solution  (that does not involve proprietary modal dialogs) that would allow to open a popup window in JavaScript and keep it “always on top” of the opener, meaning – when user clicks outside of the popup – the popup retakes focus.
Commonly suggested solution:

<body onblur="this.focus()">

didn’t work for me since I have a form in that popup with input fields and the moment user clicks a field, popup itself loses focus, retakes it right away and user is unable to enter any data.
Fortunately I found an ingenious solution by Jim Allen that involves combination of timer-activated focus that in the same time is controlled by form’s input controls. That sounds complicated 🙂 but in fact is just a few lines of code. Check it out!

Infragistics UltraWebTab: Accessing Tab Separator in client-side JavaScript

I am using Infragistics UltraWebTab and needed to hide a tab and a tab separator located next to it using client-side JavaScript.  Hiding tab is pretty trivial. Assuming we gave it a key:

<igtab:Tab Key="MyTab" Text="My tab">

The code to hide the tab is:

var uwTabControl = igtab_getTabById('xuwMyTabControl');
var tab = uwTabControl.tabFromKey('MyTab');
tab.setVisible(false);

I tried to access separator in the same way but it didn’t work. You can assign it a key, but “fromKey” method works only server-side for separators. Using client-side Tabs array of UltraWebTab didn’t work either – it contains only actual tabs, not separators. But turned out you can access the separator using a little DOM and HTML
Continue reading →

Postback disabled/readonly Textbox that was modified in JavaScript

Let’s say in your ASP.NET application you set a TextBox control’s property ReadOnly to True (or Enabled to False) to prevent user from entering data directly. But you still want to update that text box’s value via client-side JavaScript. Which is happening, the value can be updated.  But during postback to the server – surprise, surprise! – the new value doesn’t persist. This is due to security precaution – if the value wasn’t meant to be changed – the change is not allowed. But there is a way around this.

Continue reading →

Resize IFRAME after content has been resized

There’re many articles out there describing how to resize IFRAME to fit its content height to avoid nasty scrollbars. They correctly suggest to catch “onload” event which fires when content has been loaded and set IFRAME’s height to content height. Here is code example (I am using Microsoft AJAX to attach handler for “onload” event, but you can use any method you like):

// oIframe object contains reference to the IFRAME element
// adding event handler that will run when iframe content is loaded
$addHandler(oIframe, "load", iframeContentLoaded);

//this event fires when IFRAME content is loaded
function iframeContentLoaded() {
   this.style.height = this.contentWindow.document.body.offsetHeight+'px'
}

This approach works if content stays static after loading from the server. But in many cases client-side JavaScript kicks to resize content or some user interaction changes content height. Since the page already loaded, simple “onload” doesn’t work.
Continue reading →

Running server-generated JavaScript from client Page Load event

Often there is a need to generate JavaScript instructions in server-side ASP.NET code and send them to the client for execution. But what if you need to run that server-generated JavaScript code within client Page Load event (here I am talking about ASP.NET AJAX pageLoad(sender, args) event, but it applies to generic body.onLoad event as well).
Continue reading →

Injecting client script into Infragistics async postback

Often there is a need to add client-side Javascript to the ASP.NET page from server-side code. To perform additional manipulation on rendered controls (hide or disable), to show user an alert message – just a couple of examples. Standard ASP.NET approach is to use page’s client script manager’s  RegisterStartupScript method:

Me.ClientScript.RegisterStartupScript (Type,  Key,  Script, AddScriptTags)

Where

type: The type of the startup script to register.
key: The key of the startup script to register.
script: The startup script literal to register.
addScriptTags: A Boolean value indicating whether to add script tags.

For example:

Me.ClientScript.RegisterStartupScript (Me.GetType(), "alert", "alert('Hello world!');", True)

But if you’re using Infragistics controls that offer async postbacks, like WARP panel or UltraWebTab – there is a problem with this approach.  Since the page doesn’t go through the full postback and doesn’t get destroyed and re-rendered from scratch – this method doesn’t work. Continue reading →

Infragistics WebDataMenu: Expanding context menu UP

Infragistics WebDataMenu is a light-weight highly responsive menu control with rich server and clinet side model. I was using it to display context menu on right mouse click.  The code is pretty simple:

function onMouseClick(oEvent) {
   if (oEvent.button == 2) { //right mouse button clicked
      var menu = $find("xwdmMyMenu");
      menu.showAt(null,null, oEvent);
   }
}

It checks whether the right mouse button was clicked (line 2) then locates the menu object and shows it using showAt method (which accepts 3 parameters, either X and Y client coordinates, or event object from which it derives coordinates of the mouse click).

 It’s all well and good, but the problem is – menu always shows down from the location of the mouse click. And if the click is at the bottom of the screen – menu gets cut off:

I needed to make menu expand UP and  couldn’t find a build-in property or method that would change this behaviour (GroupSettings.ExpandDirection property had no effect). Time for a little hack. Continue reading →

Infragistics Drag and Drop: detecting element during drag

I was using Infragistics drag-and-drop framework and set an HTML table element as my drop target. Now I needed to know during drag operation over which HTML table cell I am moving. I needed that in order to dynamically change appearance of draggable markup depending on which cell I am currently over.



(Think a strategy game – you’re placing construction on the terrain – if there is enough unoccupied room – the draggable item becomes green, otherwise it remains red).

The solution is to use elemAtPoint property during DragMoveHandler event. Continue reading →