Javascript works fine on one Linux server, throws error on another

I built a website using Joomla. I have it on a testing server and it is now live.

I use a custom Javascript that searches a web page for instances of a customer's name and put it into a different font. The script is as follows:

<style>
body { font-family: Helvetica, Arial, sans-serif; }
</style>
// JavaScript Document
function setFont() {
   var cName = 'w3r';  
   var regExp = new RegExp(cName, 'g');
   var allEl=document.getElementsByTagName('DIV');
   for (var i=0; i<allEl.length; i++) {
            if (allEl[i].innerHTML != '')
                  allEl[i].innerHTML=allEl[i].innerHTML.replace (regExp , '<span style="font-family:Georgia;">'+cName+'</span>');
   }  
}
window.onload=setFont;
//

Here is the issue. The script runs PERFECTLY on my testing server: http://www.johnhardwick.com/index.php

However, when I test it on the customer's server, it throws an error everywhere that the customer name is encountered. Please see the attached screen shot, since I can't have it throwing the error on a live site. The live site is www.w3r.com.

Both servers are hosted with the same web company on Linux. I have checked the file set up on both servers and can't seem to pinpoint the issue.

Any insight or suggestions on troubleshooting would be appreciated.


javascript-error.jpg
jhardwickAsked:
Who is Participating?
 
Bane83Connect With a Mentor Commented:
*Smacks forehead* Of course!

The problem isn't with your onloads or anything like that, the problem is with your script itself.
You're going to every div on the page and replacing the text w3r with <span style="font-family:Georgia;">w3r</span>, but the problem is that some of those divs contain images/links!  Here's what this means:

As an example, let's take this line from your site:
<li class="bg0 active"><span><a href="http://johnhardwick.com/index.php?option=com_frontpage&Itemid=1">Home</a></span></li>

On the live site this will turn into:
<li class="bg0 active"><span><a href="http://www.w3r.com/index.php?option=com_frontpage&Itemid=1">Home</a></span></li>

But after your script runs this will turn into:
<li class="bg0 active"><span><a href="http://www.<span style="font-family:Georgia;">w3r</span>.com/index.php?option=com_frontpage&amp;Itemid=1">Home</a></span></li>

And there's where your problem lies.  Now, here's where it may get really tricky, or very easy...  I see that you've used <p> tags, this is great.  I'm hoping that you put <p> tags around any text that may contain w3r, but I'm also hoping that you didn't put any links or images within <p> tags...  If that's the case, it's as easy as changing your script to look for <p> tags rather than divs.  Otherwise, you have to beef up your script big time unless you want to go through your entire site and add a <span> around w3r so that you can apply a style directly to it.

Now, regex's aren't exactly my strong point, so here's the best I can do for you:
function setFont()
{
      var cName = 'w3r';  
      var regExp = new RegExp(cName + '(?!.com)', 'g');
      var allEl=document.getElementsByTagName('DIV');
      for (var i=0; i<allEl.length; i++)
      {
              if (allEl[i].innerHTML != '')
                     allEl[i].innerHTML=allEl[i].innerHTML.replace (regExp , '<span style="font-family:Georgia;">'+cName+'</span>');
      }
}
0
 
