Wrox Programmer Forums
|
ASP.NET 1.1 As of 10/6/2005, this forum is locked as part of the reorganization described here: http://p2p.wrox.com/topic.asp?TOPIC_ID=35394. No posts have been deleted. Open ongoing discussions from the last week have been moved to either ASP.NET 1.0 and 1.1 Beginners http://p2p.wrox.com/asp-net-1-0-1-1-basics-60/ or ASP.NET 1.0 and 1.1 Professional. http://p2p.wrox.com/forum.asp?FORUM_ID=50. See my sticky post inside for more.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 1.1 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 30th, 2003, 10:35 AM
Authorized User
 
Join Date: Oct 2003
Posts: 89
Thanks: 0
Thanked 0 Times in 0 Posts
Default jscript

In vb.net i have a dropdownlist. Based upon what the user selects from the list certain controls have to be disabled. in order to prevent postback to the server i need to use jscript but i have no idea how to do that.
Can someone please advise?

Thanks

 
Old November 30th, 2003, 11:08 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

This questions seems more appropriate for the JavaScript forum. I think all you need is client side JavaScript, so ASP.NET is not needed.

Anyway, here's a short example:
Code:
<html>
<head>
    <title>Disable Controls Example</title>
    <script language="JavaScript" type="text/javascript">
    function List1_Changed()
    {
        var selectedValue = document.form1.List1[document.form1.List1.selectedIndex].value;
        if (selectedValue == 2)
        {
            // Disable controls
            document.form1.txtTest.disabled = true;
        }
        else
        {
            // Enable controls    
            document.form1.txtTest.disabled = false;
        }
    }
    </script>
</head>
<body>
<form name="form1" method="post" action="">
  <select name="List1" onChange="List1_Changed();">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
    <input name="txtTest" type="text" id="txtTest">
</form>
</body>
</html>
When you select a new item from the list List1, the onchange will fire and List1_Changed is called. This method retrieves the value for the selected item. If it equals 2 (just an example), the text box txtTest is disabled, by setting its disabled property to true. For any other value, the text box is enabled again.

Does this help?

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
 
Old November 30th, 2003, 12:13 PM
Authorized User
 
Join Date: Oct 2003
Posts: 89
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I copied your example (i changed the names of the controls) and i receive the following error:

Compiler Error Message: BC30456: 'List1_Changed' is not a member of 'ASP.WebForm5_aspx'.

Source Error:


Line 65: <TD dir="rtl" style="WIDTH: 157px" align="right"><asp:dropdownlist id="drpCPay" tabIndex="9" runat="server" OnSelectedIndexChanged="List1_Changed()"></asp:dropdownlist></TD



 
Old November 30th, 2003, 12:17 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi collie,

That's because List1_Changed is not a server side method, but a client side JavaScript method. When you use OnSelectedIndexChanged you indicate the event you want to run at the server when the SelectedIndex is changed. In your case, all you need to do is add List1_Changed to the client side onchange attribute, like I showed you in my example.

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
 
Old November 30th, 2003, 11:54 PM
planoie's Avatar
Friend of Wrox
 
Join Date: Aug 2003
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

However, you can't immediately do what Imar is suggesting through the obvious ASP.net facilities. Certainly not in the ASPX markup. What you probably will need to do is add a line to your page code that modifies the onchange attribute so the client side javascript call will show up in the select tag.

drpCPay.Attributes.Item("onChange") = "List1_Changed()"

