We help IT Professionals succeed at work.

Using document.writeln()

Good morning. On this website:

http://www.washburndorsey.com

The customer wants to use the weather widget. But the text editor messes it up every time a change is made.( we allow the customers to log in, then use a text editor to make changes).

 I think I can use a document.writeln() function to sort of isolate it, but I need someone to walk me through it. help?
Comment
Watch Question

Top Expert 2013

Commented:
What is it that they putting in through the text editor that breaks the page, and what is it you want to do with writeln() to correct it?

Author

Commented:
every time the home page is edited, the code for the accuweather widget changes from this:
 
<div style='width: 240px; height: 420px; background-image: url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/spring1_240x420_bg.jpg ); background-repeat: no-repeat; background-color: #607041;' ><div id='NetweatherContainer' style='height: 405px;' ><script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=28018&lang=eng&size=12&theme=spring1&metric=0&target=_self'></script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 15px; color: #FDEA11;' ><a style='font-size: 10px; color: #FDEA11' href='http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather'>Weather Forecast</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/maps-satellite.asp'>Weather Maps</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018' >Weather Radar</a></div></div>
 
to this:
 
<div style="width: 240px; height: 420px;" http:="" vortex.accuweather.com="" adcbin="" netweather_v2="" backgrounds="" spring1_240x420_bg.jpg="" background-repeat:="" background-color:="">
            <div style="height: 405px;" id="NetweatherContainer"><script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=28018<=eng&size=12&theme=spring1&metric=0&target=_self'></script></div>
            <div style="text-align: center; font-family: arial,helvetica,verdana,sans-serif; font-size: 10px; line-height: 15px; color: rgb(253, 234, 17);"><a href="http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather" style="font-size: 10px; color: rgb(253, 234, 17);">Weather Forecast</a> | <a href="http://www.accuweather.com/maps-satellite.asp" style="color: rgb(253, 234, 17);">Weather Maps</a> | <a href="http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018" style="color: rgb(253, 234, 17);">Weather Radar</a></div>
            </div>


Author

Commented:
I would like to isolate the code:
<div style="width: 240px; height: 420px;" http:="" vortex.accuweather.com="" adcbin="" netweather_v2="" backgrounds="" spring1_240x420_bg.jpg="" background-repeat:="" background-color:="">
            <div style="height: 405px;" id="NetweatherContainer"><script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=28018<=eng&size=12&theme=spring1&metric=0&target=_self'></script></div>
            <div style="text-align: center; font-family: arial,helvetica,verdana,sans-serif; font-size: 10px; line-height: 15px; color: rgb(253, 234, 17);"><a href="http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather" style="font-size: 10px; color: rgb(253, 234, 17);">Weather Forecast</a> | <a href="http://www.accuweather.com/maps-satellite.asp" style="color: rgb(253, 234, 17);">Weather Maps</a> | <a href="http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018" style="color: rgb(253, 234, 17);">Weather Radar</a></div>
            </div>

with the writeln()  so that it doesn't get touched by the text editor. What I have heard is that a document.writeln() function  leaves JavaScript code alone.
Top Expert 2013

Commented:
I think maybe you misunderstand what writeln does.  I inserts lines into the page.  I can be very dangerous to use.  What you need to do is re-establish the correct code.  If you put the whole correct piece of code as a javascript variable.  then wrap a div around the code with an id like"weather", then when they are finished editing trigger a function that inserts the correct code back in with

document.getElementById('weather').innerHTML=mysavedstring;

Open in new window


Author

Commented:
Ok, thanks- I am really going to have to have my hand held here. What exactly do I put in the source code in order to have that widget remain solid with no changes?
Top Expert 2013

Commented:
Okay, let's make sure we know what we want to do here.  I will figure how to put the code into a variable without breaking it.  Then I will show you how to use it.  Then we will have to figure out how to detect that the user has caused it to get damaged so we can fire a function to prevent it from messing things up.

First off I need to confirm this is the code we have to protect:

<div style="width: 240px; height: 420px;" http:="" vortex.accuweather.com="" adcbin="" netweather_v2="" 
backgrounds="" spring1_240x420_bg.jpg="" background-repeat:="" background-color:="">
            <div style="height: 405px;" id="NetweatherContainer">
<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=28018<=eng&size=12&theme=spring1&metric=0&target=_self'>
			</script></div>
<div style="text-align: center; font-family: arial,helvetica,verdana,sans-serif; font-size: 10px; line-height: 15px; color: rgb(253, 234, 17);">
<a href="http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather" 
style="font-size: 10px; color: rgb(253, 234, 17);">Weather Forecast</a> | 
<a href="http://www.accuweather.com/maps-satellite.asp" style="color: rgb(253, 234, 17);">Weather Maps</a> |
 <a href="http://www.accuweather.com/index-radar.asp?partner=accuweather&amp;zipcode=28018" style="color: rgb(253, 234, 17);">Weather Radar</a></div>
            </div>

Open in new window


Let me know, and I will set to work on it.

Author

Commented:
I just generated it from accuweather again, I'll attach it here.
<div style='width: 240px; height: 420px; background-image: url( http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/spring1_240x420_bg.jpg ); background-repeat: no-repeat; background-color: #607041;' ><div id='NetweatherContainer' style='height: 405px;' ><script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=28018&lang=eng&size=12&theme=spring1&metric=0&target=_self'></script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 15px; color: #FDEA11;' ><a style='font-size: 10px; color: #FDEA11' href='http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather' >Weather Forecast</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/maps-satellite.asp' >Weather Maps</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018' >Weather Radar</a></div></div>

Open in new window

Top Expert 2013

Commented:
Okay I've got the string.  The other thing I need to know about is this process of using an editor to change it. What kind of an editor, and what are they changing?

Author

Commented:
Ok- I'm not sure exactly what you need to know. It's a wysiwyg editor, I've attached a screenshot. Is there something in the code of the page I can look for to help? As for what they would change, they might go in and move a picture, or add some more text.  editor
Top Expert 2013

Commented:
Okay.  So they are not interacting with the weather widget, but something getting moved around or changed is triggering the problem.

I've just about finished with the function.  If you could play with that editor a bit and determine if things get messed up when they go in, when they come out, or just randomly when they are in it.  It will help you test if you know how to trigger the problem.
Top Expert 2013

Commented:
Okay here is the function.  I automated it so it does not need an event to fire it will continue to monitor whenever the page is loaded.  It will test the code integrity every 5 second and if the code is not correct, it will be restored from the string.

Here is the code:

<script type="text/javascript">

str = "<div 'weatherWrap'><div style='width: 240px; height: 420px; background-image: url( http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/spring1_240x420_bg.jpg );";
str+="background-repeat: no-repeat; background-color: #607041;' ><div id='NetweatherContainer' style='height: 405px;' >";
str +="<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle";
str +="=normal&logo=1&zipcode=28018&lang=eng&size=12&theme=spring1&metric=0&target=_self'>";
str+="</script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 15px; color: #FDEA11;' >";
str+="<a style='font-size: 10px; color: #FDEA11' href='http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather' >";
str+="Weather Forecast</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/maps-satellite.asp' >Weather Maps";
str+="</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018' >Weather Radar</a>";
str+="</div></div></div>";

function protectPage()
{
   if (document.getElementById('weatherWrap').innerHTML != str)
   {
      document.getElementById('weatherWrap').innerHTML =str;
	}
	ST=setTimeout('protectPage()', 5000);
}

onload=protectPage;
</script>

Open in new window


The script needs to be at the end of the head.  The last thing before the </head>  It will startup as soon as the page is loaded and then monitor continuously as long as the page is loaded.  To test it you will need to try and trigger the problem and see if the script prevents the problem or at least intervenes and recovers.  

Author

Commented:
Hi- Sorry, I got distracted by something shiny. The text editor makes the change to the code when it saves, and I am not sure why. I'll try this code, thanks for all your work!

