If you develop a widget with Adobe AIR using HTML and Javascript, you may want to resize some elements of the HTML page depending on the size of the widget, thus having to resize them when the user decides to resize the widget. However, there’s a little trick on using the RESIZE event of the air.Event object.
The trick is that when the event is raised, and you execute some method on the corresponding event handler, the widget won’t have the correct size yet, so if you use the window.nativeWindow.width or window.nativeWindow.height values there you’ll be getting erroneus results.
The solution is quite easy, though. You just have to let the HTML engine to adjust everything he needs to sort out the new sizes and get those attributes after that. How do you do that? By putting your code in a setTimeout call with 0 milliseconds timer. Here you can find an example (assuming use of jQuery):
$(document).ready(function() {
window.nativeWindow.addEventListener(air.Event.RESIZE, onResize);
});
function onResize() {
var nativeWin = window.nativeWindow;
setTimeout(function(){
var width = nativeWin.width;
var height = nativeWin.height;
}, 0);
} //Here the values are correct
If you ever used autocomplete.ui plugin from jQuery UI and have an array with lots of suggestions you’ll see that the solutions provided by the plugin are not always satisfactory. You can add a scrollbar to the suggestions box by using a CSS hack, but even with that, you’ll have to render a big HTML that can be annoying on slow machines (mobile devices, for example).
I was working on a web site recently that had to be displayed on mobile devices and needed an autocomplete. But the suggestions array was big. A lot. This caused some problems on the mobile devices as they were behaving very slow, and the default plugin configuration doesn’t allow you to specify a maximum number of items to show in the suggesstions box.
So I decided to do a dirty hack into the plugin code to add this behaviour, adding a max property to the options to be able to limit the number of suggestions to show.
It’s not a perfect solution, because it should be implemented as a subclass or something, but if you need a fast solution, this is the way to go. You can find the code in my GitHub repository fork of jQueryUI. You can check the commit to see the changes I made.
Continue reading “Limiting the suggestions on jQueryUI Autocomplete widget” »
I was developing an application recently that needed some king of horizontal bars to be drawn on a web page. I found the jQuery Progressbar plugin and found it it was something similar to what I wanted to achieve, so I took some spare time and modified it to convert it in a plugin I could use in my app. The result is the jQuery Bars plugin. It’s a pretty simple plugin that will take a div and convert it into a horizontal bar, in which you can change the background color, the actual bar color, the duration of the animation and the height and width of the bar.
You can check a how it works and looks in this simple demo I just uploaded. It can be useful if you ever have to shown some kind of a percentage bar in a chart and you need a bit more customization that jQuery UI Progressbar gives you.
The plugin is dual licensed in MIT and GPLv2, the same license as jQuery, so feel free to use it or modify it at your will.
If you’ve ever used the Ajax.BeginForm code to render a form in ASP MVC using Ajax (via jQuery, for example), you may have wondered there’s an object you can pass to the call called AjaxOptions. This object allows you to pass the BeginForm call some interesting options to further enhance the form when it’s rendered. One of those options is specially useful if you want some javascript to be executed just after the form has been rendered. You can always use the $(document).ready in jQuery, but this code will not be called if, for example, the form is rendered after a postback and you have some validation errors (a missing required field, for example). Fortunately, you can use the AjaxOptions object to tell the form to execute a method right after the form has been loaded (for the first time or after a postback).
If you wonder how many parameters you can use in AjaxOptions you can visit the MSDN Help Page. The option we’re interested in in this post is OnSuccess. Take a look at this code:
<% using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { UpdateTargetId = "someId", InsertionMode = InsertionMode.Replace, OnSuccess = "someFunction" }))
{%>
<%: Html.TextBoxFor(model => model.SomeProperty) %>
<%}%>
This is a typical partial view that is intended to be used using an Ajax call. In it we simply display a TextBox to modify the property SomeProperty of our model. What we’re telling this form is that it should post to the Action action on the Controller controller. Everything is working as usual until here. However, we also pass the BeginForm an AjaxOptions object with some properties. The UpdateTargetId tells the form which DOM element on the page the form should be placed. The InserionMode tells the form what policy should follow when placing the form on the DOM, in this case we tell it that it should replace the contents of the element. And finally, OnSuccess tells the form what javascript code should execute once the form has been placed on the element, in this case we call a method called someFunction.
Imagine this is the HTML page in which we want to place this partial view:
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<html>
<body>
<div id="someId">
</div>
</body>
</html>
We can then add this javascript script in the page:
$(document).ready( function {
$.ajax({
url: <%: Url.Action("Edit", "Controller" %>,
success: function (data) {
$('#someId').html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
jAlert('Some error message', 'Error');
}
});
});
What we’re doing here is loading via Ajax the Edit view using jQuery when the page loads. After the page has been loaded, then the Ajax.BeginForm call will look for a javascript method called someFunction and execute it. In there you can put whatever logic you need to be executed right after the form has been placed (for example, binding some elements to events or whatever). In this case, we can write a simple sample function like this one and add it on the partial view:
function someFunction() {
alert('Form loaded');
}
Now each time the form is loaded via Ajax, or in a post, the alert will popup.
November 24th, 2010 | tags:
ajax,
c#,
javascript,
jquery,
MVC |
No Comments
If you’ve ever worked with relatively large UpdatePanels maybe you’ll have had a problem: blocking the user some elements while the asynchronous postback is running. When working with local or LAN environments, the async responses might be fast, but over the internet, or on large calculations the async postback may take a while. During this period, you may want to block the UpdatePanel controls so the user can’t trigger another postback or do any other operations on that UpdatePanel. I’ll show you an easy way to do so by using the AJAX framework for .NET and jQuery and one of its plugins: blockUI.
For those who don’t know jQuery, it’s an opensource Javascript framework that is going to be embedded on future versions of Visual Studio. It’s a very good framework because of its simplicity and its extensibility, having lots of plugins. One of those plugins is the blockUI plugin, which allows you to block and unlock any part of the DOM at will.
Continue reading “Disabling UpdatePanels when an asynchronous postback in progress” »
If you’ve been assigned to a new web application project lately, you’ll probably have had to deal with this [not] new AJAX technology. To be honest, AJAX is good, and websites like Google Mail and Flickr are good examples of that. But remember something: it’s always bad to abuse of something. It’s always bad to abuse AJAX. Don’t use it if it doesn’t really make sense to do it, and if your boss insists on it, ask him if he would use truck wheels on his BMW.
Continue reading “Developing Javascript involved web applications with Firebug” »
