User avatar
cubeconn
Posts: 35
Joined: Fri Jan 02, 2009 6:00 pm
Location: Norwich, UK

document.getElementById element become Null after Popup Form

Hi

I have a weird one that I have managed to track down the cause of but not why... I have a (very rough!) test page at:
{Page No longer there}

On this page there is a image gallery and also a popup form for uploading images - it's probably easiest to "View Source" on that page (but I have included in case). The problem I have is all the ID's of the form become Null (and hence cannot be controlled by JS) after the form is viewed.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/includes/hs.css" media="screen, tv" />
<script type="text/javascript" src="/includes/hs/hs-full.js"></script>
<script type="text/javascript" src="/includes/hs_config.js"></script>

<script type="text/javascript">
hs.addSlideshow({
  slideshowGroup: 'gallery1',
  interval: 4000,
  repeat: false,
  useControls: true,
  fixedControls: false,
  overlayOptions: {
    opacity: .75,
    position: 'top right',
    hideOnMouseOut: true
  }
});
hs.transitions = ['expand', 'crossfade'];
</script>
</head>

<body>

<div id="pagebox">
	<div><a href="#" onclick="alert(document.getElementById('uploadresults'));">JS Alert to Display document.getElementById('uploadresults')</a></div>
	<div id="cartitle">
		Porsche Boxster 2.7
	</div>
	<div id="carimages">
		<div class="outline"><a id="zoomcontent1" class="highslide" href="/uploads/image/catalogue/iteml/4a.jpg" onclick="return hs.expand(this, {slideshowGroup: 'gallery1', wrapperClassName: 'photo-with-caption'})"><img class="cargal" src="/uploads/image/catalogue/items/4a.jpg" title="Porsche Boxster 2.7" alt="Porsche Boxster 2.7" width="100" height="75" /></a><a href="#" id="uploadlink1" onclick="return hs.htmlExpand(this, {contentId: 'imageupdform', wrapperClassName:'form-wrapper' }, { xxx: '4', yyy: '1' })"><img src="images/icons/change_image.gif" class="cmschange" alt="Image Edit" width="20" height="20" /></a></div>
		<div class="outline"><a id="zoomcontent2" class="highslide" href="/uploads/image/catalogue/iteml/4b.jpg" onclick="return hs.expand(this, {slideshowGroup: 'gallery1', wrapperClassName: 'photo-with-caption'})"><img class="cargal" src="/uploads/image/catalogue/items/4b.jpg" title="Porsche Boxster 2.7" alt="Porsche Boxster 2.7" width="100" height="75" /></a><a href="#" id="uploadlink2" onclick="return hs.htmlExpand(this, {contentId: 'imageupdform', wrapperClassName:'form-wrapper' }, { xxx: '4', yyy: '2' })"><img src="images/icons/change_image.gif" class="cmschange" alt="Image Edit" width="20" height="20" /></a></div>
	</div>

	<div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Close"></div>
</div>

<div id="imageupdform" class="highslide-html-content imageupd">
	<h3 class="formtitle">Image Upload</h3>
	<div id="uploadresults" style="color:#c00;">Error message here</div>
	<form id="frmimageupd" action="/admin/processupload.asp" enctype="multipart/form-data" method="post">
		<p><label>Image Name:</label><input type="file" name="uploadedfile" /></p>
		<p><input type="submit" name="upload" value="Process" class="btn uploadbtn" /></p>
	</form>
</div>
</body>

</html>

To see this is action:
  • 1. load up the page above
    2. click the link "JS Alert to Display document.getElementById" - see the JS popup says [object HTMLDivElement]


now...
  • 3. Click on the little edit icon (not the cars!) to see the popup form.
    4. Just close that form (click background or the Close button), do not click the Process button
    5. Now click the link "JS Alert to Display document.getElementById" again - this time it says "Null - i.e. no ID found."
The reason i need this is that I have a onAfterClose function like (not included in this test page):

Code: Select all

hs.Expander.prototype.onAfterClose = function (sender) {
	if(this.a.id=='uploadlink') {
		document.getElementById('uploadresults').style.display = 'none';
	}
}
that clears the "error message here" from displaying on subsequent openings, but as the ID is now Null it does not work.

I have found a fix and that is to remove the line:

Code: Select all

hs.transitions = ['expand', 'crossfade'];
which is to do with the gallery and then it's all OK, but then my transitions of course are not what they should be.

Why does the settings the transitions cause the Popup Form to lose all it's ID's?

Cheers

Rob
Last edited by cubeconn on Thu Jan 20, 2011 9:13 am, edited 1 time in total.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: document.getElementById element become Null after Popup Form

Probably because the crossfade transition forces preserveContent = false. You might try setting hs.preserveContent = false to fix your problem, or use a container element outside the popups to keep the upload results.
Torstein Hønsi
CTO, Founder
Highsoft
Cerulean
Posts: 69
Joined: Fri Feb 20, 2009 9:51 am

