Camillia
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.getElementB yId('DashboardContentPlaceHolde r1_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.getElementB yId('<%=fo rm1.FindCo ntrol("Con tentPlaceH older1").C lientID%>' )); this gave me null
This is the code I see in Chrome's Inspect-Element screen. Do I somehow need to drill down??
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.getElementB
I tried getting the contentPlaceHolder's element like this:
alert(document.getElementB
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">
what is the original code?
ASKER
Here it is
.....
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
<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>
.....
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.getElementByTagNa me()
alert(document.getElementsByTagName("<%= print_area.ClientID %>")); //gives objectNodeList
alert(document.getElementById('<%= print_area.ClientID %>')); //gives null. I tried double quotes too.
ASKER
I was trying document.getElementByTagNa me 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.
I wonder if there's a way to do it in JQuery.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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
ASKER
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.
document.getElementById("<
If you want the value of the element then you would use
document.getElementById("<
From your code it is not clear what object you are trying to access.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
>>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('D ashboardCo ntentPlace Holder1_pr int_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
document.getElementById('<
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('D
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
ASKER
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('D ashboardCo ntentPlace Holder1_pr int_area') .innerHTML
document.getElementById("<
But it comes out as null. If I specify the actual client id, then it works:
document.getElementById('D
Paste the source of the javascript, from the browser.
ASKER
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
and the javascript is here in this page
http://www.codeproject.com/Articles/13795/Creating-print-preview-page-dynamically-in-ASP-NET
Javascript's function name is "getPrint". When Print button is clicked, this is passed to the javascript function
<a onclick="getPrint('print_area');" id="DashboardContentPlaceHolder1_btnPrint" href="javascript:__doPostBack('ctl00$DashboardContentPlaceHolder1$btnPrint','')">Print</a>
and the javascript is here in this page
http://www.codeproject.com/Articles/13795/Creating-print-preview-page-dynamically-in-ASP-NET
ASKER
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>
<div id="testing"> hello</div>
<script>
$(document).ready(function
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);
'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.
ASKER
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?
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);
<script>
$(document).ready(function (e) {
var divname = $('#print_area').attr('id');
alert(divname);
});
</script>
<div id="print_area" >
...
ASKER
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??
http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery
but can I put it in the Javascript code??
ASKER
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
<script>
$(document).ready(function (e) {
var divname = $('#print_area').attr('id' );
alert(divname);
var contents = $('#print_area')[0];
alert(contents);
});
</script>
pp.document.writeln(document.getElementById('DashboardContentPlaceHolder1_print_area').innerHTML);
<script>
$(document).ready(function
var divname = $('#print_area').attr('id'
alert(divname);
var contents = $('#print_area')[0];
alert(contents);
});
</script>
ASKER
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(conten ts.innerHT ML);
var contents = $('#print_area')[0];
pp.document.writeln(conten
Is the ID name defined in a univoque way?
ASKER
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.
GOOD Luck
ASKER
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 ' 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.
ASKER
yes you have. Thanks, Dave.
Kamila.
Kamila.