Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Java Scripts interaction on page causes one to fail

Posted on 2008-10-19
8
Medium Priority
?
481 Views
Last Modified: 2010-03-18
I added this code:
<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze"></script>

To add a test contact form to the right-hand side of this page:
http://www.onezer.com/pricing2 

And it caused my header slideshow that can be seen working correctly on this page to disappear:

Attached is the source of the page where the slideshow is not showing up after I inserted the code above to try to insert a contact form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	  <base href="http://www.onezer.com/pricing2" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="ONEzer, websites made easy, webdesign, web design, web maintenance, webhosting, web hosting, website design, website, build websites," />
  <meta name="title" content="Pricing 2" />
  <meta name="author" content="Administrator" />
  <meta name="description" content="ONEzer the easiest way to get your own website. We build it. We maintain it. You can edit it." />
 
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Pricing 2</title>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>
  <script type="text/javascript" src="http://www.onezer.com/modules/mod_rokheadrotator/tmpl/rokheadrotator.js"></script>
 
	
<link rel="shortcut icon" href="/images/favicon.ico" />
 
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/template.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/rokslidestrip.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/light.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/menustyle4-light.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/rokzoom/rokzoom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	div.wrapper { margin: 0 auto; width: 962px;padding:0;}
	/* clear fixes for pure css layout */
	    #maincol {float: left; margin-right: -250px; width: 100%;}
    #maincol-container {margin-right:250px;}
    #sidecol {float: right; width: 250px;}
    </style>	
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/rokslidestrip.js"></script>
<script type="text/javascript" src="/templates/rt_hivemind_j15/rokzoom/rokzoom.js"></script>
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/rokfonts.js"></script>   
<script type="text/javascript">
	window.addEvent('load', function() {
		var modules = ['module','module-menu','module-color1','module-color2','module-color3','module-color4','module-style1','module-style1-color1','module-style1-color2','module-style1-color3','module-style1-color4','module-style2','module-style2-color1','module-style2-color2','module-style2-color3','module-style2-color4'];
		var header = "h3";
			    RokBuildSpans(modules, header);
        	});
</script>
	
 
<!--[if IE]>
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/ie_suckerfish.js"></script>
<![endif]-->
	
<script type="text/javascript">
	window.addEvent('load', function() {
		RokZoom.init({
			imageDir: '/templates/rt_hivemind_j15/rokzoom/images/',
			resizeFX: {
				duration: 700,
				transition: Fx.Transitions.Cubic.easeOut,
				wait: true
			},
			opacityFX: {
				duration: 500,
				wait: false	
			}
		});
	});
</script>
	</head>
	<body id="ff-optima" class="f-default light">
		<!-- begin wrapper -->
		<div class="wrapper">
			<!-- begin top section -->
			<div id="top">
				
 
									
			</div>
 
			<!-- end top section -->
			<!-- begin mainbody -->
			<div id="mainbody-top">
				<div id="mainbody-top2">
					<div id="mainbody-top3">
					</div>
				</div>
			</div>
			<div id="mainbody">
 
				<!-- begin header -->
				<div id="header">
					<a href="/" class="nounder"><img src="/images/blank.png" border="0" alt="" id="logo" /></a>
					<div id="horiz-menu" class="splitmenu menustyle4">
						<div id="horiz-menu2">
															<ul class="menutop"><li class="item1"><a href="http://www.onezer.com/"><span>Home</span></a></li><li class="item41"><a href="/pricing"><span>Pricing</span></a></li><li class="item42"><a href="/themes"><span>Themes</span></a></li><li class="item43"><a href="/faq"><span>FAQ</span></a></li><li class="item44"><a href="/customer-support"><span>Support</span></a></li></ul>								
						</div>
 
					</div>
				</div>
				<!-- end header -->
								<div id="mainbody-padding">
					<!-- begin maincolumn -->
					<div id="maincol">
					    <div id="maincol-container">
	    					    						<div id="showcase">
    									<div class="module">
 
			<div>
				<div>
					<div>
												<div id="rokheadrotator"></div>
	<script type="text/javascript">
		window.addEvent('load', function(){
				var headers = [];
 
									headers.push('http://www.onezer.com/images/stories/showcase/light/1_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/2_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/3_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/4_slide.jpg');
								
				var rok = new RokHeadRotator('rokheadrotator', headers, {
        		    'duration': 1000,
        		    'delay': 9000,
        			'start': 0,
        			'autoplay': 1,
        			'controls': 0,
        			'blank': 'http://www.onezer.com//images/blank.png'
        		});
			
			});
			</script>
					</div>
				</div>
			</div>
 
		</div>
	
    						</div>
    						    						    						
    						<div id="body-padding">
							    
<table class="contentpaneopen">
 
 
 
