Fransiscus Setiawan .NET Blog » Javascript http://fransiscuss.com My notepad to share knowledge with others Tue, 17 Aug 2010 05:28:50 +0000 http://wordpress.org/?v=2.6.1 en Enter button in TextBox ASP.NET http://fransiscuss.com/enter-button-in-textbox-aspnet/ http://fransiscuss.com/enter-button-in-textbox-aspnet/#comments Tue, 17 Aug 2010 05:28:50 +0000 admin http://fransiscuss.com/?p=276 This article is demonstrating how to wire up an enter key into a textbox. For example you have a search text box where you press enter then it will click go button and at the same page you have another textbox where you want to do another button click when you press the enter which means it’ is not necessary to post the page. This java script is used to capture the key event of enter and execute the LinkButton and ASP.NET button Click Event on the server side. Please add this javascript to your javascript common library or add this to your master page. This piece of code works in Firefox as well

 
function ButtonKeyPress(evt, thisElementName) 
{
    if(evt.which || evt.keyCode)
    {
        if ((evt.which == 13) || (evt.keyCode == 13))
        {
            // alert('post back href: ' +document.getElementById(thisElementName).href);
 
            if (typeof document.getElementById(thisElementName).href != 'undefined')
            {
                location = document.getElementById(thisElementName).href;
            }
            else
            {
                document.getElementById(thisElementName).click();
            }
            return false;
        }
    }
    else
    {
        return true;
    }
}

And add this to your .NET code behind on the page load

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
         If Not Page.IsPostBack Then
 
 
            If (User.Identity.IsAuthenticated) Then
                Response.Redirect("frmTimeMain.aspx")
            End If
 
            txtGUID.Attributes.Add("onkeydown", "ButtonKeyPress(event, '" + lnkSubmit.ClientID + "')")
            txtPassword.Attributes.Add("onkeydown", "ButtonKeyPress(event, '" + lnkSubmit.ClientID + "')")
          End If
    End Sub
]]> http://fransiscuss.com/enter-button-in-textbox-aspnet/feed/ ASP.NET Calendar selected day on click method http://fransiscuss.com/aspnet-calendar-selected-day-on-click-method/ http://fransiscuss.com/aspnet-calendar-selected-day-on-click-method/#comments Tue, 17 Aug 2010 05:17:24 +0000 admin http://fransiscuss.com/?p=274 I’ve a case where I have an ASP.NET calendar that has a page load method that automatically select a date when it’s loaded. I also have an event defined for Selected_Changed which will be triggered only when the user select any other date other than pre-selected date on the load

Private Sub ctlCalendar_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ctlCalendar.SelectionChanged
        If (Not String.IsNullOrEmpty(CalendarPreviousPage)) Then
            BaseCalendar.SelectedDate = ctlCalendar.SelectedDate
            Response.Redirect(CalendarPreviousPage)
        End If
    End Sub

But how do I wire up an event or when the selecteddate being clicked?You can use DayRender event and attach it to a javascript in this case I want to go back to previous page. BaseCalendar.Selected date can be any date where you want to set up/wire up the logic

 Private Sub ctlCalendar_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles ctlCalendar.DayRender
        Dim d As CalendarDay
        Dim c As TableCell
        d = e.Day
        c = e.Cell
 
        If (BaseCalendar.SelectedDate.Value = d.Date) Then
            c.Attributes.Add("OnClick", "history.go(-1)")
        End If
 
    End Sub
]]> http://fransiscuss.com/aspnet-calendar-selected-day-on-click-method/feed/ Numeric textbox with javascript and cross browser compatible http://fransiscuss.com/numeric-textbox-with-javascript-and-cross-browser-compatible/ http://fransiscuss.com/numeric-textbox-with-javascript-and-cross-browser-compatible/#comments Mon, 28 Jun 2010 06:12:20 +0000 admin http://fransiscuss.com/?p=254 I need to make a text box that does not allow the user to type any numeric key at all

        <asp:TextBox ID="txtHours" runat="server" onkeypress="return fnNumeric_only(event);" MaxLength="4" CssClass="txtHours"></asp:TextBox>
 
