A Nice Javascript Calendar Control for your applications


Javascript Calendar/DateTime Picker control
Javascript Calendar/DateTime Picker control

I got this nice little gadget from a friend of  mine who also didnt know where it originally came from. This one’s made by Nick Baicoianu in 2006 and distributed under the GNU license. It had problems with Firefox 3 where it wasn’t showing anything in the dropdown for the years. Upon closer inspection I found out that it was using the getYear() function which was returning 3 digit values for years in Firefox 3 — So you had to either detect it first and add 1900 to it but this wasnt a very good looking solution to me so I started looking for other options and I came up with the getFullYear() function. It returns the proper 4 digit year notation in all browsers. So now its compatible with IE 7, FF2, FF3, Chrome, Opera and Safari as well.

Its a handy little gadget to have in your arsenal. I like it very much. Hope you’ll like it as well.

P.S: The download contains the include folder which has the js and css files for the calendar.

Download the Code

How to use TinyMCE in ASP .NET?


howdy everyone,

well, its been quite a few days since I dropped something on my blog, been eXtreeemly busy these days. Did any one missed me?? 😀

OK, today I got this little test application for you people who are wondering: “how to use TinyMCE in ASP .NET?”. Trust me, its very simple and very straight forward.

Here’s how I used TinyMCE in my application:-

I just added this in the head tag.

<script language=”javascript” type=”text/javascript” src=”tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
theme : “simple”
});
//you can also used “advanced” for themes
</script>

After that just put a multiline textbox in and it will take the form of a feature rich WYSIWYG editor.

You can also ‘skin’ this as well. By default the download comes with two skins, one is the advanced and the other a much simpler one.

Download the code

jQuery effects not working after UpdatePanel Asynchronous request is over


A few days ago I was working on a project that involves a really good looking design and it had some fancy effects on a page with the help of jQuery library

The fancy effect was about showing a button over the picture with the title “View larger” when the mouse hovered over it and it went off and on with the fade effect and some good looking collapsible panels. The items were shown on the basis of a filtering criteria given by the user and I put that section in an UpdatePanel control. On first page load every thing was working A-OK but as soon as there was any Asynchronous Post back, whether from a drop down list or from any check box, all the jQuery effects just vanished.

So the problem was quite vague when I first looked at it, it wasn’t clear as to why the application is behaving this way so I started testing every peace of javascript I could find and mind you I didn’t know any thing about jQuery by that time so when I came up to this I started googling it too, studied how it worked.

Then I came to know that there’s an event called the Ready event, which is fired once to DOM is fully loaded. and I noticed in the code that there were lots of things that were getting initialized in this event which was found in three different files in my case. So I took out the code in the “ready” events and put them in 3 separate JavaScript functions, called them from the ready event AND then did the part that ACTUALLY solved the issue. WHAT WAS THE ISSUE?? Well, the issue was that after an async post back the ready event isn’t fired. So I had to find a way to actually call a JavaScript function after ANY Async post back. After a little Googling I came up to this fine link

http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

where Zeeshan Malik explains how to do that. So I did it like this:

I wrote this function in the master page

function load(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

function EndRequestHandler(){

ReadyFunction1();

ReadyFunction2();

ReadyFunction3();

}

and called this in the onload event the body tag  as

<body onload=”load()”>

And the problem got knocked out!

For your convenience, here are some useful links.

http://www.sitepoint.com/article/ajax-jquery/

http://docs.jquery.com/Tutorials:AJAX_and_Events

Happy Programming Folks!

How to get and cancel the enter/return key in Javascript?


There was a problem I was facing with a web form I made, and that was that whenever the user pressed the enter key while typing in a text box, he was taken to the previous page. Obviously it was very irritating so I thought about making up a javascript routine to eat away the Enter key. At first I made up a function using window.event and that was working perfectly fine until I discovered that it wasn’t working in Firefox 3. So I starting googling things out and came up with this function. This baby works fine in both browsers.

function eatenter(e) {
if (window.event) { // IE
if (e.keyCode == 13) {
//override default value so you know it was caused by input

return false;
}
}
else if(e.which == 13) { // Netscape/Firefox/Opera

return false;
}
}

Since this was an ASP .NET application and I was working with asp:Textbox control so I added this function to the textbox using this statement.

txtBox.Attributes.Add(“onkeydown”, “return eatenter(event);”);

This would look something like that in HTML

<input type=”text” onkeydown=”return eatenter(event);” />

Hope that helps,

Happy Programming Folks!

How to get the HTML name attribute of ASP.Net Control


//Function to get the HTML name of the server control from the Client Id

// Parameters:

//  clientId – Control.ClientId

//  serverId – Control.id

private string GetHTMLNameById(string clientId, string serverId)

{

int pos = serverId.IndexOf(‘_’);

string HTMLName = “”;

if(pos >= 0)

{

pos = clientId.IndexOf(serverId);

HTMLName = clientId.Remove(pos, serverId.Length);

HTMLName = HTMLName.Replace(‘_’, ‘$’);

HTMLName += serverId;

}

else

HTMLName = clientId.Replace(‘_’, ‘$’);

return HTMLName;

}

Courtesy: http://geekswithblogs.net/Gaurav/archive/2006/09/04/90195.aspx

Javascript: String trim functions: leftTrim, rightTrim and trimAll


The first is a definition of the separate function leftTrim, rightTrim and trimAll.
These trim the spaces to the left of the string, the right of the string and both sides respectively.
function leftTrim(sString) 
{
    while (sString.substring(0,1) == ' ')
    {
    sString = sString.substring(1, sString.length);
    }
    return sString;
}
function rightTrim(sString) 
{
    while (sString.substring(sString.length-1, sString.length) == ' ')
    {
    sString = sString.substring(0,sString.length-1);
    }
    return sString;
}

function trimAll(sString) 
{
    while (sString.substring(0,1) == ' ')
    {
    sString = sString.substring(1, sString.length);
    }
    while (sString.substring(sString.length-1, sString.length) == ' ')
    {
    sString = sString.substring(0,sString.length-1);
    }
    return sString;
}
I also noticed that Firefox was working with 'trim', ltrim and rtrim but IE wasn't. 
So I got these functions in and they worked for me in both.

	

Just a little observation about the javascript’s window.open method


well today I was just putting in a pop up window in my application using the Javascript’s window.open method and at first I wrote this:

window.open(“printApp.aspx”,“Print barcode window”,”status=0,width=380,height=175,location=0,scrollbars=0,resizable=0″);

and that was working in Firefox but when I fired up IE to see whats happening there it was giving an invalid parameter’s error. So I started trimming the parameters off one by one and it turned out that there should be no spaces in that second parameter highlighted as bold. 🙂