Re: document.getElementById element become Null after Popup Form

HI Torstein ,

Is it ok to use 2 highslide js in a html ? in some post i had seen roadrash has told not to use 2 js insted of that use configurator . ?

in this code ii found
<script type="text/javascript" src="/includes/hs/hs-full.js"></script>
<script type="text/javascript" src="/includes/hs_config.js"></script>

if i comment <script type="text/javascript" src="/includes/hs/hs-full.js"></script> line i got the document.getElementById value after closing the pop up ?
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: document.getElementById element become Null after Popup Form

Hi Cerulean,

If you take a closer look at the hs_config.js you will find this isnÔÇÖt a regular highslide JS file ÔÇô it only contains the extra Highslide configurations.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: document.getElementById element become Null after Popup Form

That's true. I encourage implementers to put all Highslide settings in a separate config file.

However, Highslide will fail or give unexpected results if you include the actual highslide.js/highslide-with-html.js file twice.
Torstein Hønsi
CTO, Founder
Highsoft
User avatar
cubeconn
Posts: 35
Joined: Fri Jan 02, 2009 6:00 pm
Location: Norwich, UK

Re: document.getElementById element become Null after Popup Form

Hi, Thanks for the answer,

I tried adding hs.preserveContent = false; but it was still the same.

I am unsure about what you mean by "use a container element outside the popups to keep the upload results".

Do you mean show the results on the actual page and not the popup? If I put the container element outside the popup I am unsure how to then display it in the popup!?

Cheers for any more help.

Rob
Cerulean
Posts: 69
Joined: Fri Feb 20, 2009 9:51 am

Re: document.getElementById element become Null after Popup Form

Hi ,

May be this will help you
instead of calling hs.close() in the html popup call another function and get the document.getElementById('uploadresults') and assign to one var then u can get the value
Cerulean
Posts: 69
Joined: Fri Feb 20, 2009 9:51 am

Re: document.getElementById element become Null after Popup Form

Hi ,

Sorry i think last post will not help .
I think you have to apply there program logic condition if the Error message is null when pop up loads then don't display error message else display error message
User avatar
cubeconn
Posts: 35
Joined: Fri Jan 02, 2009 6:00 pm
Location: Norwich, UK

Re: document.getElementById element become Null after Popup Form

Hi,

For reference I got round it like this:

Where I want the Error message to display in the Popup form I have changed the Error DIV to:

<div id="uploadresults" style="display:none; color:#c00;">Error message here</div>

Then I have a Javascript variable set var blnShowError = true; in the main page.
(NOTE that I am using ASP to initialise the variable to true or false depending on if there is an Error or not - it gets this from the querystring)

Then I have the following Highslide calls:

Code: Select all

hs.Expander.prototype.onAfterGetContent = function () {
	if(blnShowError) {
		this.content.innerHTML = this.content.innerHTML.replace(/none;/, 'block;'); }
	else {
		this.content.innerHTML = this.content.innerHTML.replace(/block;/, 'none;'); }
}
hs.Expander.prototype.onAfterClose = function () {
	blnShowError = false; //seen the error (if there was one) so set flag so we don't see again!
}
Basically, onAfterGetContent if the Error Flag is set then use the innerHTML and replace to set the style to block else set to hide. Then onAfterClose set the Error Flag to false (we have seen the error), so it doesn't display again. The actual code is more than that, in that the form automatically pops up with the error when the page is loaded, but you get the idea.

There's many ways to skin a cat as they say, so I hope this helps / gives ideas to others!

Cheers

Rob
Jmarc
Posts: 22
Joined: Thu Jan 06, 2011 7:27 pm

Re: document.getElementById element become Null after Popup Form

admin wrote: the crossfade transition forces preserveContent = false.
This should be told into the hs.transitions API reference !

I have spent time to search why my preserveContent didn't works anymore...
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: document.getElementById element become Null after Popup Form

Done!
Torstein Hønsi
CTO, Founder
Highsoft
Brindha
Posts: 3
Joined: Sun Aug 02, 2015 1:35 pm

Re: document.getElementById element become Null after Popup

Hi,

I'm using highslide to open a pop-up,

hs.htmlExpand(document.getElementById('divID'),{contentId:'subDivID', objectType: 'Ajax',align: 'center',width:700,height:200, preserveContent: false });

1) When I use preserveContent: false, then in function, I'm getting null for all IDs of document.getElementById('Id'). Why I'm getting null? Why setting preserveContent: false makes DOM elements as null?
Is there any solution to fix this problem.

2) I'm trying to fix the position of the pop-up. I tried, targetX, targetY and align; But it doesn't work; whereas preserveContent: false works; But I'm getting document.getElementById as null.

Any solution please? TIA.

Return to “Highslide JS Usage”