am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
Button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
the div is set to runat server so that I can change its visibility also through code.
Use the onClientClick for the asp button. Then make the jquery function that you ahve called BtnSend_Click
If you want to do it via Client side:
jQuery
function BtnSend_Click () {
$('#<%= loading.ClientID %>').toggle("slow");
}
ASP Button
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onClientClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
If you want to do it via the server:
C#
protected void BtnSend_Click(object sender, EventArgs e){
loading.Visibility = 'visible' //not sure on syntax to show it in code behind off the top my head
}
ASP Button
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
The ASP.Net AJAX library has an UpdateProgress control that sounds like it would fit your needs.
I've tried adding in a prevent default, as the code as described below would postback before the loading div was shown otherwise.
<script type="text/javascript">
$(document).ready(function (e) {
$('#<%= BtnSend.ClientID %>').click(function (e) {
e.preventDefault();
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Another thing I've noticed is you have set Visible="false":
<div id="loading" class="Loading" runat="server" visible="false">
This means the div doesn't exist as its not output from the server side. Look in the view source when the page loads, it wont be there and hidden, its just not there. Remove the visible="false" and use CSS to hide it to start off with.
Related
I am using Visual Studio 2015 to create a ASP.NET web site. I have a DIV that is hidden by default and I am trying to display it if the user checks a check box. I am wondering if there is a way using C# to immediately display the DIV as soon as the user checks the box. I can't seem to find a way to recognize the change in state without the form being first submitted. I can easily achieve this using JavaScript however this is for a uni assignment and requires functionality to be implemented in C#.
This is the HTML for the checkBox:
<form id="form1" runat="server">
Limit Stations To My Location<asp:CheckBox ID="limitOptions" runat="server" onClick="toggleOptions()" />
<br /><br />
<div id="locationOptions" runat="server" hidden="hidden">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
<asp:Button ID="updateList" runat="server" Text="Button" OnClick="updateList_Click"/>
</div>
Any help would be greatly appreciated.
You can do this with C# in code behind. Add a OnCheckedChanged event to the CheckBox and set the AutoPostBack to true and handle the change. Note that a Panel becomes a div in HTML.
<asp:CheckBox ID="limitOptions" runat="server" OnCheckedChanged="limitOptions_CheckedChanged" AutoPostBack="true" />
<asp:Panel ID="locationOptions" runat="server" Visible="false">
Radius (KM) <asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</asp:Panel>
However this causes a PostBack, so just using JavaScript could be a better option.
<asp:CheckBox ID="limitOptions" runat="server" onclick="toggleOptions()" />
<div id="locationOptions" runat="server" style="display: none">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</div>
<script type="text/javascript">
function toggleOptions() {
var id = '#<% =locationOptions.ClientID %>';
if ($(id).css('display') == 'none') {
$(id).slideDown('fast', function () { });
} else {
$(id).slideUp('fast', function () { });
}
}
</script>
I have a user control which acts as a form for updating student records. This user control is used in a page called students update. After the update is sucessfull, I want to disable the update button. After that, if the user changes any text, the update button should be enabled back. I am trying this but it is not working. I have all my textboxes autopost property to true. I am able to disable, but I am not able to enable it again if user starts entering new text in the text box. I am using the textbox.textchanged event to achieve this.
A Jquery approach :
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" Enabled="false" />
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#<%= TextBox1.ClientID %>").keyup(function () {
$("#<%= Button1.ClientID %>").attr("disabled", $(this).val() == "");
});
</script>
</body>
Or you can do this server-side :
<asp:textbox id="TextBox1" runat="server" autopostback="True" ontextchanged="TextBox1_TextChanged"></asp:textbox>
<asp:button id="Button1" runat="server" enabled="False" text="Button" />
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
Button1.Enabled = !String.IsNullOrEmpty(TextBox1.Text);
}
#Hoangnnm solution looks OK. Just include the later jQuery Lib, e.g. version 1.9.0 instead of 1.4.1 which is quite obsolete:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
I've got an issue with a messagebox user control. I wish for a control which can be given a message and the user can dismiss with a click of a button, which can be inserted into many places.
I have applied the javascript into the messagebox control in a hope i can keep everything to do with the messagebox centralized, however when browsing to a page with the messagebox control added i get this error:
CS1061: 'ASP.components_messagebox_ascx' does not contain a definition for 'HideBox' and no extension method 'HideBox' accepting a first argument of type 'ASP.components_messagebox_ascx' could be found
The control is as thus:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("PNL_Messagebox").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
I'm fairly certain i've done this right but obviously i've done something wrong if it's not working. Any light on the situation at all would be grand.
Addendum: If i comment out the Button control the page loads fine, and the script loads fine too (Viewed page source)
The control ID's you're referencing are not the client ID's, but server ID's. So retrieve the 'ClientID' from the control in the JavaScript function and second, use the 'OnClientClick' property to show the JavaScript message.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
Onclick looks for a server side function, and not javascript. either, define your button as <input type='button' onclick='HideBox' or change the current code to:
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
return false;
}
</script>
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="return HideBox()" runat="server" />
returning false in OnClientClick, prevents the asp button from postback.
Edit: as Monty mentioned, your panel control's client id is not correctly set in your code.
Does someone know how to close Ballon Popup Extender from client side?
Everything is fine but since I set up BPE to display on mouse hover it is really impratical that it don't have any close or hide method on mouse out I tried:
function hideElement() {
document.getElementById(ID).style.display = 'none';
}
function hideControl() {
document.getElementById('<%=ID.ClientID%>').style.visibility = "hidden";
return false;
}
I hooked up above methods to one of divs onmouseout, I can hide any control on the page but not BPE and I tried to do the same with panel that BPE is targeting but nothing happend..
Is there something I missed or is BPE just like that?
This is actually not too tough. You can create a method like this on your page:
<script type="text/javascript">
function hidePopup() {
var popupObject = document.getElementById("<%= Panel1.ClientID %>");
popupObject.BalloonPopupControlBehavior.hidePopup();
}
</script>
And then call that function from your onmouseout event of the control that is your TargetControlID for the BalloonPopupExtender (in my example Panel1). Here's the code I used to test that javascript:
<asp:Panel ID="Panel1" runat="server" BackColor="#009900" Height="50px"
Width="50px" onmouseout="hidePopup();">
</asp:Panel>
<asp:BalloonPopupExtender ID="Panel1_BalloonPopupExtender" runat="server"
CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True"
DynamicServicePath="" Enabled="True" ExtenderControlID=""
TargetControlID="Panel1" BalloonPopupControlID="junk">
</asp:BalloonPopupExtender>
<div id="junk">
Hey! Here's some stuff!
</div>
Exactly what I was looking for. But instead of all the extra javascript, just put onmouseout="BalloonPopupControlBehavior.hidePopup();" in the control.
I made some improvements to jadarnel27's answer because I have multiple controls each with their own balloon extender.
<asp:Image runat="server" ID="imgHelp1" ImageUrl="images/help_16x16.png" />
<ajaxToolkit:BalloonPopupExtender ID="imgHelp1_BalloonPopupExtender" runat="server"
CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True"
DynamicServicePath="" Enabled="True" ExtenderControlID=""
TargetControlID="imgHelp1" BalloonPopupControlID="help1" />
<div id="help1">Help text goes here</div>
Then in the code behind
if (!Page.IsPostBack) {
imgHelp1.Attributes.Add("onmouseout", "document.getElementById(\"" + imgHelp1.ClientID + "\").BalloonPopupControlBehavior.hidePopup();");
}
This way we eliminate the need for a javascript function completely and allow for more controls on the same page.
I have a simple JQuery enabled ASP.NET page:
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="accordion">
<h3><a id="Accordion1" href="#">Accordion Panel 1</a></h3>
<div>
A form input...
<asp:Button id="btnSubmit" runat="server" onclick="btnSubmit_Click" />
</div>
<h3><a id="Accordion2" href="#">Accordion Panel 2</a></h3>
<div>
Some content...
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
If you'll notice, I'm using an UpdatePanel also.
btnSubmit_Click event does something like this:
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Some MySql INSERT, etc.
}
Now what I want to do is for server-side btnSubmit_Click to trigger JQuery to "click" Accordion Panel 2 (so it will open Accordion Panel 2 and close 1). How to do this?
UPDATE: Sorry guys I forgot to mention earlier that It's got an UpdatePanel
Oh well, I just used the "change the value of a hiddenfield after postback then let jquery read that hiddenfield" approach. Thanks guys!
Jquery:
var tag = $("#contentBody_hfTag1").val();
if (tag=="1") { $(".Accordion").accordion({ active: 1 }); }
else { $(".Accordion").accordion({ active: 0 }); }
.aspx
<asp:HiddenField ID="hfTag1" ClientIDMode="Predictable" Value="0" runat="server" />
C#
protected void btnMyButton_Click(object sender, EventArgs e)
{
hfTag1.Value = "1";
}
You can't. Jquery runs on the client, your handler is on the server. You will need to trigger the event on the client when the page reloads after the post back.
You can't do that as Jquery works on client side, from a server side event, as the page reloads. And the state of the accordion will be lost. So what you can do is, instead of making a post back, you can do the same work in a Jquery AJAX call on the button click to do whatever you want and then close the accordion 1 and show accordion 2.
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<i88:InlineScript runat="server">
<script type="text/javascript">
$('Accordion2').click()
</script>
</i88:InlineScript>
<asp:Button ID="cmd" runat="server" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
You can put inlineScript which will get Executed every time you update the Panel.
You can also use jQuery.Trigger(); for other event's.