Show hide ASP.Net AJAX BalloonPopupExtender using JavaScript

chandub

SOLVED CLOSED ACTIVE ANSWERED
User: chandub
Posted: on Mar 24, 2014 06:08 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 4948

I have two text boxes on the webform , first textbox contains boolen popup control it was appearing when ever it gets focus,after pressing tab focus is going to next control it doesn't have ballon pop up,but ballon popup is not disappering after loosing the focus ? how can i hide ballon pop up when its losses focus

plese once review my code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ajaxExample.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 runat="server">
   
    <title></title>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server"> 
        enter only numbers
        </asp:Panel>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="TextBox1" BalloonPopupControlID="Panel1" DisplayOnFocus="true">
        </asp:BalloonPopupExtender>

       
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
       
    </div>
    </form>
</body>
</html>

Azim

0 1

Reply
ANSWER
User: Azim
Replied: on Mar 24, 2014 07:12 AM
Report

Please refer this code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=TextBox1]').focusout(function () {
                $('[id*=BalloonPopupExtender1]').hide();
            });
            $('[id*=TextBox1]').focus(function () {
                $('[id*=BalloonPopupExtender1]').show();
            });
        });
    </script>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server">
            enter only numbers
        </asp:Panel>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="TextBox1"
            BalloonPopupControlID="Panel1" UseShadow="true" DisplayOnFocus="true">
        </cc1:BalloonPopupExtender>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Thank You.

Show hide ASP.Net AJAX BalloonPopupExtender using JavaScript

Company

Explore

Follow us

Contact Us