I am using a Panel in an ASP.NET webpage to hide or display a selection of control in response to a client side button click. Simple script toggles the visibility
<script>
function SetToAddSurvey() {
var x = document.getElementById("NewSurveyPanel");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I now need to toggle the display property on the server side following a database transaction. I know I can't use the code
NewSurveyPanel.visible = false;
as it will cause the control to not be rendered and the above jscript to fail when it is called next.
NewSurveyPanel.Attributes["display"] = "block";
also doesn't work.
Is there an easy solution for this?
Ta.
Try this
NewSurveyPanel.Attributes["style"] = "display: none";
or
NewSurveyPanel.Attributes["style"] = "visibility: hidden";
What this does is to render the opening tag like this:
<div ....... style="display: none" ....>
Use a CSS class:
.hidden {
display: none;
}
....
NewSurveyPanel.CssClass = "hidden";
Code Behind
NewSurveyPanel.Attributes["style"] = "display: block";
ASPX
<asp:Panel ID="NewSurveyPanel" runat="server">
test
</asp:Panel>
<asp:Button runat="server" OnClientClick="SetToAddSurvey(); return false;" />
<script>
function SetToAddSurvey() {
var x = document.getElementById("<%= NewSurveyPanel.ClientID%>");
alert(x);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Related
I have a div that displays loading symbol. I am setting visibility on change of a dropdown box. I want to set its visibility to false in C# after the SelectedIndexChanged method is complete.
Here is the div tag :
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage" >
<img class="loadingImg" src="../Images/ajax-loader.gif" />
</div>
Here is the jQuery function :
$(document).ready(function () {
//$('#loadingImage').hide();
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "block";
});
});
and this is how i am trying to set the visibility in C#
protected void selectSegment_SelectedIndexChanged(object sender, EventArgs e)
{
ckBLBusinessUnits.Visible = true;
loadingImage.Style["display"] = "none";
}
I tried various ways in C# like set visibility to false etc but nothing worked. Kindly help.
Change this:
loadingImage.Style["display"] = "none";
To this:
loadingImage.Style.Add("display", "none");
You can use hide and show methods to perform that action.
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage">
<img class="loadingImg" src="loading.gif" />
</div>
<asp:DropDownList ID="selectSegment" ClientIDMode="Static"
runat="server">
<asp:ListItem Value="0">none</asp:ListItem>
<asp:ListItem Value="1">display</asp:ListItem>
</asp:DropDownList>
JS
$(document).ready(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
if (this.value === "1") {
$("#loadingImage").show();
} else {
$("#loadingImage").hide();
}
});
});
The div tag was outside of the updatepanel, moving the div inside of the updatepanel resolved the issue.
I thought this would be a simple thing to accomplish but am having some issue. My initial asp.net markup for the server control looks like this:
<ucTextArea:UserControlTextArea ID="taRemarks" runat="server" />
However, in the code behind, I have a conditional statement that checks for user rights in order to enable this text field or not, something like this:
if (CurrentUser.AccountTypeID == 4 || CurrentUser.AccountTypeID == 6)
taRemarks.Attributes.Add("enabled", "");
else
taRemarks.Attributes["disabled"] = "true";
Above are two ways I have tried to accomplish this, but haven't worked when rendered in the browser. How can I disable this server control?
Edit: The UserControlTextArea.ascx is defined below:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UserControlTextArea.ascx.cs" Inherits="stuff....UserControlTextArea" %>
<script type="text/jscript" language="javascript">
$(document).ready(function () {
var counterLabel = $('#<%=lblCounter.ClientID %>');
var textArea = $('#<%=tbTextArea.ClientID %>');
var maxNumber = parseInt('<%=txtMaxCharacters.Value%>');
FieldCounter(textArea, counterLabel, maxNumber);
$(textArea).keyup(function () {
CheckFieldLength($(textArea), maxNumber);
FieldCounter(textArea, $(counterLabel), maxNumber);
});
});
</script>
<div id="OuterContainer" runat="server">
<asp:TextBox ID="tbTextArea" runat="server" TextMode="MultiLine" Width="100%"></asp:TextBox>
<span class="fieldLengthCounter">
characters left:
<asp:Label ID="lblCounter" runat="server"></asp:Label>
</span>
<input type="hidden" runat="server" id="txtMaxCharacters" />
</div>
Your question is unclear, but definitely its a UserControl and not a ASP.Net Textbox. So you can disable the textbox inside your UC like this:-
Approach 1 (Preferred):
Add a public property in your UserControl code-behind:-
public bool DisableMyTextbox
{
set { tbTextArea.Enabled = value; }
}
Then you can simply use this property to disable your textbox in Webform:-
UserControlTextArea.DisableMyTextbox = false; //or true to enable back.
Approach 2:
Find your textbox in UserControl class and then disable it:-
TextBox txt1 = (TextBox)SimpleUserControl1.FindControl("tbTextArea");
txt1.Enabled = false;
This is following my previous question.. How to reload parent page on closing PopUp window?
I tried a combination of things but could not make it work.. Sometimes the code behind executes no matter what i chose ie. "yes" , "no" or x(to close) , sometimes.. like the case with the following code.. the code behind never gets executed no matter what option i click..
<asp:Button ID="btnAccept" runat="server" Text="Accept" OnClientClick="return Refresh()" style="HEIGHT: 19px;background: #C0003B;color: white; " /> <asp:Button ID="btnReject" runat="server" Text="Reject" OnClientClick="Refresh()" style="HEIGHT: 19px;background: #C0003B;color: white;"/>
</div>
<script type="text/javascript">
function Refresh() {
var myBoolean = new Boolean();
myBoolean = confirm('Are you sure?');
if (myBoolean) {
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
return true;
}
}
else {return false;}
}
</script>
Have a look at this
function Refresh() {
var confirmed = confirm('Are you sure?');
if (confirmed) {
window.onunload = refreshParent;
return true;
} else {
return false;
}
}
function refreshParent() {
window.opener.location.reload();
}
Try this
function Refresh() {
var myBoolean = new Boolean();
if (confirm('Are you sure?')) {
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
return true;
}
}
else {return false;}
}
Don't use a server-side button. Those elements are meant to execute an action in the server.
So guess what? for executing the action on the server this needs to happen:
The browser submits the form making a POST request
The server parses the form data and identifies which button was pressed
The server calls the registered event handler for the button.
So, in your case I would cancel the onclick event of the button in client side. Or simpler... just use a normal HTML button.
<button id="btnAccept" onclick="Refresh()" style="HEIGHT: 19px;background: #C0003B;color: white; "> Accept </button>
I am developing a GIS web app (mapping) in C# ASP.net.
I have an Ajax TabContainer housing several TabPanels with a table. The table contains other content such as the map window, scale bar etc (all from the ESRI WebAdf toolkit).
Here's a slimmed down version of my table without the other content...
<table id="MainTable>
<tr>
<td>
<ajax:TabContainer runat="server" ActiveTabIndex="0" id="TabContainer" CssClass="ajax__tab_xp">
<ajax:TabPanel runat="server" HeaderText="Online Mapping Service" ID="TabPanel1">
</ajax:TabPanel>
<ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="Postcode">
</ajax:TabPanel>
<ajax:TabPanel ID="TabPanel3" runat="server" HeaderText="Coordinates">
<ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</td>
</tr>
</table>
On Postback at runtime my Tabcontainer sometimes dissapears. This issue is not browser specific.
So far I have tried with no success to...
Set Z-Index with Relative positioning for the TabContainer
Include a JQuery script to 'show' the TabContainer...
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#TabContainer").show();
});
</script>
Is there some C# I can include in the code behind along the lines of?...
Public void page_Load(object sender, EventArgs e)
{
TabContainer.show()
}
Fairly new to programming and trying to figure out how to 'always show' or 'always ontop' the TabContainer.
Thanks
I'm not sure if this is due to the fact that you cleaned your code before posting it here but you are missing tags.
The code on your aspx should look like this :
<AjaxToolkit:TabContainer ID="TabContainer" runat="server">
<AjaxToolkit:TabPanel ID="TabPanel1" runat="server">
<ContentTemplate>
Your asp/html code goes here
</ContentTemplate>
</AjaxToolkit:TabPanel>
</AjaxToolkit:TabContainer>
Ok, sorted this. There was an issue with the AJAX Toolkit not posting back client side...
<script language="javascript" type="text/javascript">
// Solution to sys.invalidoperationexception bug
Sys.Application.initialize = function Sys$_Application$initialize() {
if (!this._initialized && !this._initializing) {
this._initializing = true;
var loadMethodSet = false;
var initializeDelegate = Function.createDelegate(this, this._doInitialize);
if (document.addEventListener) {
loadMethodSet = true;
document.addEventListener("DOMContentLoaded", initializeDelegate, false);
}
if (/WebKit/i.test(navigator.userAgent)) {
loadMethodSet = true;
this._load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
initializeDelegate();
}
}, 10);
}
else {
/*#cc_on#*/
/*#if (#_win32)
loadMethodSet = true;
document.write("<script id=__ie_onload defer src=BLOCKED SCRIPTvoid(0)><\/scr" + "ipt>");
var deferScript = document.getElementById("__ie_onload");
if (deferScript) {
deferScript.onreadystatechange = function() {
if (this.readyState == "complete") {
initializeDelegate();
}
};
}
/*#end#*/
}
// only if no other method will execute initializeDelegate is
// it wired to the window's load method.
if (!loadMethodSet) {
$addHandler(window, "load", initializeDelegate);
}
}
}
Sys.Application._doInitialize = function Sys$_Application$_doInitialize() {
if (this._load_timer !== null) {
clearInterval(this._load_timer);
this._load_timer = null;
}
Sys._Application.callBaseMethod(this, 'initialize');
var handler = this.get_events().getHandler("init");
if (handler) {
this.beginCreateComponents();
handler(this, Sys.EventArgs.Empty);
this.endCreateComponents();
}
this.raiseLoad();
this._initializing = false;
}
Sys.Application._loadHandler = function Sys$_Application$_loadHandler() {
if (this._loadHandlerDelegate) {
Sys.UI.DomEvent.removeHandler(window, "load",
this._loadHandlerDelegate);
this._loadHandlerDelegate = null;
}
this._initializing = true;
this._doInitialize();
}
</script>
on a ascx page I have a tinymce editor and a button
<asp:TextBox ID="txtName" runat="server" Width="100%" ></asp:TextBox>
<test:tinymceextender runat="server" ID="TinyMceExtender" TargetControlID="txtName" Theme="Full"> </test:tinymceextender>
<asp:Button ID="btnSave" Text="Save" Enabled="false" runat="server" />
I want to check if, textbox is null, then btnsave should be disable, if textbox is not null its should be enable, for the first time its working(because i am checking it on Page_Load), as I am entering some text and deleting that text using backspace btn is in enable mode only. I tried it to do with onKeyUp, onKeyPress but its working working for TinyMCE
these 2 js I used but its not working
$(document).ready(function () {
document.getElementById('<%=btnSave.ClientID %>').disabled = true;
var my_editor = tinymce.get('<%=txtName.ClientID %>');
if ($(my_editor.getBody()).text() == '') {
$("#<%=btnSave.ClientID %>").attr('disabled', 'disabled');
}
else if ($(my_editor.getBody()).text() != '') {
$("#<%=btnSave.ClientID %>").removeAttr('disabled');
}
});
window.onload = function () {
document.getElementById('<%=btnSave.ClientID %>').disabled = true;
}
function ENABLE_BTN() {
var EN = tinymce.get('<%=txtName.ClientID %>');
if (EN == '') {
document.getElementById('<%=btnSave.ClientID %>').disabled = true;
} else {
document.getElementById('<%=btnSave.ClientID %>').disabled = false;
}
}
calling onkeydown="ENABLE_BTN() on txtName
on F12: my textbox code is looking something like this...
<fieldset>
<input id="BasePage_txtName" type="text" style="width: 100%; display: none;" name="BasePage$txtName" aria-hidden="true">
<span id="BasePage_txtName_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="BasePage_txtName_voice">
<span id="BasePage_txtName_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
<table id="BasePage_txtName_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 100px;">
<tbody>
<tr class="mceFirst" role="presentation">
<tr class="mceLast">
</tbody>
</table>
</span>
</fieldset>
I would use the keyup event to check if the contents are empty like this. Edit: updated to use TinyMCE's weird eventhandler methods.
$(function () {
tinyMCE.init({
// adapt accordingly
mode : "exact",
theme : "simple",
elements : "txtName",
setup : function(ed) {
ed.onInit.add(function(ed) {
bindKeyUp(ed);
});}
});
});
function bindKeyUp(ed) {
if (tinyMCE.activeEditor) {
ed.onKeyUp.add(function() {
$('#btnSave').attr('disabled', !(textBoxEmpty()));
});
}
}
function textBoxEmpty() {
var contentLength = tinyMCE.get('#txtName').getContent();
if (contentLength.length) {
return true;
}
return false;
}
$(function () {
tinyMCE.init({
// adapt accordingly
mode : "exact",
theme : "simple",
elements : "txtName",
setup : function(ed) {
ed.onInit.add(function(ed) {
bindKeyUp(ed);
});}
});
});
function bindKeyUp(ed) {
if (tinyMCE.activeEditor) {
ed.onKeyUp.add(function () {
var contentLength = removeHTMLTags(tinyMCE.get('<%=txtName.ClientID %>').getContent());
if (contentLength.trim().length) {
document.getElementById('<%=btnSave.ClientID %>').disabled = false;
}
else {
document.getElementById('<%=btnSave.ClientID %>').disabled = true;
}
});
}
}