// function to only allow numeric key presses in a textbox
// this doesn't stop pasting of non numeric values
function fnNumeric_only(e) {
    // deal with unicode character sets
    var unicode = e.charCode ? e.charCode : e.keyCode;
 
    // if the key is backspace, tab, or numeric
    if (unicode == 8 || unicode == 9 || (unicode >= 48 && unicode <= 57) || (unicode == 46 || unicode == 44)) {
        // we allow the key press
        return true;
    }
    else {
        // otherwise we don't
        return false;
    }
}

At the sametime I also need to make the counter/tally changing by the time you start typing or deleting a character from the text box. Let’s make a scenario this way e.g 3.25 is the text in your textbox and basically what we want is when the user pressing backspace and stop in “.” character, you want your function to assume it as “3″ instead of “0″, you can use this function

 
function parseLocalNum(num) {
    return +(num.replace(",", "."));
}

I’ve also added these two function for getting and setting value of an input (e.g textbox and label) which is cross browser compatible

function getControlValue(controlName) {
    var controlValue = "";
    var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
 
    if (hasInnerText) {
        controlValue = document.getElementById(controlName).innerText;
    } else {
        controlValue = document.getElementById(controlName).textContent;
    }
 
    return controlValue;
}
 
function setControlValue(controlName, value) {
    var controlValue = "";
    var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
 
    if (hasInnerText) {
        document.getElementById(controlName).innerText = value;
    } else {
    document.getElementById(controlName).textContent = value;
    }
 
    return controlValue;
}

How to use getControlValue or setControlValue

    setControlValue("ctl00_ContentPlaceHolder1_lblClaimedHours", totalClaimed.toFixed(1).toLocaleString())
]]> http://fransiscuss.com/numeric-textbox-with-javascript-and-cross-browser-compatible/feed/ an activex control on this page might be unsafe to interact with other parts of the page. do you want to allow this interaction? http://fransiscuss.com/an-activex-control-on-this-page-might-be-unsafe-to-interact-with-other-parts-of-the-page-do-you-want-to-allow-this-interaction/ http://fransiscuss.com/an-activex-control-on-this-page-might-be-unsafe-to-interact-with-other-parts-of-the-page-do-you-want-to-allow-this-interaction/#comments Fri, 03 Jul 2009 06:18:38 +0000 admin http://fransiscuss.com/?p=233 I keep getting this message “an activex control on this page might be unsafe to interact with other parts of the page. do you want to allow this interaction” when I try to access a page that use Javascript to access ActiveX Code. I’ve spent quite sometime to get rid of this error message and I found out that

  1. The code need implement IObjectSafety Interface
  2. You need to digitally sign the code with valid certificate

Step 1 : Detail on how to implement IObjectSafety
-Create an interface file called as IObjectSafety.vb/IObjectSafety.cs

CSharp (IObjectSafety.cs) :