Author

Commented:
hmmm... that may work, but it messed up the look of the page. I would have stopped to get a screenshot, but it's a live site and I just wanted to get it back to normal before the customer freaked. I guess maybe we should think about it over the weekend...thanks.
Top Expert 2013

Commented:
Yeah its getting to be that time.  I hear a cold beer calling my name...  Let me know when you are ready to proceed.  I'll look at the string it's very long and if I messed up just one character it could be a problem.




Cd&
Top Expert 2013

Commented:
mel200,

Don't try and use that script, the string is wrong.  When I woke up this morning I realized I made a mistake... actually 2 mistakes.  The string has a error -- too much in it, and there is a missing step in the implementation.  Let me know when you are ready and I will walk you through it.  Its not hard, but a mistake will just keep blowing it up. I'm going fix the string and I'll get back to you.


Cd&

Author

Commented:
OK- working in your sleep, huh? :) Let's work on it Monday if that's ok? If not, tomorrow I can do it.
Top Expert 2013

Commented:
Monday is good.  Sunday is a day for football, stock car racing, and maybe a little poker. :^)



Cd&

Author

Commented:
And beer-drinking.
Top Expert 2013

Commented:
That's a given. It is a critical part of all those other activities.


Cd&

Author

Commented:
I guess I let this sit a day too long, and I got heck from the experts-exchange bosses. have you had a chance to look at the code? Thanks.
Top Expert 2013
Commented:
A day or two is no big deal for me.  It is you who has the problem.

Okay, here is what I did wrong.  I included the new wrapper in the string instead of having you put it in the code. The result was that when the script started
up it did not find the wrapper so the if statement was true for the wrong reason and it tried to insert the code in a wrapper that did not exist.  I'm not sure
what it did at that point except it could not possibly work; but it would keep trying.  It could not do any permanent hard, but the page would get messed
up at some point.

So here is the script with the fixed string and an improved if statement:
<script type="text/javascript">

str = "<div style='width: 240px; height: 420px; background-image: url( http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/spring1_240x420_bg.jpg );";
str+="background-repeat: no-repeat; background-color: #607041;' ><div id='NetweatherContainer' style='height: 405px;' >";
str +="<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle";
str +="=normal&logo=1&zipcode=28018&lang=eng&size=12&theme=spring1&metric=0&target=_self'>";
str+="</script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 15px; color: #FDEA11;' >";
str+="<a style='font-size: 10px; color: #FDEA11' href='http://www.accuweather.com/us/nc/bostic/28018/city-weather-forecast.asp?partner=accuweather' >";
str+="Weather Forecast</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/maps-satellite.asp' >Weather Maps";
str+="</a> | <a style='color: #FDEA11' href='http://www.accuweather.com/index-radar.asp?partner=accuweather&zipcode=28018' >Weather Radar</a>";
str+="</div></div>";

function protectPage()
{
   if (document.getElementById('weatherWrap').innerHTML && document.getElementById('weatherWrap') != str)
   {
      document.getElementById('weatherWrap').innerHTML =str;
	}
	ST=setTimeout('protectPage()', 500);
}

onload=protectPage;
</script>

Open in new window


Now, before that can work you need to add the wrapper.  Just ahead of that weather code add <div 'weatherWrap'>
It is case sensitive. The begining of the code should then look like <div 'weatherWrap'><div style='width: 240px    ...  etc
Then at the end of the code close the div with </div>  The end should then look like </a></div></div></div>

With that done, the new vwersion of the script should now do what we expect it to do.

Sorry about the error ... I'll blame it on old age ;^)

Cd&

Author

Commented:
Great job! Thanks very much!
Top Expert 2013

Commented:
You did the patch, and provided all the information, I just did a little formatting.  Tell your boss I think you deserve a raise for sticking it out through a tough, messy problem. :^)


Cd&

Author

Commented:
:) thanks, I will do that. Right after my beer.
Top Expert 2013

Commented:

Explore More ContentExplore courses, solutions, and other research materials related to this topic.