Select Option's onclick,onchange events issue

manishk73 · August 28th, 2008, 01:43 PM

Hi,
I am using asp.net for my website. My requirement is to provide a dropdown kind of control through which user can enter a new data and if data already exist then can select existing data from the list.

For this I am using following code using Ajax <Popup Control Extender>

<asp:Panel ID="AreaOfStore" runat="server" Visible="true">
<tr>
<td class="FieldLabel" align="right">Area of Store</td>
<td>
<asp:TextBox id="txtAreaOfStore" width="150px" runat="server" AutoCompleteType="None"/>
<asp:Panel ID="pnlAreaOfStore" runat="server" style="background-color:White;position:absolute;visibility:hidden;">
<asp:ListBox ID="lbAreaOfStore" runat="server" AutoPostback="false" width="154px"s>
<asp:ListItem Value="1" Text="Area Code 001"></asp:ListItem>
<asp:ListItem Value="2" Text="Area Code 002"></asp:ListItem>
<asp:ListItem Value="3" Text="Area Code 003"></asp:ListItem>
</asp:ListBox>
</asp:Panel> <ajaxToolkit:PopupCont****tender ID="AreaOfStorePopupControl" runat="server" TargetControlID="txtAreaOfStore" PopupControlID="pnlAreaOfStore" BehaviorID="pbAreaOfStore"
Position="Bottom" CommitProperty="value" CommitScript="e.value"/>
</td>
</tr>
</asp:Panel>

PopupCont****tender displays listbox control on focus of textbox.

In Page_Load event I am adding onclick event through attribute

lbAreaOfStore.Attributes.Add("onclick", "PutTextInTextbox('AreaOfStore');")

Following is javascript code on the page

<script language="javascript" type="text/jscript">
function PutTextInTextbox(field)
    {
    var lbox = document.getElementById("ctl00_ContentPlaceHolder1 _ItemEdit_lb"+field) document.getElementById("ctl00_ContentPlaceHolder1 _ItemEdit_txt"+field).value = lbox[lbox.selectedIndex].text;
        $find("pb"+field).hidePopup();
    }

</script>

I have avoided handling OnSelectedIndexChanged of listbox and postback of page through updatepanel using above javascript.

Above code works perfect fine on IE7,Safar3.0 but It doesnt work on Firefox Mozial browser.

Problem is onclick event does not fire in mozila. I have checked it with adding an alert.
I have tried with onchange event also. It doesnt fires.
I have cheked viewSource of the page. I can see my event added in <Select><options>.....</Select> tag of the html control.

I have an update panel under which above asp.net code is running to avoid postback of complete page form other button clicks.
Plese help on locating the issue.

Old Pedant · August 28th, 2008, 02:45 PM

Can you show us the HTML???

A simple test of onclick for a <select> works fine in FireFox for me.

Example:

Code:

<form>
<select name="foo" onclick="alert('foo clicked');" onchange="alert('foo changed');">
<option> one
<option> two
<option> three
<option> four
</select>
</form>

manishk73 · August 28th, 2008, 03:26 PM

Below is the aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <br />
            ToDo:
            <asp:TextBox ID="MyTextBox" runat="server" Width="538px"></asp:TextBox>
            <br />
            <asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
                <%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>--%>
                        <asp:ListBox ID="RadioButtonList1" runat="server" AutoPostBack="false" onClick="javascript:PutTextInTextbox();"
                            Width="146px">
                            <asp:ListItem Text="Scott Guthrie"></asp:ListItem>
                            <asp:ListItem Text="Simon Muzio"></asp:ListItem>
                            <asp:ListItem Text="Brian Goldfarb"></asp:ListItem>
                            <asp:ListItem Text="Joe Stagner"></asp:ListItem>
                            <asp:ListItem Text="Shawn Nandi"></asp:ListItem>
                        </asp:ListBox>
                    <%--</ContentTemplate>
                </asp:UpdatePanel>--%>
            </asp:Panel>
            <br />
            <ajaxToolkit:PopupCont****tender ID="PopupCont****tender1" runat="server" CommitProperty="value"
                CommitScript="e.value" PopupControlID="Panel1" BehaviorID=""
                Position="Bottom" TargetControlID="MyTextBox">
            </ajaxToolkit:PopupCont****tender>
        </div>

            <asp:ListBox ID="ListBox1" runat="server" onmouseover="javascript:PutTextInTextbox('Test')"
                            Width="146px">
                            <asp:ListItem Text="Scott Guthrie"></asp:ListItem>
                            <asp:ListItem Text="Simon Muzio"></asp:ListItem>
                            <asp:ListItem Text="Brian Goldfarb"></asp:ListItem>
                            <asp:ListItem Text="Joe Stagner"></asp:ListItem>
                            <asp:ListItem Text="Shawn Nandi"></asp:ListItem>
           </asp:ListBox>

    </form>
</body>
</html>
<script language="javascript" type="text/jscript">
function PutTextInTextbox(field)
    { alert('Test');
        //var lbox = document.getElementById("ctl00_ContentPlaceHolder1 _ItemEdit_lb"+field);
        //document.getElementById("ctl00_ContentPlaceHolder1 _ItemEdit_txt"+field).value = lbox[lbox.selectedIndex].text;
        //$find("pb"+field).hidePopup();
        //return true;
    }
    </script>

Old Pedant · August 28th, 2008, 05:32 PM

Sorry, I asked for the HTML.

I really don't want to try to bring up a project in VS and debug and and and...

If you show us the HTML that results, I can just try that immediately in a browser.

You can get the HTML by clicking on the VIEW menu and then on the SOURCE or PAGESOURCE menu item, depending on browser.

Old Pedant · August 28th, 2008, 05:51 PM

Despite what I said in last msg, I *did* try running that.

*WOW*! Weird!

At first I thought it was because you had specified 4 rows visible, but nope, not true!

You are so right, it simply doesn't work in FireFox.

Bizarre, to say the least. Sorry!

Won't have a chance to play with it more in next day or so.

Imar · August 29th, 2008, 01:33 AM

Isn't that simply because the <script> block is defined outside of the <html> instead of in the <head> or at least in the page? I think Firefox just plays by the rules and ignores that script block.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.

manishk73 · August 29th, 2008, 12:27 PM

Thanks all for trying to help me.
I did silly mistake here.
type="text/jscript" should be "text/javascript".
Mozila doesnt understand jscript.
In my application when I tried it on fresh aspx page and rewritten a fresh code it worked fine and then got the reason.

Old Pedant · August 29th, 2008, 01:20 PM

LOL! And to think I didn't notice that!

WONDERFUL! Thanks for telling us what was going on.