PDA

View Full Version : 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:

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:

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


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:


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


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 (https://www.lichaamengeest.be/AAA.php) and here's the adjusted js (http://lichaamengeest.be/AAnumerologie.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:

var newWindow;
and on line 5-6-7:

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:


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:


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

with:


;(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:


;(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):


;(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?

jscheuer1
02-26-2018, 11:21 PM
Ah, yes, (my fault this time) not resetting the newContent variable, add red:


;(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;
newContent = "<div class=\"container margin-top-70 margin-bottom-90\"><div class=\"row margin-bottom-60\"><div class=\"col-md-12\">";
})();
}}

Tested in the console and will work if implemented as suggested.

However, I would also suggest a few other minor changes for cosmetic (layout), and ease of future editing. But let's get this part working first.

chechu
02-27-2018, 08:17 AM
Works like a charm, John.
What cosmetics would you like to add/remove?
Thanks!

jscheuer1
02-27-2018, 04:15 PM
Well, just two (or three, depending how you count them) things. First of all, at the beginning, were we have, I'd add the highlighted:


// globale variabelen
var newWindow;
var newContent = "<div class=\"container margin-top-50 margin-bottom-90\"><div class=\"row margin-bottom-60\"><div class=\"col-md-12\">";
var newContentBak = newContent;

That way, we won't have to retype it later, so can change the added code as shown:


;(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;
newContent = newContentBak;
})();
}}

That will make it easier should you ever want to change the vertical spacing or any other characteristics of the result that are controlled there. You indicated before that you might. If you do, then go back to the beginning and make it (or try other changes if you prefer, or leave as is if you like, the main thing is it only needs to be changed in one place now, not two):


// globale variabelen
var newWindow;
var newContent = "<div class=\"container\" style='margin-top: -100px;'><div class=\"row\"><div class=\"col-md-12\">";
var newContentBak = newContent;

chechu
02-27-2018, 05:35 PM
Lovely, John.
Thanks.