<tr>
<td valign="top">
<p align="right"><img src="/images/stories/pricing_graphic_11.jpg" border="0" /></p><table border="0" width="350" align="right"><tbody><tr><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405544"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405399"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405553"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td></tr></tbody></table>
 
</td>
</tr>
 
</table>
<span class="article_separator">&nbsp;</span>
 
							</div>
    						    					</div>
					</div>
					<!-- end maincolumn -->
					<!-- begin sidecolumn -->
											<div id="sidecol">
							<div id="sidecol-padding">
 
																		<div class="module">
			<div>
				<div>
					<div>
											<a href="/pricing"><div style="text-align: center"><img src="/images/stories/go_purchase_3.jpg" border="0" /></div></a>					</div>
				</div>
			</div>
		</div>
 
			<div class="module">
			<div>
				<div>
					<div>
											<a href="/pricing"><div align="center"> <img src="/images/stories/picture11.png" border="0" /></div></a><a href="/pricing"><div style="text-align: center"> </div><div style="text-align: center"> </div></a><p align="center"><a href="http://www.redcurbwebsites.com" target="_blank"><img src="/images/stories/picture12.png" border="0" /></a></p>					</div>
				</div>
			</div>
 
		</div>
			<div class="module">
			<div>
				<div>
					<div>
													<h3>form test</h3>
											<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze">a</script>					</div>
 
				</div>
			</div>
		</div>
								</div>
						</div>
										<!-- end sidecolumn -->
					<div class="clr"></div>
				</div>
			</div>
 
			<!-- end mainbody -->
			<!-- begin bottom section -->
						<div id="mainbody-bottom">
				<div id="mainbody-bottom2">
					<div id="mainbody-bottom3">
					</div>
				</div>
			</div>
			<!-- end bottom section -->
 
							<div align="center">
				<div id="footer">
							<div class="moduletable">
					<p align="center"><a href="http://www.onezer.com"><br />Home</a> | <a href="/../pricing">Pricing</a> | <a href="/../themes">Themes</a> | <a href="/../support">Support</a> | <a href="/../faq">FAQ</a> </p><p align="center">Copyright © 2008 ONEzer.com - All Rights Reserved</p><p align="center">A <a href="http://www.redcurbsolutions.com/">RedCurb Company</a></p><p>&nbsp;</p>		</div>
 
	
				</div>
				</div>
					</div>
		<!-- end wrapper -->
 
<!-- START Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5986150-1");
pageTracker._trackPageview();
</script>
<!-- END Google Analytics -->
 
	</body>
 
</html>

Open in new window

0
Comment
Question by:glopicon
7 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754220
First, you do NOT want to link to a javascript file on an external website.  What if that site is down, or what if they move the page?  That is a PHP query link, they can change any and every week.  Bad practice.

Second, it is ALL done in document.write -- that causes the ENTIRE page to be refreshed and only the code in that file will appear on the page.  i.e. no matter what else you have on a page, a series of document.writes will cause a complete page clear and ONLY the stuff in that file will appear.

So you need to use functions and write what you want.  If this is a form, you put everything you want in the form, and do not use document.write for any of it.
0
 

Author Comment

by:glopicon
ID: 22754279
The website is built using Joomla, could that be the problem? If so, how can I fix it?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754440
yes joomla can be a problem, but in your case, a javascript involving document.write(s) is the problem.  
"And it caused my header slideshow that can be seen working correctly on this page to disappear:"
That is exactly what document.write will do.  Why not just say what you want to add to the page, and add it correctly in the HTML without using someone else's code that does not apply to your site.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22754524
It's not a problem with Joomla.
You are using MooTools library, and the script you included uses Prototype.  MooTools and Prototype are not compatible, and it's going to be very painful trying to make them work together.

I recommend that you load the form in an iframe.
Something like this:
test.html:
<iframe src="test1.html"></iframe>
 
test1.html:
<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze"></script>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754622
look at the link given at the very Top of the question -- this is all document writes, and as such, it will overwrite any page content with what is in the document write code -- which is exactly what he sees.  What library it comes from is irrelevant -- document.writes cause a page rewrite, and that needs to be removed if he wants his page to remain as he coded it.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22754648
The  document.write is not the problem.
MooTools is failing because the included script uses Prototype, and thus his slideshow no longer works.
Prototype and MooTools both use many same named global variables, as well as many other issues.
Thus causing his slideshow (based on MooTools) to fail.

If the included script from formspring is contained in an iframe, it will not effect the parent page.
So all he needs to do is create a page like test1.html with the script included.
And then add an <iframe src="test1.html"></iframe> to his main page in place of the div he used.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 27647139
scrathcyboy: document.write inline is fine. document.write after page load is deadly.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question