[ComImport()]
[Guid("CB5BDC81-93C1-11CF-8F20-00805F2CD064")]
[InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
interface IObjectSafety {
   [PreserveSig()]
   int GetInterfaceSafetyOptions(ref Guid riid, out int pdwSupportedOptions, out int pdwEnabledOptions);
 
   [PreserveSig()]
   int SetInterfaceSafetyOptions(ref Guid riid, int dwOptionSetMask, int dwEnabledOptions);
}
Imports System.Runtime.InteropServices
 
<ComImport()> _
<Guid("CB5BDC81-93C1-11CF-8F20-00805F2CD064")> _
<InterfaceType(ComInterfaceType.InterfaceIsIUnknown)> _
Interface IObjectSafety
    <PreserveSig()> _
    Function GetInterfaceSafetyOptions(ByRef riid As Guid, ByRef pdwSupportedOptions As Integer, ByRef pdwEnabledOptions As Integer) As Integer
 
    <PreserveSig()> _
    Function SetInterfaceSafetyOptions(ByRef riid As Guid, ByVal dwOptionSetMask As Integer, ByVal dwEnabledOptions As Integer) As Integer
End Interface

in your ActiveX code you need to implement IObjectSafety

CSharp:

 

VB.NET:

<ProgId("Fransiscus.Authentication.ClientUtility")> _
<ClassInterface(ClassInterfaceType.AutoDual), ComSourceInterfaces("ControlEvents")> _
<Guid("0577147B-6941-4f15-9EFB-2551FEB3D6CC")> _
<ComVisible(True)> _
Public NotInheritable Class ClientUtility
    Implements IObjectSafety
 
 
#Region "IObjectSafety Constants"
 
    Private Const INTERFACESAFE_FOR_UNTRUSTED_CALLER As Integer = &H1
    Private Const INTERFACESAFE_FOR_UNTRUSTED_DATA As Integer = &H2
    Private Const S_OK As Integer = 0
 
#End Region
 
#Region "IObjectSafety Methods"
 
    Public Function GetInterfaceSafetyOptions(ByRef riid As System.Guid, ByRef pdwSupportedOptions As Integer, ByRef pdwEnabledOptions As Integer) As Integer Implements IObjectSafety.GetInterfaceSafetyOptions
        pdwSupportedOptions = INTERFACESAFE_FOR_UNTRUSTED_CALLER Or INTERFACESAFE_FOR_UNTRUSTED_DATA
        pdwEnabledOptions = INTERFACESAFE_FOR_UNTRUSTED_CALLER Or INTERFACESAFE_FOR_UNTRUSTED_DATA
        Return S_OK
    End Function
 
    Public Function SetInterfaceSafetyOptions(ByRef riid As System.Guid, ByVal dwOptionSetMask As Integer, ByVal dwEnabledOptions As Integer) As Integer Implements IObjectSafety.SetInterfaceSafetyOptions
        Return S_OK
    End Function
 
#End Region

CSharp:

[ProgId("Fransiscus.Authentication.ClientUtility")] 
[ClassInterface(ClassInterfaceType.AutoDual), ComSourceInterfaces("ControlEvents")] 
[Guid("0577147B-6941-4f15-9EFB-2551FEB3D6CC")] 
[ComVisible(true)] 
public sealed class ClientUtility : IObjectSafety 
{ 
 
 
    #region "IObjectSafety Constants" 
 
    private const int INTERFACESAFE_FOR_UNTRUSTED_CALLER = 0x1; 
    private const int INTERFACESAFE_FOR_UNTRUSTED_DATA = 0x2; 
    private const int S_OK = 0; 
 
    #endregion 
 
    #region "IObjectSafety Methods" 
 
    public int GetInterfaceSafetyOptions(ref System.Guid riid, ref int pdwSupportedOptions, ref int pdwEnabledOptions) 
    { 
        pdwSupportedOptions = INTERFACESAFE_FOR_UNTRUSTED_CALLER | INTERFACESAFE_FOR_UNTRUSTED_DATA; 
        pdwEnabledOptions = INTERFACESAFE_FOR_UNTRUSTED_CALLER | INTERFACESAFE_FOR_UNTRUSTED_DATA; 
        return S_OK; 
    } 
 
    public int SetInterfaceSafetyOptions(ref System.Guid riid, int dwOptionSetMask, int dwEnabledOptions) 
    { 
        return S_OK; 
    } 
#endregion
 
}

Step 2:
You need to obtain certificate and sign it, You also need Windows Server 2008 SDK to sign your code using SignTool.exe (type Signtool SignWizard in command prompt to follow the wizard and sign your DLL)
For more detail please open verisign website (http://www.verisign.com/support/code-signing-support/code-signing/identity-authentication.html) or click here

]]> http://fransiscuss.com/an-activex-control-on-this-page-might-be-unsafe-to-interact-with-other-parts-of-the-page-do-you-want-to-allow-this-interaction/feed/ key event handler that compatible with all browsers using javascript http://fransiscuss.com/key-event-handler-that-compatible-with-all-browsers-using-javascript/ http://fransiscuss.com/key-event-handler-that-compatible-with-all-browsers-using-javascript/#comments Sun, 31 Aug 2008 22:41:19 +0000 admin http://fransiscuss.com/?p=121 This might be useful for web developer which wants to have one key event handler that compatible with all browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script language=JavaScript>
document.onkeyup = KeyCheck;      
 
