Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 704
  • Last Modified:

"document.getElementById" doesnt get the element

I've tried several things and the only code that works is if I specify the element's name which I dont want to do...

I have a div and I want to get the ID in Javascript.

I've tried these:

alert(document.getElementsByTagName("<%= print_area.ClientID %>"));  //gives objectNodeList

alert(document.getElementById('<%= print_area.ClientID %>')); //gives null. I tried double quotes too.

alert(document.getElementById('DashboardContentPlaceHolder1_print_area')); //objectHTMLDivElement This is correct but I have spelled out the actual element name I see in "view source".

I tried getting the contentPlaceHolder's element like this:

alert(document.getElementById('<%=form1.FindControl("ContentPlaceHolder1").ClientID%>'));  this gave me null

This is the code I see in Chrome's Inspect-Element screen. Do I somehow need to drill down??

<div id="DashboardContentPlaceHolder1_pnlPopup" style="position: fixed; z-index: 100001; left: 443px; top: -35.5px;">
	
<div id="DashboardContentPlaceHolder1_updPnlProviderdetail">
		
   <input type="submit" name="ctl00$DashboardContentPlaceHolder1$btnShowPopup" value="" id="DashboardContentPlaceHolder1_btnShowPopup" style="display:none">
   

   

    <fieldset>
  <div class="admin_box">
   <legend class="fontface">Additional Patient Information</legend>

   <div id="DashboardContentPlaceHolder1_print_area">

Open in new window

0
Camillia
Asked:
Camillia
  • 15
  • 4
  • 4
  • +3
2 Solutions
 
leakim971PluritechnicianCommented:
what is the original code?
0
 
CamilliaAuthor Commented:
Here it is

<asp:Panel runat="server" ID="pnlPopup"   style="display:none; " >
<asp:UpdatePanel runat="server" ID="updPnlProviderdetail" UpdateMode="Conditional">
 <ContentTemplate>
   <asp:Button runat="server" ID="btnShowPopup"  style="display:none" />
   

   <asp:ModalPopupExtender ID="mdlPopup"     TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
                        OkControlID="btnPrint"    BackgroundCssClass="modalBackground"     CancelControlID="btnClose" runat="server">
                               
   </asp:ModalPopupExtender>

    <fieldset>
  <div class="admin_box">
   <legend class="fontface">Additional Patient Information</legend>

   <div id="print_area" runat="server">
 
  <asp:ListView ID="lvPatientDetail"  Visible="false"
                
              runat="server">

             ....
  </asp:ListView>
  </div>
  <div class="edit_icon">  
    <asp:LinkButton runat="server" ID="btnPrint"  Text="Print"   CausesValidation="false" />
    
    <asp:LinkButton runat="server" ID="btnClose"  Text="Close"  CausesValidation="false" />
                           
  </div>
 </div>
        
        </fieldset>
 </ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

Open in new window


.....

I'm using this example. The Javascript code is on this page

http://www.codeproject.com/Articles/13795/Creating-print-preview-page-dynamically-in-ASP-NET
0
 
Jagadishwor DulalBraces MediaCommented:
Why you are using document.getElementByTagName()

alert(document.getElementsByTagName("<%= print_area.ClientID %>"));  //gives objectNodeList

alert(document.getElementById('<%= print_area.ClientID %>')); //gives null. I tried double quotes too.

Open in new window

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
CamilliaAuthor Commented:
I was trying document.getElementByTagName to see if that woud work. I was trying different code and debugging.

I wonder if there's a way to do it in JQuery.
0
 
Jagadishwor DulalBraces MediaCommented:
In Javascript see a simple example below:

<div id="testdiv">Hello</div>
</body>
<script>
var myname = document.getElementById('testdiv').id;
alert(myname);
</script>

Open in new window


And for jquery:

<script>
$(document).ready(function(e) {
	var divname=$('#testdiv').attr('id');
	alert(divname);
});
</script>
<div id="testdiv">Hello</div>
</body>

Open in new window

0
 
CamilliaAuthor Commented:
The Javascript one doesnt work. Looks like a wrong syntax.
The JQuery gives me "undefined".

I think there has to be a way to drill down to the contentPlaceHolder, then get the div that's named print_area. Not sure how to to tho.
0
 
Jagadishwor DulalBraces MediaCommented:
Did you try copying my example first
0
 
CamilliaAuthor Commented:
I'm trying it with my code. I need to get it working with what the code i have posted.
0
 
GaryCommented:
This line is only going to get you the object when you alert it i.e. you are trying to alert something like a textbox but a textbox is not a value it is an object on the page.
document.getElementById("<%= print_area.ClientID %>")

If you want the value of the element then you would use

document.getElementById("<%= print_area.ClientID %>").value

From your code it is not clear what object you are trying to access.
0
 
Dave BaldwinFixer of ProblemsCommented:
@Farzadw, when your code isn't working, it is best to try some simple test codes before going back to fix your own code so you can better understand what is going on.  I write many more test pages than finished pages.  When you have to work with too many things at once, it often gets too confusing to fix.  

These two:
document.getElementById('<%= print_area.ClientID %>')
document.getElementById('DashboardContentPlaceHolder1_print_area')

get you the Properties of the div...

<div id="DashboardContentPlaceHolder1_print_area"></div>

