The desired effect is that on page load the label does not display but when the user clicks the check box the label displays. This small code sample is just a sample to illustrate the issue. The code will always return an object reference exception from javascript when the Visible property of the label is set to false. If that line is commented out, it will execute correctly with no object reference exceptions but the label should be hidden at page load. This application does use master pages which is why were are passing the ClientIDs to the javascript Toggle function.
protected void Page_Load(object sender, EventArgs e)
{
this.chkSelect.Attributes.Add("onClick", "Toggle('" + this.lblAdd.ClientID + "', '" + this.chkSelect.ClientID + "')");
this.lblAdd.Visible = false;
}
<script type="text/javascript">
function Toggle(lblAdd, chk) {
var ctrlAdd = document.getElementById(lblAdd);
var ctrlChk = document.getElementById(chk);
if (ctrlChk.checked == true) {
ctrlAdd.style.display = 'inline';
}
else {
ctrlAdd.style.display = 'none';
}
}
</script>
<asp:Label ID="lblAdd" runat="server" Text="Add" Font-Size="8pt" ForeColor="Blue"> </asp:Label>
<asp:CheckBox ID="chkSelect" runat="server" Text="Check Box1" /><br />
How can we hide that label in Page_Load so we don't get object reference errors from Internet Explorer?
Thanks...
the Visible property does not render the HTML if set to false, that's why you get a null reference (in other words, ASP.NET's Visible is nothing to do with the display CSS property - it actually toggles whether an element is rendered in the HTML code or not.). Instead assign a CSS class on page load that defines display: none, then remove that class on click with javascript
Related
I have one div in which the value is added dynamically using asp.net code behind. I want to use this value in my jQuery code but the alerts shows the value as undefined. The div displays dynamic dates like this:
<div id="test" runat="server"></div>
protected void dpchange_SelectedIndexChanged(object sender, EventArgs e)
{
test.InnerHtml = Label1.Text;
}
Here is the jQuery code in which I am trying to access the value
$('#addDialog').dialog({
autoOpen: false,
width: 470,
buttons: {
"Add": function() {
alert($("#test").text());
alert($("#test").html());
alert($("#test").val());
var eventToAdd = {
};
Assuming you are using ASP.Net,
you can specify ClientID property on div to be Static so that ID won't change during runtime.
<div id="test" runat="server" clientidmode="Static"></div>
Another way is to use below syntax
alert($('[id$=test]').text());
alert($('[id$=test]').html());
alert($('[id$=test]').val());
If your jQuery is on same aspx page, you can also use inline service-side markup.
alert($('#<%= test.ClientID %>').html());
help! I have a google map in the master page , moving the map I get the coordinates then
Click asp button through javascript I would update the data in the page content in the code behind c # . this works but it only works the first time , by moving the map again , the button is not clicked more
this code:
page.aspx
Please wait ...
<asp:Button ID="MapTrigger" name="MapTrigger" runat="server" OnClick="MapTrigger_Click" style="display:none;" />
javascript:
function OnSuccess(resul_param) {
if (resul_param) {
document.getElementById("currentDate").innerHTML = resul_param[0];
var clickButton = document.getElementById("<%=MapTrigger.ClientID %>");
$('clickButton').trigger('click');
}
code behind c#.
protected void MapTrigger_Click(object sender, EventArgs e)
{
.....
}
I solved this way. I have made visible to the entire page ( MasterPage + aspx) button with a global function that I put at the beginning of the aspx page immediately after the tag Content
function InitializeVariables() {
var MapTrigger = null;
if (MapTrigger == null) {
MapTrigger = document.getElementById("");
MapTrigger.click();
}
}
now works perfectly.
I have a hidden div element.
<div class= "CTL" id="CTL" runat="server" style="display:none">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
I am trying to make the div element appear or stay hidden based on an SQL value returned on page Load:-
window.onload= function show_CTL() {
if("<%=_CurrentUser.IsCTL%>" == "True"){
document.getElementById('CTL').style.display ="block";
}
else{
// document.getElementById('CTL').style.display ="none";
}
But the div element remains shown regardless of value returned...
It seems like only the true part of the loop gets executed...
Use display:none to hide the div in first place
<div class= "CTL" id="CTL" style="display:none" runat="server">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
then you can show it with
document.getElementById('CTL').style.display ="block";
Cast the condition to a Boolean in JavaScript you can do it like this:
window.onload = function show_CTL() {
var el = document.getElementById('CTL');
if(Boolean("<%=_CurrentUser.IsCTL%>") && el){
el.style.display = "block";
}
else{
el.style.display = "none";
}
}
If the Boolean object has no initial value, or if the passed value is one of the following:
0
-0
null
""
false
undefined
NaN
the object is set to false. For any other value it is set to true (even with the string "false")!
Now I wonder, why not simply add the condition inside the visible attribute?
<div class="CTL" id="CTL" runat="server" visible=<%=_CurrentUser.IsCTL%>></div>
No JavaScript needed this way.
ASP.NET is changing the IDs, thats why you have to take the clientID of your element.
document.getElementById("<%= CTL.ClientID %>").style.display = "block";
visible and display are 2 different css property,
you set visible first, but later you change display,
you should change visible, not display,
of cause you can use display instead of visible in the first place.
I have one Telerik RadGrid inside of a RadPageView, and another RadGrid inside of another RadPageView. Both are part of the same RadMultiPage control. I am writing a Javascript function to resize the RadGrids to fill the remaining space in the window. How do I determine which RadGrid is the visible one in the active RadPageView?
This might give you a clearer idea of what I mean:
<script type="text/javascript">
function resizeElements(sender, EventArgs) {
var m_grid = sender;
if(m_grid) {
m_grid.GridDataDiv.style.height = right_pane_height - padding + "px";
}
}
</script>
<div id="right_pane">
<telerik:RadMultiPage runat="server" >
<telerik:RadPageView runat="server">
<telerik:RadGrid runat="server" >
<ClientSettings>
<ClientEvents OnGridCreated="resizeElements" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPageView>
<telerik:RadPageView runat="server">
<telerik:RadGrid runat="server" >
<ClientSettings>
<ClientEvents OnGridCreated="resizeElements" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
I do not use Telerik, however, a generic approach would be to have a look at the classes of your elements in Firebug/Chrome F12 view/similar and then use JQuery to find the "div:visible" inside your RadMultiPage (give this an ID or a Class if you can in ASP.NET). Inside of this you will find your grid.
Your JQuery might look something like this:
$('#myMultiPageID > div:visible > .classOfRadGrid').each(function() {
resizeElements(this, myEventArgsVariable);
});
I realized that it is not necessary to know which RadGrid is visible in order to resize it. I simply resize both of them. The only catch is that I need to make sure that the RadGrid and it's GridDataDiv element exist, because they might not exist when the RadPageView they are on is not visible.
if( m_grid && m_grid.GridDataDiv ) {
m_grid.GridDataDiv.style.height = right_pane_height - padding + "px";
}
if( m_grid2 && m_grid2.GridDataDiv ) {
m_grid2.GridDataDiv.style.height = right_pane_height - padding + "px";
}
I have to show some functionality similar to accordion that is of
jquery so i made a custom function of jquery to produce the effect.
there is a grid view in which there are two div's here is the code.
<asp:GridView ID="grdAccordion" runat="server" AutoGenerateColumns="false" Width="200px">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="myFirstDiv" onclick="testToggle(this)">
<%#Eval("Name")%>
<div class="mySecondDiv" style="display:none">
<%#Eval("Person_Name")%>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The second div has style property display none. by default all the div are closed.
than i have made a js function that uses the toggle function to perform the action code.
function testToggle(testDiv) {
debugger
var sntHdnValue = $('#hdnSetFlag').val();
if (sntHdnValue == 1) {
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
else {
$(testDiv)
.parents('table:first')
.find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
sntHdnValue++;
$('#hdnSetFlag').val(sntHdnValue);
}
here i have made use of the hidden field that let's me know that it is the
initial state every thing is closed i am adding a custom attr isopen for my identification
1)the current situation is this At load everty thing should be closed.
2)than at a time only single div should be open.
this is working fine.
The problem is if i click on the same div that i clicked to open than
it has two custom attr isopen now it breaks the second case.
how to solve it.
Got the work around.
updated functions.
var glDivID = 0;
function testToggle(testDiv) {
debugger
var sntHdnValue = $('#hdnSetFlag').val();
var dvID = $(testDiv).attr('id');
if (sntHdnValue == 1) {
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
else {
$(testDiv)
.parents('table:first')
.find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
if (glDivID != dvID) {
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
}
sntHdnValue++;
$('#hdnSetFlag').val(sntHdnValue);
glDivID = dvID;
}
i appended an id at the time of adding data to the grid.checked the same for testing whether it is a self clicked or not it does the trick