Bane83Commented:
I would throw a debugger; statement near the beginning of that script to step through it line by line.
It is possible to debug javascript in IE (provided you have something installed to do this such as Visual Studio) by first (in IE) going to Tools -> Internet Options.  In the popup choose the Advanced tab and then under "Browsing" uncheck the 2nd and 3rd item ("Disable script debugging).  Once you do that, you can add a "debugger;" statement to the beginning of your javascript:

function setFont() {
  debugger;
   var cName = 'w3r';

My immediate thought is that it's possible that their server doesn't like the two window.onload functions (one in your m3r.js file and another one for your RokZoom init function.  You might want to try a single function that calls each of your initialization functions and call that on window.onload.
0
 
jhardwickAuthor Commented:
Thanks for the feedback. I will try that. Is it possible that one server will allow two window.onload functions and another lets it right through? This seems to be what's happening.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Bane83Commented:
I'm not entirely certain that it's the case, but in my experience with mystery bugs I've come to learn that the most bizarre explanation is usually the right one. :P
0
 
jhardwickAuthor Commented:
>>You might want to try a single function that calls each of your initialization functions and call that on window.onload.
I would like to try this. Can you give me an example?
0
 
Bane83Commented:
Sure, see the code sample below.

Don't forget to remove the existing script tag that does the RokZoom init:
window.addEvent('load', function() {
                  RokZoom.init({
                        imageDir: 'templates/rt_simplix/rokzoom/images/',
                        resizeFX: {
                              duration: 700,
                              transition: Fx.Transitions.Cubic.easeOut,
                              wait: true
                        },
                        opacityFX: {
                              duration: 500,
                              wait: false      
                        }
                  });
            });

since it's now been moved into the combined function below.
Also make sure that none of your other script files use the onload event.  If they do, move them into initMyPage();

 
function initMyPage()
{
   setFont();
 
   RokZoom.init({
				imageDir: 'templates/rt_simplix/rokzoom/images/',
				resizeFX: {
					duration: 700,
					transition: Fx.Transitions.Cubic.easeOut,
					wait: true
				},
				opacityFX: {
					duration: 500,
					wait: false	
				}
			});
 
}
 
window.onload= initMyPage;

Open in new window

0
 
jhardwickAuthor Commented:
Hi: This is what I put in (see below). What is odd is that no error comes up, but I don't see the setFont function in the source code online.

//
<script type="text/javascript">
function initMyPage()
{
   setFont(function setFont() {
   var cName = 'w3r';  
   var regExp = new RegExp(cName, 'g');
   var allEl=document.getElementsByTagName('DIV');
   for (var i=0; i<allEl.length; i++) {
            if (allEl[i].innerHTML != '')
                  allEl[i].innerHTML=allEl[i].innerHTML.replace (regExp , '<span style="font-family:Georgia;">'+cName+'</span>');
   }  
}
window.onload=setFont;
);
   RokZoom.init({
      imageDir: 'templates/rt_simplix/rokzoom/images/',
      resizeFX: {
      duration: 700,
      transition: Fx.Transitions.Cubic.easeOut,
wait: true
      },
      opacityFX: {
      duration: 500,
      wait: false      
      }
      });
};
window.onload= initMyPage;
</script>
//

0
 
Bane83Commented:
<script type="text/javascript">
function setFont()
{
      var cName = 'w3r';  
      var regExp = new RegExp(cName, 'g');
      var allEl=document.getElementsByTagName('DIV');
      for (var i=0; i<allEl.length; i++)
      {
              if (allEl[i].innerHTML != '')
                     allEl[i].innerHTML=allEl[i].innerHTML.replace (regExp , '<span style="font-family:Georgia;">'+cName+'</span>');
      }
}

function initMyPage()
{
      setFont();

      RokZoom.init({
      imageDir: 'templates/rt_simplix/rokzoom/images/',
      resizeFX: {
      duration: 700,
      transition: Fx.Transitions.Cubic.easeOut,
wait: true
      },
      opacityFX: {
      duration: 500,
      wait: false      
      }
      });
}

window.onload= initMyPage;
</script>
0
 
jhardwickAuthor Commented:
Thanks so much for the correction. Unfortunately it threw the exact same error I experienced earlier. Is there anything else you can recomend to try?
0
 
jhardwickAuthor Commented:
Thanks for keeping with me on this! I am going to work through your suggestion this weekend and I'll keep you updated.
0
 
Bane83Commented:
No worries.  I'm just sorry it took me so long to realize it.

I was staring at the screenshot and wondering what I was looking at.  No error message I've ever seen looked like that... then I realize that they're just URLs that aren't being handled properly for some reason... I stare at the URLs trying to figure it out and then I smacked myself. :P
0
 
jhardwickAuthor Commented:
Looking good so far!

I did have to replace 'DIV' with 'p' because there are some pages that include images and links within the tags.

If the company name is used within h1, h2, h3, or li tags, would I need to add those to the script as follows?

//
var allEl=document.getElementsByTagName('p', 'h1', 'h2', 'h3', 'li');
//

It seems like that would work, but while it continues to fine and replace the company name within the 'p' tag beautifully the other tags are ignored. Thanks again for the help, and let me know if you can shed some light on this!
0
 
Bane83Commented:
You can only do one tag type at a time, so you'd have to do something like

var tagsToFind = ['p', 'h1', 'h2', 'h3', 'li'];
var cName = 'w3r';  
var regExp = new RegExp(cName + '(?!.com)', 'g');
   
for (i = 0; i < tagsToFind.length; i++)
{
      var allEl=document.getElementsByTagName(tagsToFind[i]);
      for (var i=0; i<allEl.length; i++)
      {
              if (allEl[i].innerHTML != '')
                     allEl[i].innerHTML=allEl[i].innerHTML.replace (regExp , '<span style="font-family:Georgia;">'+cName+'</span>');
      }
}

But I believe that if you leave the script as it was (only looking at divs), it may still work with the change I made to the RegExp statement.  If you'll notice, I changed it to look like this:

var regExp = new RegExp(cName + '(?!.com)', 'g');

What this means is that if the page contains w3r, but w3r is not directly followed by .com, then it's a match.  I believe this should work.  Go ahead and give it a try with divs.  It'd sure be a lot easier than having to go through all the various objects that might have w3r in it.
0
 
jhardwickAuthor Commented:
Right. It does work well with the 'DIV' instead of 'p' except where there are images. Joomla seems to handle them a bit differently. I'm going to play around with it a bit and I'll post what happens.
0
 
Bane83Commented:
Hmm.  You may have to flesh out your regex a bit more, but there's not much I can do there.  As I said, regexs aren't really my strong point.

HOWEVER!  I can give you this link:
http://www.regextester.com/

That's what I used to test the previous regex before I posted it.  Very handy!
0
 
jhardwickAuthor Commented:
Perfect, perfect, perfect.

I just had to make sure all images had the company name removed and the files renamed where necessary.

Working like a charm now. Thanks so much for the help!
0
All Courses

From novice to tech pro — start learning today.