problem with dropdownlist and textbox in ajax

Last post 07-06-2009 2:27 AM by girish dagdiya. 4 replies.

Sort Posts:

  • problem with dropdownlist and textbox in ajax

    07-04-2009, 11:42 AM

     hi,

    i want to call a javascript function on selected index changed of dropdownlist in ajax page.

     

     <script type="text/javascript">
        
                    function moveRight(){
                     document.getElementById('TextBox1').style.position= 'absolute';
                       document.getElementById('DropDownList1').style.position= 'absolute';
                  var obj=document.getElementById('TextBox1');
                  var x=document.getElementById('DropDownList1').offsetLeft;
                  var y=document.getElementById('DropDownList1').offsetTop;
                alert(x);
                  obj.style.left=x;
                   obj.style.top=y + 'px';
       
    }
    
    
    
        </script>
    </head>
    
    <body>
        <form id="form1" runat="server">
       <asp:ScriptManager ID="ab" runat="server"></asp:ScriptManager>
       <asp:UpdatePanel ID="up" runat="server">
            <ContentTemplate>
          <div>
            <asp:DropDownList ID="DropDownList1" runat="server" 
                onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
                AutoPostBack="True" Width="185px" Height="18px" AppendDataBoundItems="True" >
                <asp:ListItem>Nokia</asp:ListItem>
                <asp:ListItem>LG</asp:ListItem>
                <asp:ListItem>Samsung</asp:ListItem>
                <asp:ListItem>Motorola</asp:ListItem>
            </asp:DropDownList>
        
        </div></ContentTemplate></asp:UpdatePanel>
        <p>
    
        <asp:TextBox ID="TextBox1" runat="server" Width="164px" Height="16px"
            Visible="false" style="top: 98px; left: 130px; position: absolute;"></asp:TextBox>
        </p>
    <p>
    
         </p>
        </form>
    </body>
    
    
    
     protected void Page_Load(object sender, EventArgs e)
        {
           
            DropDownList1.Items.Add("Other");
    
        }
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            
            if (DropDownList1.SelectedItem.Value  == "Other")
            {
                TextBox1.Visible = true;
                string scr = "<script type='text/javascript'>";
                scr += "alert('hi');";
                scr += "moveRight();";
                ScriptManager.RegisterClientScriptBlock(DropDownList1, typeof(DropDownList), "moveRight", scr, true);
                      
    
    
            }
            else
                TextBox1.Visible = false;
    
        }


     

    Filed under:
  • Re: problem with dropdownlist and textbox in ajax

    07-04-2009, 2:43 PM
    • Star
      8,667 point Star
    • Pawan_Mishra
    • Member since 03-13-2008, 11:37 AM
    • Bangalore
    • Posts 1,266

    Hi

    You can do this by directly attaching an event handler for the change event of dropdown list control and in that handler you can do the custom client side logic . All these can be done in client side itself :-

    function pageLoad()
    {
        $addHandler($get('<% = <id of the dropdown list control>.ClientId %>'),'change',onChange);
    }

    function onChange(evt)
    {
        //here you can put the custom javascript functionality
    }

    Regards
    Pawan Mishra

    Too many eyes doesn't make a good code !!!

    .Net 360°
  • Re: problem with dropdownlist and textbox in ajax

    07-04-2009, 4:56 PM
    • Contributor
      5,624 point Contributor
    • RatheeshC
    • Member since 04-25-2008, 6:05 PM
    • Posts 1,198

    Hi,

    Add Onchange event to ypur dropdown like this

    <asp:DropDownList ID="DropDownList1" runat="server"   
    onselectedindexchanged="DropDownList1_SelectedIndexChanged" onchange= moveRight();   
    AutoPostBack="True" Width="185px" Height="18px" AppendDataBoundItems="True" >

     

    Thanks

    Thanks
    Ratheesh

    Please mark it as answer if it resolves your issue.
  • Re: problem with dropdownlist and textbox in ajax

    07-05-2009, 7:29 AM

     hi,

    thanks Pawan Mishra for quick reply.But it's not solved yet.Because i want to keep textbox visible=false and after clicking ONLY on "Other",i want to show that textbox.Without scriptmanager and updatepanel i can do that but when i use updatepanel Textbox is not showing.

    Thanks in advance.


     

    Filed under:
  • Re: problem with dropdownlist and textbox in ajax

    07-06-2009, 2:27 AM
    Answer

    hi,

    the problem get solved.The problem was with registering client script.

    ScriptManager.RegisterClientScriptBlock(Page,this.GetType(),"script","javascript:fun()",true);

    this is correct and working.

    Thank you to all.

Page 1 of 1 (5 items)