This should work for you. However, here are a couple very important things to remember:
1. If you want to use the drop down's autopostback feature of .net, you'll loose the client-side functionality because .net will use the onchange client side event for firing the postback. But it sounds like you don't and won't need that.
2. The clientside javascript that shows/hides the page elements may break if those page elements are asp.net controls unless you write the javascript appropriately. When .net renders those controls, it can change the names of them depending on the structure of the page. The safest thing to do is to write javascript that deals with these controls in such a way that the names are dynamic based on the unique client id of the control. Every control has a "ClientID" member which will return the unique ID that .net assigns. If you have specified an ID (which you usually do) the ClientID will usually match. You can actually embed the client ID into your javascript (i'll modify Imar's example):

    <script language="JavaScript" type="text/javascript">
    function List1_Changed()
    {
        var selectedValue = document.form1.List1[document.form1.List1.selectedIndex].value;
        var objTextBox = document.form1.<%=txtTest.ClientID%>;
        if (selectedValue == 2)
        {
            // Disable controls
            objTextBox.disabled = true;
        }
        else
        {
            // Enable controls
            objTextBox.disabled = false;
        }
    }
    </script>

Trying to mix ASP.net controls with client side javascript can be quite tricky, as you are finding out. :)

Peter
------------------------------------------------------
Work smarter, not harder.
 
Old August 13th, 2004, 06:12 PM
Authorized User
 
Join Date: Jul 2004
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by planoie
 However, you can't immediately do what Imar is suggesting through the obvious ASP.net facilities. Certainly not in the ASPX markup. What you probably will need to do is add a line to your page code that modifies the onchange attribute so the client side javascript call will show up in the select tag.

drpCPay.Attributes.Item("onChange") = "List1_Changed()"

This should work for you. However, here are a couple very important things to remember:
1. If you want to use the drop down's autopostback feature of .net, you'll loose the client-side functionality because .net will use the onchange client side event for firing the postback. But it sounds like you don't and won't need that.
2. The clientside javascript that shows/hides the page elements may break if those page elements are asp.net controls unless you write the javascript appropriately. When .net renders those controls, it can change the names of them depending on the structure of the page. The safest thing to do is to write javascript that deals with these controls in such a way that the names are dynamic based on the unique client id of the control. Every control has a "ClientID" member which will return the unique ID that .net assigns. If you have specified an ID (which you usually do) the ClientID will usually match. You can actually embed the client ID into your javascript (i'll modify Imar's example):

    <script language="JavaScript" type="text/javascript">
    function List1_Changed()
    {
        var selectedValue = document.form1.List1[document.form1.List1.selectedIndex].value;
        var objTextBox = document.form1.<%=txtTest.ClientID%>;
        if (selectedValue == 2)
        {
            // Disable controls
            objTextBox.disabled = true;
        }
        else
        {
            // Enable controls
            objTextBox.disabled = false;
        }
    }
    </script>

Trying to mix ASP.net controls with client side javascript can be quite tricky, as you are finding out. :)

Peter
------------------------------------------------------
Work smarter, not harder.


 
Old August 13th, 2004, 06:17 PM
Authorized User
 
Join Date: Jul 2004
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

What if you want to use the drop down's autopostback feature of .net, that looses the client-side functionality? Setting the autopostback to false does not seem to work. I still get postbacks when working with listboxes, buttons, and dropdowns, when I am only doing client side processing. How do I stop the .net onchange client side event firing the postback?

Thanks,

Paul

 
Old August 15th, 2004, 09:43 AM
planoie's Avatar
Friend of Wrox
 
Join Date: Aug 2003
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

Paul,

This is sort of a confusing question. Are you saying you DO wish to use the autopostback functionality or not? If you will have a control cause an autopostback, then it is somewhat pointless to write client-side events because the page will be re-drawn on the postback. So it would seem that you'd use only one or the other but not both.

Also, there is no such thing as "the .net onchange client side event". Client side events are purely a function of HTML and the client browser.
 
Old December 3rd, 2004, 04:23 PM
Registered User
 
Join Date: Dec 2004
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to amfigon
Default

Peter,

Along the same lines of using javascript with ASP Server Controls, I have the following question:

I'm stuck on trying to get the following to work, even after trying your suggestions:

I am using VB.NET to program ASP.NET...my task is to create two pages, Main and Child. In Main, I have linked a javascript function to a button in order to popup a second window (Child) where a user can enter information, hit the button, and the text is passed back to the calling window (Main). I've successfully done this in classic HTML before, but for some reason it doesn't seem like my text object on the Main page is being referenced correctly. I'm not sure if there is a step between .NET and javascript I am missing. In classic ASP, you referenced HTML controls by name, but since that is no longer available, I reference by clientID...is this a problem?

