I have a hidden control (an asp.net label) and want to show it when a user clicks a button.
Here is the hidden control
<asp:Label ID="lblCityRequired" visible="False" runat="server" Text="Required if Country State are selected"></asp:Label>
Here is the javascript code
function showLabel()
{
$("#lblCityRequired").show();
}
function hideLabel()
{
$("#lblCityRequired").hide();
}
This only works when the label's visibility is not set to false. However I want the form to start up hiding the message. Is there something I am doing wrong? Should I just create a javascript function that starts up hiding the label via javascript?
Thanks in advance
You can hide it initally when dom is ready:
$(function(){
hideLabel();
})
Or, you can use css:
<style>#lblCityRequired{display:none;}</style>
Related
In our current scheme we have an Crystal Report that can be shown once a record has been saved/changed.
What we want to do is add a 'print' button to the main data management form - allowing the user to print an existing report "as is". However, I want to disable/hide the print button if the user changes any of the 20+ fields (these controls are a mixture of check, text, & pull-down boxes).
Without having to add code change events for EVERY control, is there a way (assuming javascript) to capture a change to any one of the controls and then hide/disable the print button until the changes have been saved?
Edit:
Using the answer offered by #Bosco, the below code is a sample of our solution:
<asp:DropDownList ID="TypeDDL" CssClass="dropDownList1 ChangeClass" runat="server"
<asp:TextBox ID="DescriptionTextBox" runat="server" class="descriptionText ChangeClass" TextMode="MultiLine"></asp:TextBox>
$(".ChangeClass").on("change", ManagePrintButton);
function ManagePrintButton() {
//debugger;
var btn = document.getElementById("btnPrintExport");
btn.style.display = "none";
}
You can use jQuery wildcard selectors.
Give you inputs same class names and bind the change event to them this way
$(".theClass").on("change");
Another way is to use the id
Let's say that the IDs starts with a particular text/character or ends with a particular text/character
$("[id^=theText]")
//This gets all the elements that the id starts with theText
$("[id$=theText]")
//This gets all the elements that the id ends with theText
also the JQuery documentation https://api.jquery.com/category/selectors/
I have two hidden fields for business and home address. They are updated to "true" on the event that the content for the specific textboxes are changed. However, because there are various fields within the div, I used jquery to get all objects of type text within the div. Basically what I'm trying to do is check if the text has changed and then update a hidden field value on my ascx form to true.
InitAddressOnChange: function () {
$('#divBusinessAddress input[type=text]').change(function () {
$("[id$='hiddenBusinessField']").val("true");
});
$('#divHomeAddress input[type=text]').change(function () {
$("[id$='hiddenBusinessField']").val("true");
});
}
Here are my hidden fields:
<asp:HiddenField ID ="hiddenBusinessField" runat="server" value="false"/>
<asp:HiddenField ID ="hiddenHomeField" runat="server" value="false"/>
I tried debugging in the browser but I'm having an issue figuring this out. Is there anything I'm doing wrong here? I'm fairly new to JQuery.
I have a checkbox (in ASP.NET) and want to enable/disable many ASP drop-down lists based on its checked attribute. Is it possible to do this using jQuery?
Here is my checkbox code:
<asp:CheckBox runat="server" ID="chb1" OnCheckedChanged="enablecheck(this,"#<%=ddl1.ClientID%>");" Checked="false" />
Here is my jQuery code:
$(function enablecheck(chk,ddl) {
$('[id$=chk]').on('click', function () {
if ($(this).is(":checked")) {
ddl.prop("disabled", false);
} else {
ddl.prop("disabled", true);
}
})
});
You could add a CSS class to the ddls you want to toggle in the code, using the CssClass property. These can be addressed in jQuery using
$('.myDdlCssClass').prop('disabled', true);
I'm not sure if ddls are rendered as pure select field or get some wrapping elements in asp. So actually
$('.myDdlCssClass select')
May be the correct selector.
I have a situation where I have no of Divs on my page , based upon the autorization I want to hide show the data in those Divs , Problem is Divs are not Hidden ,this is my client script code.
function ShowDiv(obj, condition) {
var dataDiv = document.getElementById(obj);
//alert(obj);
if (condition == true) {
dataDiv.style.display = "none";
}
else {
dataDiv.style.display = "block";
}
}
this is a sample code, when I call this code on button click
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" OnClientClick="ShowDiv('Div1','True');" Text="Button" />
by this code it does hide the div but gain displays it on postback.
also can I hide no of Div on one go. i.e now I'm using getelementbyid is there any grouping alowed in HTML.
Thanks
If its based on authorization you should do it on server side only. Add runat="server" to make the divs html server controls. Also give them ID. Then in your code behind check for authorization and set the hidden property accordingly.
you pass a string to the function, but "True" != true. you have to send a boolean like so:
OnClientClick="ShowDiv('Div1',true);"
I have some code on my ASP page which looks like this:
<asp:UpdatePanel runat="server" id="updatepanel1" UpdateMode="Conditional" onload="updatepanel1_Load" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:HiddenField id="sendingRequest" runat="server" Value="0" />
....
</ContentTemplate>
</asp:UpdatePanel>
I also have some javascript on my page which does this, to trigger the update of the updatepanel:
var sendingRequest = document.getElementById("<%=sendingRequest.ClientID%>");
sendingRequest.value = "1";
__doPostBack('<%= updatepanel1.ClientID %>', '');
Everything works fine up to now, but in my updatepanel1_Load event, I try to set the value back to "0" :
sendingRequest.Value = "0";
This value never gets updated and set back to 0 on the client after the postback, and I can't figure out why!
Can anyone help? Thanks
If you're having problems with a hidden field, you could use a TextBox instead. Hide the textbox with css (display: none;) to achieve similar results to a hidden field. Its not exactly pretty, but its a workable workaround.
Try to call registerstartupscript or something like that from server side. I can't remember exactly the method name but its part of page object. This will register any javascript you would like to execute after postback on the client side.
This similar scenario is done here successfully:
http://encosia.com/easily-refresh-an-updatepanel-using-javascript/
Ensure you are following the same steps - I can't see all of your code. Try with a label first to make sure it gets updated as a visible control. If that works then narrow it down with your hidden value to make sure the behavior isn't different for a hidden control.
I had an issue with three HiddenFields being set in Code-Behind, but their values were not set when polled from JQuery.
My issue turned out being that my Master Page uses an UpdatePanel, and in my ASP.Net Init event I was purposing that UpdatePanel with conditional rendering.
Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
mstr = CType(Master, Site)
'setup partial rendering so Log can update asynchronously
scriptManager = CType(mstr.FindControl("ScriptManager1"), ScriptManager)
scriptManager.EnablePartialRendering = True
scriptManager.AsyncPostBackTimeout = 28800
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).UpdateMode = UpdatePanelUpdateMode.Conditional
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).ChildrenAsTriggers = False
End Sub
The issue was that I forgot to then call update on my panel after setting the HiddenFields. I had to do this because my button was a partial-postback control (UseSubmitBehaviour=False)
hfParams.Value = paramlist.ToString()
hfForms.Value = formlist.ToString()
hfStartJob.Value = "True"
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).Update()