i am working on a webpage ,on that i have some fields and through that want to generate balloon popup on hover.The build is getting successful but the balloon popup is not visible at run time please help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<table><tr><td>First Name:</td><td><asp:TextBox ID="txtfirst" runat="server"></asp:TextBox></td></tr>
<tr><td>Middle Name:</td><td><asp:TextBox ID="txtmiddlename" runat="server"></asp:TextBox></td></tr>
<tr><td>Last Name:</td><td><asp:TextBox ID="txtlast" runat="server"></asp:TextBox></td></tr>
</table>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="txtfirst" BalloonPopupControlID="pan1" BalloonSize="Medium" BalloonStyle="Rectangle" DisplayOnMouseOver="true" UseShadow="true">
</cc1:BalloonPopupExtender>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" TargetControlID="txtmiddlename" BalloonPopupControlID="pan2" BalloonSize="Small" BalloonStyle="Cloud" DisplayOnMouseOver="true" >
</cc1:BalloonPopupExtender>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender3" runat="server" TargetControlID="txtlast" BalloonPopupControlID="pan3" UseShadow="true" DisplayOnFocus="true" CustomClassName="oval" CustomCssUrl="~/CSS/Custom.css">
</cc1:BalloonPopupExtender>
<asp:Panel ID="pan1" runat="server">
Enter your First Name
</asp:Panel>
<asp:Panel ID="pan2" runat="server">
Enter your Middle Name
</asp:Panel>
<asp:Panel ID="pan3" runat="server">
Enter your Last Name
</asp:Panel>
</div>
</form>
</body>
</html>
From looking at the HTML code, it looks like you are missing a tag that allow you to use the balloon stuff.
include the following after the form tag;
<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>.
I am not familiar with the library you are using but this link may help if the above doesn't work.
http://www.codeproject.com/Questions/409451/how-to-use-balloonpopupextender-ajax
Related
I have a textbox in my asp.net that accepts different values, I wrote a script that every time I press F5 button,the values in textboxes be cleaned.When I run the code and press F5,the textboxes values exist. How can I solve this?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="wellDesigned0428._default" %>
<!DOCTYPE html>
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/StyleSheet1.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="body">
<div class="content ">
<asp:TextBox ID="txtCodePers" runat="server" CssClass="textbox" AutoPostBack="True" OnTextChanged="txtCodePers_TextChanged" MaxLength="4" ></asp:TextBox>
<asp:TextBox ID="txtName" runat="server" CssClass="textbox"></asp:TextBox>
</div>
</form>
<script type="text/javascript">
document.onkeydown = fkey;
document.onkeyup = fkey;
document.onkeypress = fkey;
function fkey(e) {
if (e.keyCode == 116) {
alert("f5 pressed");
document.getElementById("txtCodePers").value = "";
document.getElementById("txtName").value = "";
}
}
</script>
</body>
</html>
I think the issue is the id that you are using txtCodePers, it's the id from server side. Either set the clientid or check what is the id for the txtCodePers using vew source.
More than this, I would not recommend you to override the default behavior of f5 which is refresh. What if user users mouse? or uses the browser button for refresh.
The ClientID of your TextBox is not the same as given in the ID-property. So your javascript will not find the elements.
You can either use the ClientID in your script or in your simple case add the ClientIDMode-property to your textboxes:
ClientIDMode="Static"
This will result in the same ClientID as your ID and you don't have to change your javascript.
I have an <asp:Panel> that is hidden with css display: none; and I'd like to show the panel when I have an error. Setting the style to 'block' in the javascript isn't working.
document.getElementById('<%= UxErrorPanel.ClientID %>').style.display = 'block';
<asp:Panel CssClass="alert alert-danger hidden" ID="UxErrorPanel" runat="server">
<asp:Label runat="server" ID="UxLabelErrorHeader" Text="Unable to connect to the Stripe payment provider"></asp:Label>
<br />
<asp:Label runat="server" ID="UxLabelErrorMessage"></asp:Label>
</asp:Panel>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function HidePanel() {
document.getElementById('<%= pnlMain.ClientID %>').style.display = 'block';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnPushMe" runat="server" OnClientClick="HidePanel(); return false;" Text="Push Me" />
<asp:Panel ID="pnlMain" runat="server" style="display: none;">
<label>Going to be hidden, soon.</label>
</asp:Panel>
</div>
</form>
</body>
</html>
This was me just playing around. But I think you can take this HTML/JS and get your own solution.
Edit: To add some more context with the change... I've had similar issues with CSS classes hiding an element via visibility attribute rather than display, which is why I set the style="display: none;" on the Panel. Note, IntelliSense might try to tell you this is not an attribute you can set, but just ignore that. ASP controls can be a pain, sometimes.
If you're using jQuery, you can just use .toggle() or. fadeToggle() for some extra animations.
Any one please tell me how to set the value of textbox.
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value =ExtraFvalue;
}
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
It is not working
I don't think that you are a million milles off to be honest, I have taken your code and put it into a web form with a button that can be clicked to call the function and it works, without seeing your mark up it will be difficult to diagnose but it should look something like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value = ExtraFvalue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" onclick="moreFieldsEditFunction('TEST', 'TEST2')" value="Click Me" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
This should work.
In html file to redirect a page using Javascript i used like this
window.location.href = "http://www.google.com/";
Its working fine. But when i tried in .aspx it is not working
Below is my code. Thanks in advance
<head runat="server">
<script type="text/javascript">
function PageRedirect() {
window.location.href = "http://www.google.com/";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="PageRedirect()"/>
</form>
Try this:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="PageRedirect(); return false;"/>
This is code for Firefox.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Hidden1" type="hidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Popup" />
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = "Hello";
Button1.Attributes.Add("onClick", "javascript:InvokePop('" + TextBox1.ClientID + "');");
}
PopupWin.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox><br />
<br />
<input type="button" id="btnReturnValue" value="Return value back" onclick="ReturnValue();" />
</div>
</form>
</body>
</html>
pop.js:
function InvokePop(fname)
{
val = document.getElementById(fname).value;
retVal = window.open("PopupWin.aspx?Control1=" + fname, 'Show Popup Window', 'height=90,width=250,resizable=yes,modal=yes');
retVal.focus();
}
function ReturnValue()
{
var newValue = document.getElementById("txtValue").value;
if ((window.opener != null) && (!window.opener.closed))
{
window.opener.document.getElementById("TextBox2").value = newValue;
}
window.close();
}
In this case I click button on Default.aspx page and open Popup.aspx as popup window. I enter some value to text box in Popup.aspx and press button. The new value appears in second text box on Default.aspx page.
That works, but how can I pass the new value entered in Popup.aspx page to some handler in Default.aspx page and use it further? For example, I can have another ASPX button on Default.aspx page and when I click it I can use the value entered in Popup.aspx page.
Well what you can do is the following:
Add a hiddenField on the first page. Im calling it "hfPopupValue".
In pop.js u are currently doing this:
window.opener.document.getElementById("TextBox2").value = newValue;
You can change this to:
window.opener.document.getElementById("hfPopupValue").value = newValue;
Afterwards you can just read the value from the hiddenField.
This should solve your problem.
Have you thought of using jQueryUI's Dialog, which lets you keep all controls on the same page, meaning cleaner code.
It also doesn't look as nasty as a JavaScript popup window.