Link to home
Start Free TrialLog in
Avatar of Camillia
CamilliaFlag for United States of America

asked on

"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

Avatar of leakim971
leakim971
Flag of Guadeloupe image

what is the original code?
Avatar of Camillia

ASKER

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
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

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.
SOLUTION
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Did you try copying my example first
I'm trying it with my code. I need to get it working with what the code i have posted.
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.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
>>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
Where is print_area.ClientID coming from - have you just made it up - it's not present in your page code
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
Paste the source of the javascript, from the browser.
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
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>
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.
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

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??
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>
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);
Is the ID name defined in a univoque way?
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.
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 :))
Where is &#39; coming from - that should be a '
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.
yes you have.  Thanks, Dave.
Kamila.