but do not get you the contents.  To get the contents, you need...

document.getElementById('<%= print_area.ClientID %>').innerHTML

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

There are many other properties of an element that you can set or get with document.getElementById().

http://www.w3schools.com/jsref/prop_html_innerhtml.asp
0
 
CamilliaAuthor Commented:
>>To get the contents, you need...
document.getElementById('<%= print_area.ClientID %>').innerHTML

1. That's what I'm trying to convey. That line of code doesnt work. It gives me null.

2. But when I specify the clientId like the line below, that's when it works:

document.getElementById('DashboardContentPlaceHolder1_print_area').innerHTML

I have to specify the clientID to make it work and I don't want to specify it. print_area.ClientID gives me null. So, innerHTML is not the issue. It's that print_area.ClientID gives me null.

If you scroll down to the last post here, the poster has the same issue as mine
http://forums.asp.net/t/1146079.aspx/1
0
 
GaryCommented:
Where is print_area.ClientID coming from - have you just made it up - it's not present in your page code
0
 
CamilliaAuthor Commented:
I have div that's named print_area. It's in post ID: 39250748. In Javascript, I want to get the clientID. So this should work

document.getElementById("<%= print_area.ClientID %>").innerHTML

But it comes out as null. If I specify the actual client id, then it works:
document.getElementById('DashboardContentPlaceHolder1_print_area').innerHTML
0
 
GaryCommented:
Paste the source of the javascript, from the browser.
0
 
CamilliaAuthor Commented:
I have an update panel which I need to have. I wonder if that's preventing the clientId to be read...

Javascript's function name is "getPrint". When Print button is clicked, this is passed to the javascript function

<a onclick="getPrint(&#39;print_area&#39;);" id="DashboardContentPlaceHolder1_btnPrint" href="javascript:__doPostBack(&#39;ctl00$DashboardContentPlaceHolder1$btnPrint&#39;,&#39;&#39;)">Print</a>

Open in new window


and the javascript is here in this page
http://www.codeproject.com/Articles/13795/Creating-print-preview-page-dynamically-in-ASP-NET
0
 
CamilliaAuthor Commented:
I also did try the JQuery example by Jaga. I put it outside the updatepanel and it worked. I then put the div inside the update panel and that worked too. So, maybe it's not the update panel...


<div id="testing"> hello</div>

<script>
    $(document).ready(function (e) {
        var divname = $('#testing').attr('id');
        alert(divname);
    });
</script>
0
 
Dave BaldwinFixer of ProblemsCommented:
From that page
//Writing print area of the calling page
    pp.document.writeln(document.getElementById(print_area).innerHTML);

Open in new window

'print_area' is a javascript variable containing the ID of a div somewhere else, maybe on the original page since that code is for a pop-up.
0
 
CamilliaAuthor Commented:
Yes, it's in ID: 39250748 , line 16. The div is there, on the page.

Now, the JQuery posted by Jaga works like this. So, that alert gives me "print_area". But now, how can I change change the original Javascript code to use the JQuery and get the innerHTML. Since print_area.ClientID doesnt work...is there a way to change the code below to make it work with JQuery?

pp.document.writeln(document.getElementById('DashboardContentPlaceHolder1_print_area').innerHTML); 

Open in new window


<script>
    $(document).ready(function (e) {
        var divname = $('#print_area').attr('id');
        alert(divname);
    });
</script>

<div id="print_area" >
  ...

Open in new window

0
 
CamilliaAuthor Commented:
I think getElementbyId in JQuery is something like this link

http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery

but can I put it in the Javascript code??
0
 
CamilliaAuthor Commented:
Yeah, if I put this in aspx page, this works. It's similar to getByElementId but I need that line in Javascript code to replace the line
pp.document.writeln(document.getElementById('DashboardContentPlaceHolder1_print_area').innerHTML); 

Open in new window



<script>
    $(document).ready(function (e) {
        var divname = $('#print_area').attr('id');
        alert(divname);

        var contents = $('#print_area')[0];
        alert(contents);

    });
</script>
0
 
CamilliaAuthor Commented:
ok, i think i got it. In the Javascript code, I did. Seems to be working. Going to test more.

var contents = $('#print_area')[0];
pp.document.writeln(contents.innerHTML);
0
 
Sar1973Commented:
Is the ID name defined in a univoque way?
0
 
CamilliaAuthor Commented:
Sar, I got it working using JQUery. I don't know why it didnt work using Javascript. I have other code that uses getElementById. Not sure why this one page didnt work.
0
 
Jagadishwor DulalBraces MediaCommented:
GOOD Luck
0
 
CamilliaAuthor Commented:
Something weird happens in IE vs Chrome. I'll close this question. Thanks, Jaga, for the JQuery test code. Yes, Dave is right about using test code (I think he's given me that advice before :))
0
 
GaryCommented:
Where is &#39; coming from - that should be a '
0
 
Dave BaldwinFixer of ProblemsCommented:
I may have said that to you before.  I build all my own code that way, with smaller pieces that have been tested and made to work.  My poor brain can't build large apps all at once.
0
 
CamilliaAuthor Commented:
yes you have.  Thanks, Dave.
Kamila.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 15
  • 4
  • 4
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now