Happy New Year 2010!

Hey World, Happy New Year 2010!

Enjoy your holidays. Forget all the odds of 2009 and plan meaningful life for 2010!

Wherever you spend your holidays this year-end, enjoy it with all your heart. And please accept my warm invitation to spend your holidays of New Year 2011 in Nepal – a world of its own! We are celebrating 2011 as Nepal Tourism Year – 2011. My kind request to add this year into your calendar so that your won’t miss what this mysterious country has to offer you – from Natural beauty to the Mt. Everest, from Hindu’s holy Pashupatinath to Buddhist’s holy Lumbini- the birth place of Lord Buddha, from the miraculous flora and fauna to the diversity of social and cultural property!

Source of photos: Nepal Gallery

Many many happy returns! Happy new year 2010!

Toggle image using jquery for animated hide show in asp-net

Web masters find it attractive to mark or indicate some text in a page as special part. For example a featured product in a shopping cart would hold a finished featured icon image at its side. Similarly we see New image icon blinking at the side of some product or text. It is sometimes better by far to use such animated images to draw user's attention. How would you do this using jquery? The simple answer is that- toggle the image based on its display status, in a regular interval.

There exists a simple method in jquery plugin that accomplished this task:

$('my-image-selector').toggle();

Let's look at the simple example.

<table>
            <tr>
                <td>This is some test news.</td>
                <td style="height:45px"><img id="newImage" src="../images/new.jpg"
                 alt="New!" height="40px" width="40px"/></td>
            </tr>
        </table>

<script type="text/javascript">
        $(function(){
            setInterval(imageFlickr,300);                        
        });
        
        function imageFlickr()
        {
            $("#newImage").toggle(200);            
        }       
    </script>

 

In the page, I have added an image in a column of a table. Please use your own image (perhaps some 'New' image, as in the image above). Note the javascript setInterval() method that calls the function imageFlickr() every 300ms. In the method, we have the line:

$("#newImage").toggle();

The $(selector).toggle(interval) method toggles the show/hide property of the element. In the code, I haven't used the interval argument of toggle method. The interval in milliseconds defines the fade-in or fade-out speed of the element. Try this once and you will see great effect:

$("#newImage").toggle(200);

You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to
any of your favourite bookmarking site!

Happy Programming!

Prevent page postback on enter key press in textbox in asp-net web page

In an asp.net web page, you may have experienced that pressing enter key postbacks the page. For example, take the following scenario:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" />

                </td>

            </tr>

        </table>

In the page, if you press enter key in any of the textboxes, the page will postback, which is not desired.

1.0 What’s the reason?
Lets look at the html markup generated for the page:

The asp.net button control has been rendered with “submit” type, which is the reason of page postback when enter key is pressed in any of the textboxes. Note the following line in the image above:

<input id="btnOK" type="submit" value="OK" name="btnOK"/>

2.0 The Way Out
We can use two different approaches to prevent postback on enter key-press in any of the textboxes:

1. Using UseSubmitBehavior="false" in the asp.net button control’s markup
We can set UseSubmitBehavior="false" in the button markup:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" UseSubmitBehavior="false" />

                </td>

            </tr>

        </table>

This stops rendering the button as type=”submit”. Now the rendered markup for the button will be:

Not the following line in the image above as captured from firebug:

<input id="btnOK" type="button" onclick="javascript:__doPostBack('btnOK','')" value="OK" name="btnOK"/>

This shows that there is no more type="submit" attribute, rather onclick="javascript:__doPostBack('btnOK','') has been added.

So you have successfully stopped the page postback now!

2. Prevent enter key press in all the textboxes
One another way to stop the page postback is to prevent enter key press in any of the textboxes. We can use jquery to easily perform the task. This way:

<script type="text/javascript">

        $(function(){

            $(':text').bind('keydown',function(e){ //on keydown for all textboxes

                if(e.keyCode==13) //if this is enter key

                    e.preventDefault();                

            });

        });

    </script>

On page load, all the textboxes in the form are bound to the keydown event to a function. In the function we check if the key pressed in the ‘enter key’. If so, we prevent the further bubbling of the event. Hence it prevents the page postback.

Note: You will need to reference the latest jquery file in the page to use the second technique.

3.0 Conclusion
We looked at two ways to prevent page postback on enter-key press in a textbox in asp.net web page. Both the techniques work well. But I would prefer the first one since this would save the extra client side manipulations in the user’s machine.

4.0 Looking towards hearing from you!
You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to any of your favourite bookmarking site!

Happy Programming!