Dreamweaver Templates / Doc Types and Javascript functions don’t work

@dfordJul 23.2010

I have a slight problem.

I have a dreamweaver template that is used on several pages.

I have been working on some server side (php) and client side(javascript) functions for a particular page. I made a blank page did my coding and all tested fine.

Next step take the page code and put it in the template. Here is the problem.
The javascript functions absolutely will not work with this doctype declaration.

[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>[/code]

So I removed this code from the page and wallah, the javascript works.. but the template layers go wacko and stuff is moved.

~~[B]~~How do I use the template, yet include page specific javascript functions?[/B]

So far I’ve tried added them to the template but that didn’t work. I’ve tried making a new page from template then detaching the template, but that didn’t work until I removed the doctype declaration which in turn hoses the layout.

/gesture hair pull

Any help or links appreciated.

to post a comment

JavaScript

9 Comments(s) _↴

@PadonakJul 23.2010 — #

- use the Firebug and you'll see what's going wrong

- no code no thought

@dfordauthorJul 23.2010 — #I'll look into firebug

The problem was related to the css and and some images having an id that was in conflict with layer positioning layers. Thus some images were being moved.

Oddly enough though, the template doc type declaration still prevents javascript page specific functions from being executed, however I was able to circumvent the issue by detaching the page from the template and fixing the layer positioning and id's.

I didn't think I needed to post any additional code because the problem seemed to be related to the doctype declaration. Also, we are talking about thousands of lines of codes between the page / template and css.

@skywalker2208Jul 23.2010 — #We are not going to sit here guessing on what the problem could be? Easier to determine if we have a link or code.

@dfordauthorJul 23.2010 — #Sorry I read my response and perhaps I sounded a little hasty. That wasn't my intent. This forum has been very helpful to me and didn't mean any disrespect if it sounded like it.

I was only trying to prevent a huge post with tons of code that would have looked daunting.

I agree I should have posted a link.

Thanks again,

Don

@dfordauthorJul 25.2010 — #[B]Help Still Needed and Appreciated[/B]

Please view this page in FF and IE:

http://www.moldedrubberseals.com/oring_select2.php

Use a few dropdowns to see functionality.

Currently in FF the onchange javascript doesn't work. In IE it does.

If I remove the doctype declaration, it works in FF but IE is unable to handle the CSS positioning.

My goal of course is to get the page to work in both IE and FF.

The Code:

[CODE]<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script language="JavaScript" type="text/javascript" src="js/reload.js"></script>
 <link href="CSS/Oring_Main.css" rel="stylesheet" type="text/css" />
 </head>
 [B].....CODE REMOVED TO SHORTEN POST SQL QUERIES..[/B]
 <form method="post" name="f1" action="oring_select2.php">
 <?php
 
 ///////////////////////// START MATERIAL & MEASURE SELECT BOXES ////////////////////////////////////
 // Starting First Select Box Materials
 echo "<tr><td><span class='std_text'>Select O-ring Material Type: </span><select name='cat' onchange="reload(this.form)"><option value=''>Select one</option>";
 WHILE($noticia = mysql_fetch_array($quer2)) { 
 if($noticia['products_material_type']==@$cat){echo "<option selected value='$noticia[products_material_type]'>$noticia[products_material_type]</option>";}
 else{echo  "<option value='$noticia[products_material_type]'>$noticia[products_material_type]</option>";}
 }
 echo "</select></td></tr>";
 
 // END Material Select
 
 //Starting Durometer Selection Box
 echo "<tr><tr><td><br></td></tr><td><span class='std_text'>Select Durometer: </span><select name='duro' onchange="reload8(this.form)"><option value=''>Select one</option>";
 while ($row2 = mysql_fetch_array($querduro)) {
 if ($row2['products_durometer']==@$duro) {echo "<option selected value='$row2[products_durometer]'>$row2[products_durometer]</option>";}
 else {echo "<option value='$row2[products_durometer]'>$row2[products_durometer]</option>";}
 }
 echo "</select></td></tr>";
 
 /// END Durometer Dropdown
 
 //Starting Measurement Selection Box
 echo "<tr><td><BR></td></td></tr><td><span class='std_text'>Select Measurment Type: </span><select name='measure' onchange="reload2(this.form)"><option value=''>Select one</option>";
 while ($row1 = mysql_fetch_array($qeurmeasure)) {
 if ($row1['type']==@$measure) {echo "<option selected value='$row1[type]'>$row1[type]</option>";}
 else {echo "<option value='$row1[type]'>$row1[type]</option>";}
 }
 if (($measure) != AS568 ){
 echo "</select></td>";
 }else{ echo "</select>";
 }
 
 
 ///Starting placeholder selections boxes
 if(!isset($measure) or strlen($measure) <1 ) {
 echo "<tr><td><br><span class='std_text'>Cross Section: </span><select name='oring_cs' disabled><option value=''>Select one</option>";
 echo "</select>"; 
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='oring_id' disabled><option value=''>Select one</option>";
 echo "</select></td></tr>"; 
 }
 //////////END PLACE HOLDERS
 /////////////////// START AS568 SELECT BOX //////////////////////// 
 if(isset($measure) AND ($measure=='AS568')) {
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Dash #: </span><select name='as568' onchange="reload7(this.form)"><option value=''>Select one</option>";
 WHILE($row = mysql_fetch_array($queras568)) {
 echo "<option value='$row[products_as568]'>-$row[products_as568]</option>";
 }
 echo "</select></td></tr>";
 
 // Starting AS568 CS Select
 echo "<tr><td><br><span class='std_text'>Cross Section: </span><select name='as_cs' style='width: 70px' disabled>";
 WHILE($noticia_as_cs = mysql_fetch_array($queras_cs)) { 
 if($noticia_as_cs['products_s_cs']==@$ascs){echo "<option value='$noticia_as_cs[products_s_cs]'>$noticia_as_cs[products_s_cs]</option>";}
 else{echo  "<option value='$noticia_as_cs[products_s_cs]'>$noticia_as_cs[products_s_cs]</option>";}
 }
 
 echo "</select>"; 
 // Starting AS568 ID Select
 
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='as_id' style='width: 70px' disabled>";
 WHILE($noticia = mysql_fetch_array($queras_id)) { 
 if($noticia['products_s_id']==@$asid) {echo "<option value='$noticia[products_s_id]'>$noticia[products_s_id]</option>";}
 else{echo "<option value='$noticia[products_s_id]'>$noticia[products_s_id]</option>";}
 }
 echo "</select></td></tr>"; 

 ////////END AS568A Selections
 
  }elseif(isset($measure) AND ($measure=='Inch')){
 
 ///////////////////////// START INCH SELECT BOXES ////////////////////////////////////
 // Starting 2cnd Select Box for Standard Cross Section
 echo "<tr><td><br><span class='std_text'>Cross Section: </span><select name='subcat' onchange="reload3(this.form)"><option value=''>Select one</option>";
 WHILE($noticia_s_cs = mysql_fetch_array($quer)) { 
 if($noticia_s_cs['products_s_cs']==@$cat3){echo "<option selected value='$noticia_s_cs[products_s_cs]'>$noticia_s_cs[products_s_cs]</option>";}
 else{echo  "<option value='$noticia_s_cs[products_s_cs]'>$noticia_s_cs[products_s_cs]</option>";}
 }
 echo "</select>";
 // End Second Drop down
 
 // Starting 3rd Select box for Standard Inside Diameter
 if(isset($cat3) AND strlen($cat3) > 0){
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='subcat3' onchange="reload5(this.form)"><option value=''>Select one</option>";
 WHILE($noticia_s_id = mysql_fetch_array($quer3)) { 
 if($noticia_s_id['products_s_id']==@$subcat3) {echo  "<option value='$noticia_s_id[products_s_id]'>$noticia_s_id[products_s_id]</option>";}
 else{echo "<option value='$noticia_s_id[products_s_id]'>$noticia_s_id[products_s_id]</option>";}
 }
 echo "</select>";
 echo "</td></tr>";
 }else{
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='holderInchID' disabled><option value=''>Select one</option>";
 echo "</select></td></tr>";
 }
 // End Third Drop Down
 
 ///////////////////////// END INCH SELECT BOXES ////////////////////////////////////<br>
 
  }elseif(isset($measure) AND ($measure=='Metric')) {
 //////////////////// METRIC SELECT BOXES ////////////////////////////
 // Starting Select Box for Metric Cross Section
 echo "<tr><td><br><span class='std_text'>Cross Section: </span><select name='mcs' onchange="reload4(this.form)"><option value=''>Select one</option>";
 WHILE($noticia = mysql_fetch_array($quermcs)) { 
 if($noticia['products_m_cs']==@$cat2){echo "<option selected value='$noticia[products_m_cs]'>$noticia[products_m_cs]</option>";}
 else{echo  "<option value='$noticia[products_m_cs]'>$noticia[products_m_cs]</option>";}
 }
 echo "</select>";
 // End Second Drop down
 
 // Starting Select box for Metric Inside Diameter
 if(isset($cat2) AND strlen($cat2) > 0){
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='mid' onchange="reload6(this.form)"><option value=''>Select one</option>";
 WHILE($noticia = mysql_fetch_array($quermid)) { 
 echo  "<option value='$noticia[products_m_id]'>$noticia[products_m_id]</option>";
 }
 echo "</select>";
 echo "</td></tr>";
 }else{
 echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='std_text'>Inside Diameter: </span><select name='holderMetricId' disabled><option value=''>Select one</option>";
 echo "</select></td></tr>";
 }
 }
 //END Metric Select Box
 /////////////////// END METERIC SELECT BOXES ////////////////////////
 echo "</form>";
 
 ?>
 </table>
 </body>
 </html>[/CODE]

The javascript reload functions:

[CODE]function reload(form)
 {
 var val=f1.cat.options[f1.cat.options.selectedIndex].value; 
 self.location='oring_select2.php?cat=' + val ;
 }
 function reload2(form)
 {
 var val=f1.cat.options[f1.cat.options.selectedIndex].value;
 var val2=f1.measure.options[f1.measure.options.selectedIndex].value;
 var val5=f1.duro.options[f1.duro.options.selectedIndex].value;
 self.location='oring_select2.php?cat=' + val + '&measure=' + val2 + '&duro=' + val5 ;
 }
 function reload3(form)
 {
 var val=f1.cat.options[f1.cat.options.selectedIndex].value;
 var val2=f1.measure.options[f1.measure.options.selectedIndex].value;
 var val3=f1.subcat.options[f1.subcat.options.selectedIndex].value;
 var val5=f1.duro.options[f1.duro.options.selectedIndex].value;
 self.location='oring_select2.php?cat=' + val + '&measure=' + val2 + '&duro=' + val5 + '&cat3=' + val3  ;
 }[/CODE]

Just to make sure see if there was a problem with linking to the js folder and page I put in a simple function Showalert { alert9('poo'); } and called it with the pages onchange event from the dropdowns and it worked fine. So there is something inherently wrong with my code and the doctype declarations.

@PadonakJul 25.2010 — #

[CODE]function reload(form)
 {
 var val=[B][COLOR="Red"]f1[/COLOR][/B].cat.options[f1.cat.options.selectedIndex].value; 
 self.location='oring_select2.php?cat=' + val ;
 }
 [/CODE]

FF shows error on this line 'f1 is not defined'. i think if you replace all these 'f1' with document.forms['f1'] or just add [I]var f1 = document.forms['f1'][/I] as the first line for this and the other functions operationg with this form everything is going to work

@dfordauthorJul 25.2010 — #Thank you Padonak

adding var f1 = document.forms['f1'] to the functions did the trick.

Just out of curiosity what did you use to see the undefined variables?

I did install firebug earlier but didn't see any reporting tools like that.

@Declan1991Jul 25.2010 — #Either the console of Firebug (it's disabled by default), or the error console in Firefox itself (tools -> Error Console).

@PadonakJul 26.2010 — #... what did you use to see the undefined variables?

...[/QUOTE]

Firebug ;-))

Also in #JavaScript _↴

load some images to a div Problem appending image icon to links Take me to 'a particular Page' Box

Success!

Help @dford spread the word by sharing this article on Twitter...

Tweet This

Dreamweaver Templates / Doc Types and Javascript functions don’t work

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Dreamweaver Templates / Doc Types and Javascript functions don’t work

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