function KeyCheck(e)
{
  //this is used for cross browser
  var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
  switch(KeyID)
   {
 
   case 13:
    checkPostCodeSelection();
    break;      
      }
}
</script>
]]> http://fransiscuss.com/key-event-handler-that-compatible-with-all-browsers-using-javascript/feed/ AJAX Update Panel Timeout Issue http://fransiscuss.com/ajax-update-panel-timeout-issue/ http://fransiscuss.com/ajax-update-panel-timeout-issue/#comments Fri, 29 Aug 2008 07:24:59 +0000 admin http://fransiscuss.com/?p=98 I have an asp.net page where the page will query the report from the database. To query the report itself might cause timeout exception on the page itself before the report result is being returned from database.

You need to do it in two steps, first you need to override the script timeout only for the pageitself. put this code in your code behind

1
2
3
4
5
6
7
8
9
10
11
12
13

    Dim pageTimeOut As Integer     
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init  
        pageTimeOut = Server.ScriptTimeout
 
        'this is in seconds
        Server.ScriptTimeout = 2500     
End Sub     
 
Protected Sub Page_Unload(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Unload        
 
Server.ScriptTimeout = pageTimeOut 
 
End Sub

The next step is required only if you use AJAX Update panel. Put this script on the aspx page

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">     
   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
        function (sender, args) 
        {         
             if (args.get_error() && args.get_error().name == 'Sys.WebForms.PageRequestManagerTimeoutException') 
            {            
                  // remember to set errorHandled = true to keep from getting a popup from the AJAX library itself            
                 args.set_errorHandled(true);         
             }     
        }); 
</script>
]]> http://fransiscuss.com/ajax-update-panel-timeout-issue/feed/ Set Default value with clear text for input type=”password” http://fransiscuss.com/set-default-value-with-clear-text-for-input-typepassword/ http://fransiscuss.com/set-default-value-with-clear-text-for-input-typepassword/#comments Fri, 29 Aug 2008 06:18:00 +0000 admin http://fransiscuss.com/?p=84 Normally we have two text boxes which is user name and password. On the first load of the page we want to set the default value of user name text box becoming ‘username’ and set the default value of password text box becoming ‘password’ not ‘*******’.

Well what most of us think that we can use javascript to change the type of the input box?well I’ve got this trick to have two textboxes in the same location and swap it with “OnFocus” event

1
2
3
4
5
6
7
8

  <span id="fakePassDiv" style="display: block;">
            <input name="txtFakePassword" type="text" class="text" maxlength="255" style="position:absolute;top:0px; right: 20px; width: 120px;" value="password"
                onfocus="javascript:document.getElementById('realPassDiv').style.display='inline';document.getElementById('fakePassDiv').style.display='none';document.getElementById('ctl00_ucLoginControl_txtPassword').focus();"
                tabindex="2" /></span> 
 
    <span id="realPassDiv" style="display: none;">
        <asp:TextBox ID="txtPassword" TextMode="password" runat="server" style="position:absolute;top:0px; right: 20px; width: 120px;" />
    </span>

Set the default value for username text box via code behind

