Archives for category: ajax

Seems that I occasionally need to trigger the postback on an UpdatePanel, and invariably I forget between usages.

Since this particular post from Encosia has saved my bacon on more than one occasion, I shall share it here (and for my own future benefit):

Easily refresh an UpdatePanel, using JavaScript | Encosia:

I’ve noticed a lot of discussion lately regarding methods to refresh an UpdatePanel via client script. This is very easy on the server side, of course. You can just call UpdatePanel.Update(). However, on the client side, the most common solutions I’ve been seeing just don’t feel right. Many will advise you to use a hidden button control inside the UpdatePanel, manipulated via button.click(), to trigger a partial postback of the UpdatePanel. While it does work, I never have been able to get past the kludgey nature of that solution.

In a nutshell, we can use the __doPostBack() method:

Luckily, there’s an easy method for triggering a postback targeted at the UpdatePanel: __doPostBack().

As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback and fire a partial postback instead. For purposes of demonstration, I’m going to add that to the OnClick event of the container div:

<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">

Now, clicking anywhere in the UpdatePanel will trigger a partial postback, targeting the UpdatePanel. Since partial postbacks follow the full page lifecycle, this will fire UpdatePanel1_Load and update the Label’s text.

Someone on the ASP.NET forums asked how to set session variables in JavaScript. The answers given ranged from “totally wrong” to “rather misleading” or “marginally helpful”.

So in a nutshell, yes, you can totally do it. Not only will you be able to do it, you will love doing it after you get used to the process of getting it set up.

Here’s the recipe for success:

  • Add an ASP.NET AJAX ScriptManager to your page.
  • Create a simple ASMX Web service using Visual Studio.
  • Uncomment the Attribute directly above the class definition that reads [System.Web.Script.Services.ScriptService] to enable ASP.NET AJAX to see your web methods.
  • Create a method to get or update data in your session, and make sure the Attribute above the web method reads [WebMethod(EnableSession = true)] so you can have access to the session via your web service method.
  • Add a <Services> section to your ScriptManager.
  • In the <Services> section add a <ServiceReference> element with the Path attribute set to the path of your .asmx page.

OK, so that enables the ability to access your session from the client side.

But here’s the really awesome part:  if you include a reference to the web service in your .js file like so:

///<reference path=”~/MyServices/MyService.asmx” />

…you will get IntelliSense in the JavaScript for your web service methods! it’s very cool.

So then you just call your web service methods like you would any other JavaScript function. It’s totally easy and almost magical. It’s one of my favorite features of ASP.NET AJAX.

Automate daily chores with AppleScript | Mac OS X | Mac OS X Hints | Macworld:

Do you launch the same apps every morning and shut them down every night? Glenn Fleishman has an AppleScript that could take care of those repetitive chores for you.

Here’s an excerpt from Cooper Journal: Things I learned at Agile Up To Here:

Elisabeth Hendrickson has recently opened a new test-and-development training facility in Pleasanton CA called Agilistry. It’s bright and airy, well-lit and well-stocked, and it feels like home the minute you walk in. In order to publicize her new facility, she very generously hosted a week-long intensive learning exercise.

She invited eleven different people with widely varied skill sets, backgrounds, and interests. She challenged them to build a website in five days using the best practices of interaction design, agile programming, and test-driven-development. We christened it “AgileUpToHere” (#au2h) and it exceeded everyone’s expectations (you can see our results here).

With all this Dashcode and iPhone web development exploration that I’ve been doing lately, the question of course came up in my mind… what about the iPad? I’m already using some rudimentary sniffing to make sure iPhone users go to the appropriate spot, but obviously this case would have to be dealt with too, since maybe I would not want to send iPad users to the same spot as the iPhone users.

So I was very glad to find this article: iPad web development tips by Nicholas C. Zakas at his site, NCZOnline.

As it turns out, my method would have failed in that case since I have only been checking for “iPhone” (NOTE: strings are split on multiple lines to fit on this page… they actually don’t have line breaks.):

User-agent string

The previously-linked post describes the iPad Safari user-agent to be in the following format:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us)
AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B334b Safari/531.21.10

This was the user-agent string during the beta testing phase. The format is slightly different for the final release: Although this appears to be the official user-agent string, I have received reports of a user-agent like this:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us)
AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B314 Safari/531.21.10

You’ll note the addition of “iPhone” in the operating system segment of the user-agent string. This brings the user-agent string for Safari on the iPad more into line with Safari on the iPhone and iPod Touch, which have the following user-agent strings, respectively:

Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us)
AppleWebKit/528.18 (KHTML, like Gecko)
Version/4.0 Mobile/7A341 Safari/528.16

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us)
AppleWebKit/528.18 (KHTML, like Gecko)
Version/4.0 Mobile/7A341 Safari/528.16

This means a single user-agent string sniff for “iPhone” returns true in all three cases. The problem, of course, is that you might want to serve different experiences to the iPhone/iPod Touch than you would for the iPad. Make sure you double-check any user-agent sniffing designed to target these devices.

Then we move on to the interesting tidbit for the client-side. If detection is necessary, evidently we can use the navigator.platform property:

JavaScript iPad detection

If you’re trying to detect the iPad using JavaScript, there’s a very simple way to do so: check navigator.platform. The value of navigator.platform is always “iPad” when Safari for iPad is the user-agent. This follows the tradition of “iPhone” for the iPhone and “iPod” for the iPod Touch. This is the most accurate way to detect the iPad from JavaScript, assuming you don’t want to do a full user-agent string sniff.

function isIPad() {
    return navigator.platform == "iPad";
}

Also, keep in mind that navigator.platform doesn’t change even when the user-agent string for a browser is changed.

Good information for both sides of the computing fence, so I’m glad to have it!

Found this forum post to be very helpful and I think I may employ this more often when doing UpdatePanel related messaging-when-done…

Run a javascript function after UpdatePanel.Update() – ASP.NET Forums:

You should call the method in this way:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), “MyScriptName”, “<script type=’text/javascript’>functionToCall(‘hello world’);</script>”, false);

The problem could be the fact that you are using this instead of this.Page. Also instead language=’javascript’ you can use type=’text/javascript’.

All I know is that when I launched the script properly passing this.Page it worked properly. I had derived from Page to a custom base page, so maybe that had something to do with it.

Additionally, I refined it just a bit by building the script dynamically in a string and then passing that instead of just a literal in the static method call.

One more improvement I was considering is to embed this as a method on my aforementioned customized base page. Then i can just pass a name and the script to the method, and I won’t have to worry about the messy details every time.