javascript not to open in new window

**chechu** · 02-26-2018, 10:11 AM

I ran into a script that fits my needs, but there's just one thing. The code makes it open in a new window, where I also have to write the headers.

Is it possible to have the script open in the same window, with the same headers as the page where the script is activated from (so it replaces the form where this script gives the results of).

Here's the original code:

Code:

var newWindow;
var newContent = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><title>here's my title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" media=\"screen\" /></head><body><div class=\"container margin-top-70 margin-bottom-90\"><div class=\"row margin-bottom-60\"><div class=\"col-md-12\">";

function makeNewWindow(){
newWindow = window.open("", "numbers", "");
}

and a bit further:

Code:

newContent += "</body>\n</html>";
newWindow.document.write(newContent); 
newWindow.document.close()  
}}

newContent += "</div></div></div></body></html>";

Here's the full js file: https://www.lichaamengeest.be/scripts/numerologie.js
Something to do with window.location.href, but can anyone help me out, please? Thanks!

**jscheuer1** · 02-26-2018, 04:00 PM

Yeah, get rid of the new header and the opening body tag (remove highlighted):

Code:

var newContent = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><title>Lichaam en Geest: De duiding van jouw geboortegetal</title><link rel=\"stylesheet\" type=\"text/css\" href=\"https://lichaamengeest.be/css/style.css\" media=\"screen\" /></head><body><div class=\"container margin-top-70 margin-bottom-90\"><div class=\"row margin-bottom-60\"><div class=\"col-md-12\">";

Then get rid of, or comment out as shown, the highlighted and add the red:

Code:

// makeNewWindow();
newContent += "<a href=\"javascript: window.close()\" class=\"button border\">» Klik hier om dit venster te sluiten en terug te keren naar Lichaam en Geest</a>"
newContent += "<br>";
newContent += "<br>";
newContent += "<h3>Hieronder vind je een gedetailleerde duiding van jouw numerologisch geboortegetal<br>- gemaakt op " + weekday[dag.getDay()] + "&nbsp;";
newContent += dag.getDate() + "-";
newContent += monthname[dag.getMonth()] + "-";
newContent += dag.getFullYear();
newContent += "<br>";

//alert(Orakel());

Orakel();

// newContent += "</body>\n</html>";
// newWindow.document.write(newContent);  // schrijf alles naar het scherm
// newWindow.document.close()   //schijnt zo te moeten
;(function(){
	var div = document.createElement('div'), frm = document.forms[0], trg = frm.parentNode;
	trg.insertBefore(div, frm);
	trg.removeChild(frm);
	div.innerHTML = newContent;
})();
}}

Oh, and you should probably get rid of this line too:

Code:

window.location.reload()

But it probably doesn't matter.

If you want more help please link to the problematic page.

**chechu** · 02-26-2018, 05:55 PM

Thanks for that, John.
Still one issue.

Here's the test page and here's the adjusted js

You'll see that the content shows and does push the rest (footer) down, but the form disappears.
How can that be solved?

Maybe this should be removed also,
on line 2:

Code:

var newWindow;

and on line 5-6-7:

Code:

function makeNewWindow(){
  newWindow = window.open("", "uitslag", "");
}

Could you please help me out?
Thanks.

**jscheuer1** · 02-26-2018, 08:02 PM

I thought you said you wanted it to replace the form.

Is it possible to have the script open in the same window, with the same headers as the page where the script is activated from (so it replaces the form where this script gives the results of).

As for pushing the footer down, it's going to do that because there's more content there than the form had, and there was some space there before submitting the form. But I also see some extra empty space. That extra space appears to come from class names (and their associated styles) in the generated markup. You can get rid of the extra space by removing the highlighted:

Code:

var newContent = "<div class=\"container margin-top-70 margin-bottom-90\"><div class=\"row margin-bottom-60\"><div class=\"col-md-12\">";

You can also get rid of the two things you mentioned, but that won't change anything. They're no longer used. I left them in case it became desirable to revert to the original method.

**chechu** · 02-26-2018, 08:16 PM

You're right, John, I didn't express myself correctly, sorry.
Is it possible to have the content show below the form, so, if needed, the form can be filled in again, please?
And how can the content "break out" of the divs of the form (md-6) so it shows below full width (md-12)?
Thanks.

* please refresh the page, as I just replaced the js and left the html untouched: now it doesn't push the footer down and stays in the same div.

**jscheuer1** · 02-26-2018, 08:44 PM

OK, then I'd replace:

Code:

;(function(){
	var div = document.createElement('div'), frm = document.forms[0], trg = frm.parentNode;
	trg.insertBefore(div, frm);
	trg.removeChild(frm);
	div.innerHTML = newContent;
})();

with:

Code:

;(function(){
	var div, ft, trg;
	if(document.getElementById('aanumbersresults')){div = document.getElementById('aanumbersresults');}
	else {
		div = document.createElement('div'); ft = document.getElementById('footer'); trg = ft.parentNode;
		div.id = 'aanumbersresults';
		trg.insertBefore(div, ft);
	}
	div.innerHTML = newContent;
})();

**chechu** · 02-26-2018, 08:58 PM

Now nothing comes up.
Should I replace "aanumbersresults" in your code by something else?

**jscheuer1** · 02-26-2018, 09:13 PM

I probably just made a typo. Let me check.

**jscheuer1** · 02-26-2018, 09:23 PM

Actually I think you made a typo. Where you now have:

Code:

;(function(){
	var div, ft, trg;
	if(document.getElementById('aanumbersresults')){div = document.getElementById('aanumbersresults');}
	else {
		div = document.createElement('div'); ft = document.getElementById('footer'); trg = ft.parentNode;
		div.id = 'aanumbersresults';
		trg.insertBefore(div, ft);
	}
	div.innerHTML = newContent;
})();

Looks like you left out the closing braces for the two parent functions (they were there before), so add those back in (red):

Code:

;(function(){
	var div, ft, trg;
	if(document.getElementById('aanumbersresults')){div = document.getElementById('aanumbersresults');}
	else {
		div = document.createElement('div'); ft = document.getElementById('footer'); trg = ft.parentNode;
		div.id = 'aanumbersresults';
		trg.insertBefore(div, ft);
	}
	div.innerHTML = newContent;
})();
}}

Pretty sure that's it (the error I see in the console indicates that's likely). If not, revert from a backup and I'll look again.

**chechu** · 02-26-2018, 10:49 PM

Indeed my mistake.
Now it works lovely: I type in a date and it shows below.
But when I want to check on another date, then that shows below the explanation of the first date, and so on.
Actually if I search a second date, then the explanation of the first date should disappear.
Hopefully you understand what I mean?