asp.net – getting user confirmation before a postback

In asp.net web applications, it is common to have dozens — if not hundreds — of user controls that perform postbacks to the server, actions initiated by a user such as a button click. Often before a save, delete, or other critical action is performed, it is desirable to ask the user if they are sure.

In Asp.net web applications, buttons and other controls have two event properties that we are concerned with: onClick , and onClientClick .

The onClick event calls a specified function in the code-behind file. At this point, the postback has occurred, and any confirmation would have to take place with another rendered page — meaning lots of wasted time and wasted resources.  With the onClientClick event, we can interrupt the onClick event with our own javascript function or inline statement.

Using jQuery, we can bind function to all of these “confirm-able” user controls, which will interrupt the default post-back behavior  presenting users with a confirmation dialog box:

Using this method, we can target all user controls with the CSS class confirm. Additionally, if we wanted a broader reach, we could modify the jQuery selector to  input[type=button] or for all buttons, or all links.

The confirm box  var response = confirm("Are you sure?"); used in this example is a default JavaScript confirmation dialog box — which will be rendered differently per browser or platform — but you could easily swap this for any other confirmation script or function that returns a boolean value.

Horizontal vs. Vertical button groups

Button groups are an important part of user interface design, but choosing their orientation can often be difficult. I’d advocate that horizontal groupings are better in most cases — consider this:

Imagine that each element on the page is assigned a “Danger Zone” — and area where within one unit of margin of error,  an undesirable action will occur. In mobile interfaces, this unit is the width of a finger, or the accuracy of a touch on the device.

Horizontal vs Vertical button groups
The orange area represents the “Danger Zone”

The danger zone in button groups extends along the edge of the button that is touching another item. As represented above in orange, the danger zone for a vertical button group extends across the width of each button — covering nearly 50% of the surface. This reduces the touch-safe portion of the button to a slim area, greatly diminishing the effect of “friendliness” in the minds of the users. Clicks to these buttons must be precise, and the consequence is not just the inconvenience of a missed button, but the danger of a click on the wrong one.

Consider the horizontal button group: the danger zone only extends over a small percent of each button. Users can click or touch imprecisely and without stress. Additionally, horizontal button groups easily convey a “forward” and “backward” action, which lends itself well to buttons like Save or Cancel.

One major offender is jQuery Mobile — arguably the defacto  standard framework for mobile development. By default, button groups in jQuery Mobile are vertically oriented. Although it is simple to switch the grouping to horizontal, some are under the false impression that the default option is the best choice.

jQuery Button Groups
How easy is that to “Fat Finger”?

Convert <address> tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes!

Using jQuery, we search the document for <address> tags,  create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current spot.

Welcome to JS Bin

jQuery math finally solved

Web designers have long struggled with some of the more advanced aspects of computation and mathematics. Sometime ago, a Stack Overflow question asked

I’ve got a number in my JavaScript variable! Now how do I add another number to it? Please

A few well meaning answers point to using jQuery as the obvious solution. However, after a in depth search, I couldn’t find any actual jQuery plugins to do the calculations!

Well, there is a new jQuery plugin in town that aims to solve the problem of arithmetic in JavaScript: jMath!

It is incredibly easy to use in your code:

The plugin accepts the following operators:

  • ‘+’ (addition)
  • ‘-‘ (subtraction)
  • ‘*’ (multiplication)
  • ‘/’ (division)

And looking to add more in the future.

Hope that this helps in your development. Thanks!

100% height using jQuery

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here http://www.mikedoesweb.com/2016/modern-100-percent-height-css/

I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried!  Since then, a great jQuery plugin has came out that makes equal div height pretty easy to accomplish.

Using the plugin jQuery.equalHeight, it is as simple as:

Try out a live demo.

Of course, you should make your decision to use this method carefully. It’s quick and easy, but if your aren’t using jQuery already, is it worth the load time for this fix? If you want to check out a non-jQuery solution, check out this vanilla JavaScript solution.

JS Bin

Creating your own JavaScript Library

One of the phases I went through while learning about JavaScript was the intense desire to write my own library, similar to jQuery (but massively scaled down).

My library has gone through several major revisions — and more than one complete re-write, but now is exactly what I started out hoping it would be: functional, clean, small, and a solid learning experience.

I’d like to share what I learned from this project, and I hope you share back with me through the comments!

Finished project demo

Step 1: Identify the purpose of your library

This might just be one of the toughest parts of the whole process!  If you are to the point in your JavaScript knowledge that you would like to build your own library, than you’ve likely used jQuery, mooTools, Prototype, or any number of other popular libraries.  I use jQuery extensively in my projects, and know that it is very capable in many aspects, including: animation, user input validation, AJAX loading/submitting, event handling,  etc. Knowing this, it is tempting to have lofty goals for your own library. One piece of advice: Don’t. 

Pick one particular function, or aspect of web development/design that you would like your library to handle. Pick a niche need, and be happy with yourself when you fill it.

I decided my library would be a simple way to manipulate elements visually. At this point, I didn’t quite know how — but all you need is the kernel of the idea.

Step 2: Mock-up how would use the library

