CODEWITHSUNDEEP
javascriptasp.netmaster-pages
nik
nik

Reputation: 27

easy way to add javascript functions in asp.net web site

I have around 10 to 12 functions in JavaScript. I want to call 2 or 3 of them in the event when control, get, focus, and other functions I used by those functions.

I have all those functions for virtual keypad ... I would like to add virtual keypad as on the master page (I have already created virtual keypad in JavaScript using HTML form).

I have already added that code into a master page and my keypad is working, but it only works with simple HTML controls (that is, having no runat="server" attribute). It doesn't work when I add runat="server".

I don't know how to call this functions from content or child pages.

My code is below:-- (this code for JavaScript that i added in master page...this is part of code(not full))

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        function setId(el) {
            id = el;
            //alert(el);
            document.getElementById(id).focus();
            reset();
            return 0;
        }  

        function restoreCode(evt) {
            ButtonUp(kcode);
        }

        function writeKeyPressed(evt) {
            InsertChar('k', kcode);

            return false;
        };

        function InsertChar(mode, c) {
            document.getElementById(id).focus();
        }

        function ButtonDown(c) {
            reset();
        }

        function ButtonUp(c) {
            //codes
            resets();
        }

        function Shift() {
            //codes
        }
    </script>

When I am calling it from content page that is HTML control not having runat="server" attribute in code then it will work.

 <input id="txt_pwd" type="password" onfocus="setId('txt_pwd');" />

When I am calling it from content page (that is, an ASP control having runat="server" attribute in code) then it will not work.

<input id="txt_pwd" type="password" onfocus="setId('txt_pwd');" runat="server" />

Please can any one tell me a solution that I will call my function (having on the master page) using server side control from content page.

Upvotes: 0

Views: 4171

Answers (1)

MikeSmithDev
MikeSmithDev

Reputation: 15797

It isn't working when you use runat="server" because .NET changes the ID of controls. So in the runat="server" case, your JavaScript is looking for the wrong id. One way to fix it is to tell .NET not to change the ID using the ClientIDMode.

<input id="txt_pwd" type="password" clientidmode="Static" onfocus="setId('txt_pwd');" runat="server" />

There are other ways to get the generated ClientID if you don't use static mode, as you wouldn't want to use that in repeaters or if there is a chance the ID may be a duplicate. In that case, you can use .ClientID, as in:

document.getElementById('<%= txt_pwd.ClientID %>');

Reading on ClientID

An easier approach may just be to use onfocus="setId(this);" and then

function setId(el) {
    id = el.id;

Upvotes: 1

Related Questions