Solved

"document.getElementById" doesnt get the element

Posted on 2013-06-15
28
660 Views
Last Modified: 2013-07-09
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
Comment
Question by:Camillia
  • 15
  • 4
  • 4
  • +3
28 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39250739
what is the original code?
0
 
LVL 7

Author Comment

by:Camillia
ID: 39250748
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39250750
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250755
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
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39250775
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250791
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39250795
Did you try copying my example first
0
 
LVL 7

Author Comment

by:Camillia
ID: 39250801
I'm trying it with my code. I need to get it working with what the code i have posted.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39250807
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
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 39250809
@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
 
LVL 7

Author Comment

by:Camillia
ID: 39250814
>>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
 
LVL 58

Expert Comment

by:Gary
ID: 39250822
Where is print_area.ClientID coming from - have you just made it up - it's not present in your page code
0
 
LVL 7

Author Comment

by:Camillia
ID: 39250827
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
 
LVL 58

Expert Comment

by:Gary
ID: 39250840
Paste the source of the javascript, from the browser.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 7

Author Comment

by:Camillia
ID: 39250842
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250847
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39250848
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250850
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250854
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250859
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
 
LVL 7

Author Comment

by:Camillia
ID: 39250862
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39251181
Is the ID name defined in a univoque way?
0
 
LVL 7

Author Comment

by:Camillia
ID: 39251237
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39251247
GOOD Luck
0
 
LVL 7

Author Comment

by:Camillia
ID: 39251252
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
 
LVL 58

Expert Comment

by:Gary
ID: 39251299
Where is &#39; coming from - that should be a '
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39251603
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
 
LVL 7

Author Comment

by:Camillia
ID: 39251614
yes you have.  Thanks, Dave.
Kamila.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now