You always mock-up a webpage before you start building it right? Whether on paper, Photoshop, or even in code, it helps to pretend what the finished product will look like before you build it. It helps you to see obvious bugs, conflicts, and unwanted interactions you don’t catch when looking at the problem mentally.

Have you ever mocked-up your code?  Write some implementation, pretending that the class or object you are dealing with exists. Trust me, it will solve problems!

I want my library to do visual stuff with elements, and I like how jQuery looks. How about this?

Looking at my pretend implementation, I can see 1 problem and a hand-full of design implementation points.

The problem: $ as a function name is likely to conflict with lots of other libraries. Through some Googleing, I learn at StackOverflow that functions must start with a $ (dollar-sign) _ (underscore) or letters.

We can also tell some design patterns:

  • _ is the function name
  • _ must accept one or more parameters
  • _ should return itself so that a dot-operator will work
  • _ must control its scope so that we can have more than one _() on a page
  • dot-operator methods must also return the _ object for chaining

Step 3: Code up an outline

At this point, we know enough about the goal of our library, and how we will implement it, to begin outlining the structure of our library.

It may be useful for some (me) to review javascript function/object  prototyping.

Step 4: Fix-up the constructor

Now don’t try and run your code just yet: we have a pretty big scope issue (besides no functionality):

When our _() function returns this , it is actually returning the entire window, or the global scope.  Therefore, when we call _().toggle() , we are asking the browser to call the toggle() method which belongs to the window. Obviously this fails.

This problem can be solved by recursively creating another _ object using the new keyword.

What is the new keyword in JavaScript?

 

For an in-depth look at this problem, read more about JavaScript constructors

Next to implement in our constructor: making the _() represent an element with some bonus error prevention.

First, we create an about object that will be returned, if the implementation doesn’t specify an element id. Next, we check if the id parameter was sent, and then create a variable to contain that element.

Here is a final version of the _() constructor:

 

Step 5: Prototype method implementation

This step is pretty fun: being creative, and implementing what you want your library to actually do!

I mentioned earlier that I wanted my library to do some visual manipulation of elements. Make a list of what you want to do. I came up with the methods:

  • hide ()
  • show ()
  • bgcolor (color)
  • val (value)
  • toggle ()
  • size (height, width)

The depth of this step depends on the functionality of your library. Mine were rather trivial to implement:

 

Demo or download the finished library here

Part 2 – Event Handling

Final thoughts

Writing my own small library was a good way for me to learn about JavaScript. One of the great ways to learn more is to study the code of other libraries and see how they work.

Did you use this tutorial to create your own library? I would really like to hear about it. Please leave me a comment below.

Cheers!

Update
Stack Overflow user W3Geek asked a question about part of this tutorial. Visit his question: How do these pieces of code function exactly? His question is focused on Step 4 about the object constructor. User Leland Richardson does an excellent job explaining this further — I’d direct you to his thorough explanation rather than duplicating it here.

Really Simple jQuery Tabs

Bugged by popular jQuery tab content rotators that a bulky, non semantic, to fast/slow, or can’t use custom HTML anywhere you want? Really Simple jQuery Tabs is a jQuery plugin that tries to address each one of those issues. It’s goal is to be as simple and flexible as possible. You can completely rip-out and replace the CSS with your own, changing elements position, styling, etc. It is quite small: at 844 bytes your bandwidth won’t know the difference!

And oh yeah: they rotate!

I have used several jQuery tab/content rotators/panels/things and, although each has been extensively developed and tested, am always left with the feeling that something is missing:

  • This one doesn’t let use put your own HTML in the tab-link
  • That one only supports images
  • The other one is 10,000 lines of code and you only use it once
  • This one cycles too fast/slow

The purpose of Really Simple jQuery Tabs is to be really simple and really flexible.

You can:

  • Add HTML to your semantically correct list item tab-links
  • Panes are regular DIVS – put images, text, AJAX loaded content, etc. up in that DIV
  • Specify (down to milliseconds) how fast to cycle, if you want to cycle at all
  • bonus feature: only 844 bytes!
  • Completely customize the CSS to affect layout, coloring, etc…

Before you get too far: Check out a simply -styled DEMO 

Or, see it in action at: weber.edu/getintoweber

Implement it like this:

And the markup looks like this:

Notice that semantic markup? Yeah, me too. It was written to be as flexible and extensible as possible.

Now download the source and do your thing!

Convert < address > tags into Google Map link using jQuery

Relevant Stack Overflow Question

While designing a page template for a University today, I realized that there were many areas of the future pages that would include street addresses: buildings, conferences, offices, ect..  I thought, “Wouldn’t it be nice if these addresses were links to Google Maps?” Then people could easily find directions or set their phone GPS whilst driving (at a red light of course).

However, I quickly realized that in such a large institution as I am, that no faculty member would take the time to include a maps link.  As always, such wondering is the stuff of inspiration.  With a little bit of thought, I began writing a little jQuery function that could fulfill my dream.

code:

The function scans the entire webpage for instances of the <Address> tag:

And surrounds the address with a link to Google Maps:

Here is the jQuery Function:

Update: 11/27/2012 – Bug fix and code prettyfication.