Using document.writeln()

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?

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>

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.

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;

Select allOpen in new window

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?

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>

Select allOpen in new window

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

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>

Select allOpen in new window

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?

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.  

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.

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>

Select allOpen 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.  

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!

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.

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&

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&

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

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



Cd&

And beer-drinking.

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


Cd&

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.

Great job! Thanks very much!

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&

:) thanks, I will do that. Right after my beer.

beer-toast.jpg