Unable to get a Hidden element in ASP.NET 4 from Javascript - javascript

I need help to find a hidden button in Javascript. I am using ASP.NET 4.
I can find a "visible = True" but when i try to find a hidden element it says object not found
<script type="text/javascript">
function ShowAge()
{
var elem = document.getElementById('MainContent_chbFilter');
if (elem != null)
alert("Found 1");
else
alert("Not Found 1");
var elemc = document.getElementById('MainContent_txtMSISDN');
if (elemc != null)
alert("Found 4");
else
alert("Not Found 4");
}
</script>
I am using asp:content
Please help

In ASP.NET when you hide an element it is not rendered in the HTML at all. This is in contrast to using the hidden property in CSS, where the element is still there, just visually hidden. If you want to "hide" it server-side, but still make it available in the DOM, you should add style="display:none;" in your ASPX.

If an element has been hidden serverside (I'm assuming this is what you've done), this means that it won't get rendered onto the page, which is why Javascript won't find it in the DOM.
What you want is to assign it a CSS class (.hidden, for example) with display:none. You can then revert it back to display:block through Javascript.

If you're setting Visible=False to an element in the server-side code than it won't render to the page, so the JavaScript won't be able to access it.

Related

Add JavaScript onClick to dynamically generated asp button

Background My page creates a list of objects based on rows of an SQL Database. For each object, a DIV is dynamically generated that contains a few items including a LinkButton and a further child DIV that is initially hidden. I want the link button to toggle the child DIV's hidden property. The JavaScript is not dynamically generated and is included in the ASPX page.
Problem I don't know how to make this generated LinkButton fire JavaScript that is included in the ASPX page and pass in the correct DIV's ID.
I'm guessing I need to add an attribute to the button like so:
myButton.Attributes.Add(reference to JS function + parameter of DIV's ID)
Maybe like:
myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')");
Where the button is given an attribute of a JS onClick handler pointing to the function "Show_Hide_Display" and a parameter of a DIV's ID that is calculated as the rendered ID. This syntax is incorrect though.
How do I write this so it calls 'Show_Hide_Display' and passes the ID of the current child DIV? All of the DIVs have the same ID apart from a number that references their row number, for example '"myDiv_" + counter.ToString'
The JavaScript I am trying to add a call to on the button:
function Show_Hide_Display(divID) {
var div = document.getElementById(divID);
var style = document.defaultView.getComputedStyle(div);
var display = style.getPropertyValue('display');
if (display == '' || display == 'block') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
}
Use the following syntax ...
myButton.Attributes.Add("onclick", "Show_Hide_Display(this.id);");
the above syntax allows to call the function with id as its parameter.
suggestion:
Try to write a common function which does not depend on generated ids of controls.
If this is not useful for your requirement, please post your code which might gives me a better idea.
If you are using jQuery, you could you jQuery delegate method.
$(document).on("click", "div.parent", function(){
var subDivId = getSubDivByParent(this);
Show_Hide_Display(subDivId);
};
You need to implement getSubDivByParent according your DOM structure.
If you are not using jQuery, you need to attach event yourself. For each dynamically generated element. You need to manually add following script in your server code to register event.
... your html code ...
<script>
var elem = document.getElementById('new-created-element');
elem.addEventListener("click", function(){
var subDivId = getSubDivByParent(this);
Show_Hide_Display(subDivId);
};)
</script>
My suggestion is use jquery to achieve the functionality.
My solution works if you want to toggle the immediate div for the link.just call onclientclick method to toggle the div.
in linkbutton onclientclick="Show_Hide_Display(this)"
function Show_Hide_Display(id) {
$(id).next('div').toggle();
}
I hope this helps you .. Thanks

Jquery script not working to alter CSS on change

I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.
Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.
You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.
Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/

Read more opens 1st one all the time

I've a page with about 10 short articles.
Each of them as a "Read More" button which when pressed displays hidden text
The issues I have at the moment is when I press the "Read More" on any of the 10 button it shows the 1st articles hidden content and not the selected one.
I think I need to set a unique ID to each article.. and the read more button be linked to it.. But I don't know how to set it.
I looked at this but couldn't get it working how to give a div tag a unique id using javascript
var WidgetContentHideDisplay = {
init:function() {
if ($('#content-display-hide').size() == 0) return;
$('.triggerable').click(function(e){
var element_id = $(this).attr('rel');
var element = $('#'+element_id);
element.toggle();
if (element.is(':visible')) {
$('.readmore').hide();
} else {
$('.readmore').show();
}
return false;
});
}
}
var div = documentElemnt("div");
div.id = "div_" + new Date().gettime().toString;
$(document).ready(function(){ WidgetContentHideDisplay.init(); });
OP Edit: Sorry, the original code wasn't in caps. I kept getting errors when trying to post, so I copied the code into Dreamweaver and it made it all caps for some reason.
Instead of selecting the element to toggle with an ID (i.e. $('#'+ELEMENT_ID)) you could setup a class for your item and use the class selection (e.g. $('.DETAILED-ARTICLE)') to select the child (or the brother, etc. depending how you built the HTML page).
In theory each ID should point to a single element but each class can be put to as many elements as you want.
If you're getting errors, read the errors and see what they are. Off of a quick read of your code, here are a couple things I noticed that will probably cause issues:
"documentElemnt" is misspelled, which will render it useless. Also, documentElement is a read-only property, not a function like you're using it.
toString is a function, not a property, without the parentheses (.toString()) it isn't going to function like you want it to.
Run the code, look at the errors in the console, and fix them. That's where you start.

Is there any way to know that particular element is present in someother html page

I am doing processing with html page elements like button or text box.
I can not change the code or can not write any code on that particular page.
Therefore before i am doing that i want to check that all element are present in that page.
For Example- I have HTML page.
So is there any way to validate that all the element are presented in other html page by javascript or another way.
any help will be highly appreciated.
try this using jQuery:
var $button = $("button");
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
try in javascript:
var $button = document.getelememtById("button"); /* button had an ID of #button */
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
basically you check the length of that DOM object and do something if its length is not zero
of course this just gives you a proof of concept to use on those elements you want to test against
Yes you can write something that would compare the DOM of the two html pages.

getElementById doesn't find element after setting visibility to hidden

I'm working on an asp.net page, and I have a master page that uses a content page (my web control). In my web control, I have 4 elements. When I change the picklisttype drop down
PickListType - dropdown
UserPickList -not important
Organization - label
Body - label
Address -drop down
When I change the picklisttype dropdwon, I want to hide Body and Address, and vice versa.
When I change it hte first time, it works, but the second time, it says that it cannot find the ids of Body and Address (I set their visibility to hidden) the 2nd time. When looking through the source, it seems that these elements have 1) changed their Ids during the postback and .ClientId can't find them or 2) they just disappear.
I can't seem to figure out how to do this. Any ideas?
function DropDownChange() {
var picklist = document.getElementById("PickListTypeList");
var usercontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicerPickListContainer");
var orgcontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder__C_OrganizationPickListContainer");
var addresslabel = document.getElementById("LegalBodyAddressLabel");
var addressbox = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicantsRadDock_C_ApplicantsControl_AddEditApplicantDock_C_AddApplicantDock_C_LegalBodyAddressComboBox");
if(picklist.value.toLowerCase() === "sometext"){
usercontainer.style.display = "none";
orgcontainer.style.display = "inline";
addresslabel.visibility = "visible";
addressbox.style.display = "inline";
}
else{
usercontainer.style.display = "inline";
orgcontainer.style.display = "none";
addresslabel.visibility = "hidden";
addressbox.style.visiblity = "none";
}
}
This is the source: i use .ClientId to dynamically find the ids, but then I changed it to static (same id's every single time) and I still cannot seem to get address and label. I am finding these elements from the parent (master) page by going into the control (controlname.nameofelementID.ClientID).
2 ideas/options
Add a class to the controls you want to access, and then use document.getElementsByClassName to retrieve them. .NET will not change classes on html tags after a postback.
OR
Wrap them in a div/span that has an id, and then document.getElementById that wrapping tag and then access its firstChild. I would recommend not doing runat="server" for this wrapper
You've 2 ways to make it work:
Use class names (.net framework does not fiddle with this)
Generate the javascript ids (using ClientId) at runtime. Since there's a postback, this is the right thing to do. Something like: document.getElementById("<%=LegalBodyAddressLabel.ClientId%>");

Categories