The code is as follows:

-----------
MAIN.ASPX
-----------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="main.aspx.vb" Inherits="WebApplication1.main"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <title>main</title>
        <script id="clientEventHandlersJS" language="javascript">
        <!--

        var dialogArguments;
        function getValue (field){
        dialogArguments = field;
        open('child.aspx', 'popup', 'width=400,height=300,scrollbars=1')
        }

        //-->

        </script>
    </HEAD>
    <body>
        <form id="formMain" method="post" runat="server">
            <P>&nbsp;</P>
            <P>
                <asp:Button id="buttonMain" runat="server" Text="Get Input"></asp:Button></P>
            <P>
                <asp:TextBox id="textMain" runat="server"></asp:TextBox></P>
        </form>
    </body>
</HTML>

---------------
MAIN.ASPX.VB
---------------

Public Class main
    Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
    End Sub
    Protected WithEvents button1 As System.Web.UI.WebControls.Button
    Protected WithEvents firstName As System.Web.UI.WebControls.TextBox
    Protected WithEvents buttonMain As System.Web.UI.WebControls.Button
    Protected WithEvents textMain As System.Web.UI.WebControls.TextBox
    Private designerPlaceholderDeclaration As System.Object
    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        InitializeComponent()
    End Sub
#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        buttonMain.Attributes.Add("onClick", "getValue(document.getElementById('" & textMain.ClientID & "'))")

    End Sub

End Class

------------
CHILD.ASPX
------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="child.aspx.vb" Inherits="WebApplication1.child"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <title>child</title>
        <script id="clientEventHandlersJS" language="javascript">
        <!--

        function buttonChild_onclick(){
        var doc = document.forms[0];
        if (doc.textChild.value == ""){
        alert("Email message is empty.");
        return false;
        }
        else
        {
            //alert(doc.textChild.value);
            window.opener.dialogArguments.value = this.textChild.value;
            window.close()
        }}

        //-->
        </script>
    </HEAD>
    <body>
        <form id="formChild" method="post" runat="server">
            <asp:Button id="buttonChild" style="Z-INDEX: 101; LEFT: 216px; POSITION: absolute; TOP: 136px"
                runat="server" Text="Submit"></asp:Button>
            <asp:TextBox id="textChild" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 136px"
                runat="server"></asp:TextBox>
        </form>
    </body>
</HTML>


--------------
CHILD.ASPX.VB
--------------
Public Class child
    Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
    End Sub
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents button1 As System.Web.UI.WebControls.Button
    Protected WithEvents buttonChild As System.Web.UI.WebControls.Button
    Protected WithEvents textChild As System.Web.UI.WebControls.TextBox
    Private designerPlaceholderDeclaration As System.Object
    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub
#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        buttonChild.Attributes.Add("onClick", "return buttonChild_onclick()")

    End Sub

End Class

 
Old December 4th, 2004, 05:50 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

You can use document.getElementById(elementName) to get a reference to another element.

Alternatively, you can use document.formName.controlName

The name attribute is still present in the HTML markup of the rendered page. However, it may have been renamed if the control is placed inside another control, e.g. _ctl12:txtSearch instead of just txtSearch.

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.





Similar Threads
Thread Thread Starter Forum Replies Last Post
JScript DumAss HTML Code Clinic 1 August 25th, 2004 02:46 AM
submit using jscript alyeng2000 ASP.NET 1.0 and 1.1 Basics 3 June 14th, 2004 07:38 AM
how to debug jscript alyeng2000 ASP.NET 1.x and 2.0 Application Design 4 May 22nd, 2004 05:13 AM
PLEASE HELP! ACTIVEX in JScript stalker Javascript 2 August 15th, 2003 05:04 PM
JScript Des67 Javascript 1 July 28th, 2003 05:05 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.