The current code I am working on is a mess. Currently, I have an aspx page that has some javascript and sets a tooltip for various asp:buttons that are on an ascx page (not the current aspx). It looks like this:
function setTooltips() {
$("[id*='btnSave']").mousemove(function (ev) { ButtonToolTip(ev, this, "Click to save"); });
$("[id*='btnClear']").mousemove(function (ev) { ButtonToolTip(ev, this, "Clear fields"); });
// more button tooltips set.
}
In the ascx page, I also have an asp:label. I'm creating a javascript method to display an alert based on the visibility of this label. I'm having trouble finding the control and its visibility.
Here is what the asp label code looks like:
<asp:UpdatePanel runat="server" ID="upnl_alert" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="lbl_alert" runat="server" Text="There are several issues found.<br /><br />" Visible="false" />
</ContentTemplate>
</asp:UpdatePanel>
Is there a way to check the visibility of the asp label so that I can implement the function I just wrote for the alert?
I have tried:
if (document.getElementById('lbl_alert').style.visibility == "visible")
but I am getting DOM exception - failed to execute.
Thanks in advance for the help.
have an aspx page that has some javascript and sets a tooltip for various asp:buttons that are on an ascx page (not the current aspx).
Well, not quite!!! Context here matters.
Any "user" control built and dropped into any page?
the markup, the controls, and javascript and whatever else that ascx control has? It is placed in your existing aspx page. So, no, the controls are NOT in some other page.
better to state you have a user control dropped into a existing page, and, thus I want to select/use/enjoy/hide/show or do whatever with some of the buttons that the user control has.
Like all pages, most controls will often receive the current page class, or namespace as a prefix. And keep in mind, what happens if you drag that user control 2 or 4 times into the existing page? Then what do the buttons "id" become? I mean, the buttons can't have the same id, and yet it's perfect legal to drop in the user control multiple times, and each time, it will pull into the current page that markup.
So, say a super simple user control (ascx) is like this:
code behind for this UC (button click)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Me.Label1.Text =
$"control id = {Me.ClientID} <br/>
Button ID = {Button1.ClientID} <br/>
LableID = {Label1.ClientID}"
End Sub
Ok, so now lets create a new blank page, and drag + drop in the above.
We now have this:
<uc1:UserButton runat="server" id="UserButton" />
<br />
<br />
<uc1:UserButton runat="server" id="UserButton1" />
<br />
<asp:Button ID="Button1" runat="server" Text="JavaScript - get Label 1"
OnClientClick="gettest();return false"
/>
<script>
function gettest() {
// var sLbl = '<%=UserButton.ClientID + "_Label1" %>'
var sLbl = 'UserButton_Label1'
var lbl1 = document.getElementById(sLbl)
sResult = "Value of label1 in control is \n" + lbl1.innerText
alert(sResult)
}
</script>
So, since I dropped in the UC two times?
then how do the lables, and buttons get seperated out?
Simple:
The controls "inside" each control are prefixed with the "id" you give the user control, and THEN a "_" and THEN the control inside.
So, note close the js code I used:
// var sLbl = '<%=UserButton.ClientID + "_Label1" %>'
var sLbl = 'UserButton_Label1'
var lbl1 = document.getElementById(sLbl)
sResult = "Value of label1 in control is \n" + lbl1.innerText
alert(sResult)
So, when I run the above, I thus get this:
So you need to prefix the control you want inside of the ascx page with the "id" of the control name used in the CURRENT page!
That's why I stated context matters here. the ASCX page does NOT matter, what matters is the name of the "UC" control used on the current page, since WHEN such controls are dragged + dropped into a existing page, then the controls for that UC control are prefixed with the "id" of the user control.
So, to be clear:
The controls are NOT in the other page, and that's really only a consdieration and view during design time.
At run time, those ascx controls are pulled + injected + rendered in the CURRENT page. Hence you can/have to prefix the controls in that ascx page with the "id" of the UC control used when "dropping" that control into any web page you like.
User controls are fantastic, since they represent re-usable controls, but at the end of the day, such controls are rendered in the current page.
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 a basic web forms page that has two hidden fields, whose values are set inside a jQuery method after receiving results from Bing Maps. Basic structure is this:
<asp:HiddenField runat="server" ID="hvLatitude" ClientIDMode="Static" />
<asp:HiddenField runat="server" ID="hvLongitude" ClientIDMode="Static" />
Here is a snip of the Javascript (cut out the Bing Maps call) that sets the hidden fields:
if (results.resourceSets[r].resources[re].geocodePoints[gp].usageTypes[u] == "Route") {
console.log('found it!');
var coords = results.resourceSets[r].resources[re].geocodePoints[gp].coordinates;
console.log(coords);
var lat = $("#hvLatitude");
var lng = $("#hvLongitude");
//make sure it only gets set once
if (lat.val().length == 0 || lng.val().length == 0) {
lat.val(coords[0]);
lng.val(coords[1]);
console.log('values set!');
}
}
When the code runs, my standard postback occurs and the hidden values aren't present - I've checked the fields themselves and looked inside Request.Forms, but they are empty strings. Tried ClientIDMode="Static" and Auto with no luck. The weirdest part of all is, if I do $("#hvLatitude").val() in the console (since Visual Studio is waiting on me to move a from a break point) and the value is there! It's the most confusing thing I've ever seen.
Any suggestions? No Javascript errors are present on the page, so I'm at a complete loss at this point.
Check if these two hidden fields are inside the page form, and check from network tab in developer panel if their value posted back, also if you change their value in the postback function, does it change at client side?
Try this:
var lat = $("#" + '<%= hvLatitude.ClientID %>');
var lng = $("#" + '<%= hvLongitude.ClientID %>');
...
Given
<asp:Label ID="lbldistance" runat="server"></asp:Label>
I am assigning it the value with:
var distance = response.rows[0].elements[0].distance.text;
document.getElementById('<%=lbldistance.ClientID%>').innerHTML=distance;
I want to assign lbldistance value in textbox
protected void btnValue_Click(object sender, EventArgs e)
{
txtJSValue.Text = lbldistance.Text;
}
but when i click the btnValue, lbldistance value disappears and i don't see the value in the TextBox..
I am afraid you cannot do that with a label. In ASP.NET state is kept in ViewState across postback. An ASP.NET <asp:Label> is rendered into an HTML span and a span does not have ViewState. Therefore, when you change the innerHTML of the label, you are actually changing the innertHTML of the span tag. Once you press the button, the page is posted to the server where the Label is constructed and it is constructed with the initial text, NOT the one you think it should since it was changed for a span. This (not keeping ViewState for a label), I think, is done for a good reason:
An HTML label should display something to the user and it is not meant to be changed by the user so there is no point in keeping the state across postback.
To accomplish what you want, use a hidden field like this:
<asp:HiddenField ID="HiddenField1" runat="server" />
Your javascript:
var distance = response.rows[0].elements[0].distance.text;
// Assign distance to your label so it shows on the page
document.getElementById('<%=lbldistance.ClientID%>').innerHTML=distance;
// Assing distance to hidden field so you can get it on the server side
document.getElementById('<%=HiddenField1.ClientID%>').value = distance;
Here is how to get the value on the server side:
txtJSValue.Text = this.HiddenField1.Value;
I am not sure why you are going all the way to the server to change the Text of the txtJSValue textbox. You can do that easily on the browser side the same as you are setting the label:
document.getElementById('<%=txtJSValue.ClientID%>').value = distance;
I have an asp.net page with a label on it. The label has no text.
<asp:Label ID="Label1" runat="server"></asp:Label>
At some point, I call a javascript function that adds some content to the label, as follows:
function myFunc() {
label = document.getElementById("Label1");
list = document.getElementById("list");
label.innerHTML = list.innerText;
}
After that function is done, I click a button on the page, that calls its onclick event:
protected void Button1_Click(object sender, EventArgs e)
{
string a = Label1.Text;
}
For some reason, the Label1.Text is still empty. Why? Is there any way I could fix this?
Thanks.
Because the value doesn't get posted to the code-behind.
No matter how much WebForms tries to hide this, the only data that gets posted from a web page to the server is data that's in form elements. What WebForms does with things like label texts is stuff them into an input type="hidden" as one big serialized base-64 encoded string. (It calls this "view state" but it's really just a hidden form element.)
Changing the page markup doesn't change anything server-side because page markup isn't posted to the server.
What you can do is create a form element and change that along with the markup. Something as simple as:
<asp:HiddenField runat="server" ID="Hidden1" />
Whenever you change the markup in JavaScript, also change that value:
label = document.getElementById("Label1");
hidden = document.getElementById("Hidden1");
list = document.getElementById("list");
label.innerHTML = list.innerText;
hidden.value = list.innerText;
This will be posted back to the server, since it's a form element. Then you can access the value server-side:
string a = Hidden1.Value;
ID="Label1" for ASP.NET is server side, but for javascript we need a client side ID ie "<%=Label1.ClientID%>"
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()