1
2
3
4
5
6
7
8
9
10
11

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            txtUserName.Attributes.Add("onfocus", "JavaScript:if(this.value=='username'){this.value=''};")
            txtUserName.Attributes.Add("onblur", "JavaScript:if(this.value==''){this.value='username'};")
            txtUserName.Attributes.Add("value", "username")
 
            txtPassword.Attributes.Add("onkeydown", _
                                            "javascript:if((event.which && event.which == 13) || " _
                                            + "(event.keyCode && event.keyCode == 13))" _
                                            + " {document.getElementById('" + btnLogin.ClientID + "').click(); " _
                                            + " return false; } else return true;")
        End Sub
]]> http://fransiscuss.com/set-default-value-with-clear-text-for-input-typepassword/feed/ XML http object cross browser http://fransiscuss.com/xml-http-object-cross-browser/ http://fransiscuss.com/xml-http-object-cross-browser/#comments Fri, 29 Aug 2008 05:18:43 +0000 admin http://fransiscuss.com/?p=65 I believe this will be useful for everyone who wants to implement AJAX manually and make it compatible cross browser.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script type="text/javascript"> 
 
           // cross-browser method to retrieve an XMLHttp object for asynchronous requests & responses
            function GetHTTPRequest()
            {
                var http_request = false;
 
                if (window.XMLHttpRequest) 
                { 
                    // Mozilla, Safari,...
                    http_request = new XMLHttpRequest();
 
                    if (http_request.overrideMimeType) 
                    {
                        http_request.overrideMimeType("text/xml");
                    }
                } 
                else if (window.ActiveXObject) 
                { 
                    // IE
                    try 
                    {
                        http_request = new ActiveXObject("Msxml2.XMLHTTP");
                    } 
                    catch (e) 
                    {
                        try 
                        {
                            http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        } 
                        catch (e) {}
                    }
                }
 
                return http_request;
            }
 
</script>
]]> http://fransiscuss.com/xml-http-object-cross-browser/feed/ Querystring in Javascript http://fransiscuss.com/querystring-in-javascript/ http://fransiscuss.com/querystring-in-javascript/#comments Thu, 28 Aug 2008 21:29:22 +0000 admin http://fransiscuss.com/?p=16 This is a function to capture querystring in javascript. I used this javascript to control my menu dynamically.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
function getQueryString(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam &lt; aQueryString.length; iParam++ ){
if (
aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return unescape(strReturn);
}
</script>
]]> http://fransiscuss.com/querystring-in-javascript/feed/ Register Javascript to hide Div http://fransiscuss.com/register-javascript-to-hide-div/ http://fransiscuss.com/register-javascript-to-hide-div/#comments Thu, 28 Aug 2008 21:10:59 +0000 admin http://fransiscuss.com/?p=11 Sometimes people add javascript into the aspx page instead of using code behind but there is a case when we need to add javascript in the runtime using code behind. This is the example where javascript is used to provide switching of visibility based on the table visibility status. I used this technique to hide another user control when user click expand button. Client ID is required to know the real ID of the user control after rendering. In here we also add onclick event to the image tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

if (!this.Page.IsStartupScriptRegistered("tableScript"))
{
string script = @"<script language='javascript'>function checkVisibility() "
+ @"{"
+ @"    var element = document.getElementById('" + this.OuterTableDetailSearch.ClientID + @"');"
+ @"    var elementBtn = document.getElementById('" + this.btnExp.ClientID + @"');"
+ @"    if (element.style['visibility'] == 'hidden')"
+ @"{"
+ @"element.style['visibility'] = 'visible';"
+ @"elementBtn.src = '/Images/button_expand.gif';"
+ @"}"
+ @"else"
+ @"{"
+ @"element.style['visibility'] = 'hidden';"
+ @"elementBtn.src = '/Images/image_casestudy_search.gif';"
+ @"}"
+ @"}</script>";
 
this.Page.RegisterStartupScript("tableScript", script);
}
 
btnExp.Attributes.Add("OnClick",
               "javascript:checkVisibility()");
]]> http://fransiscuss.com/register-javascript-to-hide-div/feed/