Feb 25 2009

Drag/Drop shopping cart using jQuery

Category: Web Development — Krishna Chaitanya @ 15:28

Most of the AJAX introduction sessions give a demonstration of drag/drop features. I've attended an AJAX session 1 year back and wondered.."Will I ever be able to do such an amazing drag/drop cart?" Hehe..thanks to jQuery UI. Drag/drop  isn't a magic anymore!

Here is a demo of jQuery drag/drop shopping cart. Simply drag the items into the basket and total will be calculated. You may also remove the items from the basket, everything without postback.

Tags:

Feb 25 2009

Twitter initiated war to kill IE6 !!

Category: Web Development — Krishna Chaitanya @ 00:25
All that started with a simple tweet by a Norwegian developer Erlend Schei. He came up with an idea to display an "Upgrade" message on IE6 browsers for his websites and suddenly, all major websites of Norway adopted it, thereby declaring a war on IE6. According to wired.com, even Microsoft is supporting the campaign.

Here is a fast spreading code, appearing on the internet, to support the campaign. This conditional code when included in our sites, appears as a message at the top when the site is opened in IE6 .
 
<html>
<head>
<title>No IE6 campaign!</title>
</head>
<body>
<!--[if lte IE 6]>
<style type="text/css">
#ie6msg{border:3px solid lightblue; margin:8px 0; background:AliceBlue; color:#000;font-family:Verdana;font-size:smaller}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie7{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
</style>
<div id="ie6msg" >
<h4>Did you know that your browser is out of date?</h4>
<p>You are using Internet Explorer 6. To get the best possible experience using our website we recommend that you upgrade your browser to a newer version. The latest version is <a class="getie7" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a>. You may also try <a class="getie7" href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">Internet Explorer 8</a> which is available as a beta. The upgrade is free. If you're using a PC at work you should contact your IT-administrator.</p>
<p>You may also try other popular Internet browsers like <a class="ie6expl" href="http://www.opera.com">Opera</a>, <a class="ie6expl" href="http://firefox.com">Firefox</a> or <a class="ie6expl" href="http://www.apple.com/safari/download/">Safari</a></p>
</div>
<![endif]-->
</body>
</html>

Feel free to tweak it & use it.
In the world of browser compatibility problems, I think it's time for all of us to support this movement and reduce some pain to the developer as well as the customer...
 
Update(10th March, 2009):
The current BlogEngine theme itself looks distorted in IE6, as pointed out by one of my seniors'. So added the above code to my blog. You will get the above message when you open my blog in IE6 :)

Tags:

Feb 20 2009

ASP.NET AJAX Accordion postback problem, jQuery's solution!!

Category: jQuery — Krishna Chaitanya @ 13:50

Hi folks,|
I would like to share a bitter experience I faced for one long week and a beautiful solution I found today :) It goes like this:

The Requirement:
There is a web page contains hundreds of checkboxes, textboxes and dropdowns. All these controls are dynamically built in code behind. On page load all the controls should be disabled and on clicking an "Edit" button, all the controls should be enabled so that user can change the values and save. I need to format the page so that it would be user friendly.

My Initial Approach:
Since the layout is cluttered because of hundreds of controls (number depends on records in database) , I decided to use ASP.NET AJAX Accordion control, grouping all my controls into different panes. Not a bad start I guess. So, on every page load, I created new controls, built my UI and databound them. Then I created new accordion panes and added these controls to them. As far as displaying data, the accordion was perfect!

The Problem:
In Edit mode, I have to enable my page' controls, change the values in them and save them to database. But when I change values and click 'Save', in the pageload, all my controls are rebuilt and the changes I made are lost. The accordion is not able to restore the values after postback. I googled a lot for this problem and found few approaches like this one, but in vain (though it worked for some people). I tried to access my controls' value using client side javascript, store them in hidden variables and get back after postback. But inactive accordion panes do not render the controls. So I cannot access all controls. I posted my problem in ASP.NET forums but couldn't get any solution as of then.

jQuery's Soluton:
As I was lacking time, I thought of using jQuery for my problem.  I built dynamic HTML tables, which contain all my controls, in code behind. I wrapped these tables in divs and assigned classes to these divs. Then, using jQuery's slide effects, I was able to toggle my content (slide up and slide down). I wasted 4 long days with accordion (without result), but I could finish this task so easily with jQuery in just 1 hr.

I personally suggest budding developers to give a serious look at jQuery.

Tags: