Javascript sleep function

May 6th, 2009

If you find yourself in need of a sleep function for client-side javascript, you’re probably doing it wrong and should be using asynchronous calls. But sometimes we don’t have full control of all the code, and we’re stuck doing something that mostly works rather than using the ideal solution.

To that end, here is a small function to cause synchronous javascript to sleep / pause.


function sleep(ms)
{
var complete = new Date();
complete.setTime(complete.getTime() + ms);
while (new Date().getTime() < complete.getTime());
}
Do not use this for large loops, you’ll kill the browser. It eats CPU cycles for breakfast.

Example call

<body>
<script type=”text/javascript”>
function sleep(ms)
{
var complete = new Date();
complete.setTime(complete.getTime() + ms);
while (new Date().getTime() < complete.getTime());
}

alert("hi!");
sleep(4000);
alert("done");
</script>
</body>

Note that the elaspsed time is not exact. This is just to pause to give code that isn't behaving time to work, for example, in older COM components that are being constructed on the client and then used, but you need to give it a second to load up.

Got a better way to accomplish this? Please let me know in the comments!

Tags:
Posted in Javascript | No Comments »

When the gas pedal becomes the brake pedal

October 17th, 2008

In my company, we have a large in-house intranet application that drives me insane. Literally. In the interest of not having to train people how to use a web browser, they’ve used modal windows (real ones, for MSIE only, not the modern version using javascript and divs) and other components that completely break expected behavior of a web page to any experienced user.

I can’t copy and paste text, my right-click is broken, I can’t use the arrow keys to navigate, the tab key doesn’t tab form elements properly, and the enter key doesn’t submit forms. The modal windows render IE tabs useless. So we end up opening this particular application in its own MSIE window and open a different instance for everything else.

Every time I mention that something is “broken”, I am told it is by design to help our poor newbie users not break anything.

The design completely violates any semblance of usability, standards, and sanity. Experienced users are frustrated to the point of wanting to bash someone’s skull in. So, when I’m surfing the internet and see posts like this one, detailing how to break your application on purpose because you don’t feel like training users, it makes me want to scream.

If people are “accidentally submitting” the form, it’s a lot better, at least in my opinion, to force a confirmation than to break the form. Even better, try TRAINING people. I know, that’s just nonsense, isn’t it?

The tab key moves between fields, not the enter key. If you need to allow carriage returns in input, then use the correct form element to allow it, such as textarea.

As far as I’m concerned, as a user, the form is SUPPOSED TO SUBMIT WHEN I HIT THE ENTER KEY. A simple google search shows I am not alone — people consider the thing broken if that doesn’t happen.

Breaking expected GUI behavior to cater to your inexperienced users is like saying you have a subset of people who drive cars who prefer the gas pedal to be on the left side and the brake pedal on the right, so that’s how you’re going to design YOUR car. That’s just great. Now, I’m used to the gas pedal being on the right, but when I get in YOUR car, it’s on the left. Thanks for confusing the hell out of me and making me think your car is broken.

Standards exist for a reason. In a car, the steering wheel steers it, the pedals are in the same spots, and other controls work similarly enough that a person should be able to get in the car and drive it with little fuss, as long as they already know how to drive another car. For computer applications, Mac applications, Linux applications, and Windows applications all have conventions so that a person learns which keys tend to do which actions. An example of this is the control+c key combination on Windows. That should copy things to my clipboard. If it did something else, I’d be confused and peeved. You wouldn’t hijack that key combination for your winforms app (unless you enjoy frustrated users), so why would you hijack the enter key for a web form?

Am I alone in getting this annoyed? Do you think there is ever a good reason to choose to break a form for experienced users in the interests of inexperienced ones? Share your thoughts in the comments.

Edited to add: Due to the comments left, I want to be very clear here. It’s the CLIENTS I am pissed at, most of all the people who requested the abomination I have to use every day. I fail at English.

Tags: , ,
Posted in Bloggerific | 8 Comments »

C#.NET: How To Call Parent Method From Popup

June 26th, 2008

csharp.netSay you want to have a page open a child window (or tab) as a popup, and you want that new child window to be able to call a method that the parent page has. For example, a popup window that acts as a confirmation dialog, or a modal window in an intranet application.

This isn’t terribly difficult in .NET, but it does require a little hand-coded javascript. Here’s an example with both a link and a button that can call the parent code. The parent code is wrapped in a client-side script that submits a button click that causes a postback and fires the event that runs the server-side method. You can mix this up and get more (or less) creative.

The following is just one of many ways you could use this. When the user clicks the link or the button, it calls the parent method and closes itself.

Parent ASPX:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Example Parent Page</title>
    <script type="text/javascript">
    function button_click()
    {
        document.getElementById("btnSubmit").click();
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <a href="#" onclick="window.open('Default11.aspx','popup');return false;">click here</a><br />
        <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /></div>
    </form>
</body>
</html>

 

Parent Code Behind:


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default10 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        TextBox1.Text = "btnSubmit_Click";
    }
}

 

Child ASPX:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs" Inherits="Default11" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Example Child Calling Parent Method</title>
    <script type="text/javascript">
    function callAndClose()
    {
        if (self.opener && self.opener.button_click)
        {
            var opener = self.opener;
            self.opener = self;
            opener.button_click();
            self.close();
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" onclick="callAndClose();">link example</a>
        <br />
        <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Button Example" /></div>
    </form>
</body>
</html>

 

Child Code Behind:


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default11 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        String script = "<script type=\"text/javascript\">callAndClose();<" + "/" + "script>";
        ClientScript.RegisterClientScriptBlock(Page.GetType(), "load", script);
    }
}

Tags: , , , , ,
Posted in .NET | No Comments »

MSIE: “The web page you are viewing is trying to close the window”

April 28th, 2008

The trials and tribulations of Internet Explorer can make the hardiest of us want to cry. When you code intranet applications, you often use new windows to simulate forms and whatnot. Yet MSIE7 loves to warn the user when the owner of the popup tries to close the very popup it opened!

Mostly it’s just an annoyance, but some non-techie users can be confused by the message as well.

Want to close your own darn window without prompting the user? Use this cheater script. I’ve only tested it on Trusted sites, so no promises about Internet Zone sites, mmkay?


<script type="text/javascript">
function closeMe()
{
window.open('','_self','');
setTimeout("self.close();",1000); // 1 second
}
</script>

Tags: , ,
Posted in Javascript | No Comments »

Javascript snippet: URL ($_GET) parameters

October 22nd, 2007

Quick and dirty sample of parsing URL parameters ($_GET) from the URL and setting a form value equal to one of them. Useful for pre-setting form values, but do beware of possible form hacks. You should always strip html (or at least script tags and variations) from your form submissions on the server-side.


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var querystring = new Array(); // if no querystring, will be an empty array, preventing any null reference issues
if (window.location.search)
{
var pairs = window.location.search.substring(1).split("&");
for (var i=0; i<pairs.length; i++)
{
querystring[unescape(pairs[i].split("=")[0])] = unescape(pairs[i].split("=")[1]); // unescape encoded values like %20 for spaces
}
}
function fillForm()
{
document.getElementById("txtName").value = typeof(querystring["txtName"])=="undefined"?"":querystring["txtName"];
}
</script>
</head>
<body onload="fillForm()">
<form id="f1">
<input type="text" name="txtName" id="txtName" />
</form>
</body>
</html>

Happy coding!

Tags: , ,
Posted in Javascript | 1 Comment »

« Older Entries