PHP include messes with jQuery

Question

Everytime I'm trying to build a jQuery app in my homepage, the app starts to do things on it's own and stops responding my requests. For instance, I'm trying to implement an image slider and when I run the page, the play/pause button doesn't work and you can see images overlapping over each other. But then when I delete all my PHP includes, it runs normally without any error. Is this a common error and is there a way to make jQuery accept the existance of includes without loosing control?

<?php
function customPageHeader(){?>

<!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>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />

<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/slider/jquery.slider.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".slider").slideshow({
        width      : 900,
        height     : 325,
        transition : 'slide'
      });
    });
  </script>
</head>
<body>

<?php }
include_once('header.php');
?>

<div class="content">
  <div class="content_01">
    <div class="slider2"> 
    <div id="wrapper">
  <div class="slider">
    <div> <img src="assets/serie_1.jpg" alt=""/> </div>
    <div> <img src="assets/serie_2.jpg" alt=""/> </div>
    <div> <img src="assets/serie_3.jpg" alt=""/> </div>
    <div> <img src="assets/serie_4.jpg" alt=""/> </div>
  </div>
</div>
    </div>
  </div>
</div>
<div style="float:none; clear:both;"></div>

<?php
include_once('footer.php');
?>

</body>
</html>

In my header.php, I have:

<!doctype html>
<html>
<head>
<!-- ****************  CSS CALL  ************************** -->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- ************  JAVASCRIPT CALL  *********************** -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/ablaze_hyper-block.js"></script>
<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>

<?php if (function_exists('customPageHeader')){
      customPageHeader();
    }?>
</head>

<body>
<div class="header">
  <div class="h_wrapper">
    <div class="logo"><a href="/"></a></div>
    <div class="navigation">
      <ul class="n_list">
        <li class="tab_select01"><a href="/">TEST</a></li>
        <li class="tab_select02"><a href="#">TEST</a></li>
        <li class="tab_select03"><a href="#">TEST</a></li>
        <li class="tab_select04"><a href="contacto.php">TEST</a></li>
      </ul>
    </div>
    <div class="hb_wrapper">
      <div class="hyper_block">
        <div class="icon fb_icon"><a href="#" target="_blank"><img src="images/hyper_block/fb_icon.png"/></a></div>
        <div class="icon tw_icon"><a href="#"  target="_blank"><img src="images/hyper_block/tw_icon.png"/></a></div>
        <div class="icon lg_icon"><a href="#"><img src="images/hyper_block/lg_icon.png"/></a></div>
        <div class="icon nl_icon"><a href="#"><img src="images/hyper_block/nl_icon.png"/></a></div>
        <div class="fb_content"> <a href="#"  target="_blank"><img src="images/hyper_block/fb_content.png"/></a></div>
        <div class="tw_content"><a href="#"  target="_blank"><img src="images/hyper_block/tw_content.png"/></a></div>
        <div class="lg_content"></div>
        <div class="nl_content">
          <ul>
            <li>TEST</li>
          <li><form id="h_nl_form" charset="utf-8" >
          <table width="160" border="0" cellspacing="0" cellpadding="0" style="margin-left:3px;">
  <tr>
    <td><input type="text" id="h_nl_fname" class="h_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
    <td><input type="text" id="h_nl_lname" class="h_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
  </tr>
</table>
<table width="160" border="0" cellspacing="0" cellpadding="0"  style="margin-left:3px;">
  <tr>
    <td width="132"><input type="text" id="h_nl_email" class="h_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
    <td><input type="button" class="h_btn" value=">"/></td>
  </tr>
</table></form><div class="h_error_display"></div>
<div class="h_success_display"></div>
</li>

          </ul>

        </div>
      </div>
    </div>
  </div>
</div>
<div style="float:none; clear:both;"></div>
</body>
</html>

In my footer.php, I have:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>

<?php if (function_exists('customPageHeader')){
      customPageHeader();
    }?>
</head>

<body>
<div style="float:none; clear:both;"></div>
<div class="footer">
<div class="f_bar_top"></div>
  <div class="f_wrapper">
    <ul>
      <li><a href="index.php" ><img src="images/logo.png"/></a><br/>
        <h1 class="h_footer">CONTACTE-NOS</h1>
        <br/>
        <table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="35"><img src="images/contactos/f_email_icon.png"></td>
    <td><h3 class="h_footer"><p><a href="mailto:#" title="#">#</a></p></h3></td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="35"><img src="images/contactos/f_telf_icon.png"></td>
    <td><h3 class="h_footer">+351 91 000 00 00</h3></td>
  </tr>
</table>
        <br/>
      </li>
      <li><br/>
      <p><h1 class="h_footer">LINKS POPULARES</h1></p>
        <h3 class="h_footer"><p><a href="/">INÍCIO</a></p>
        <p><a href="">SERVIÇOS</a></p>
        <p><a href="">PORTEFÓLIO</a></p>
       <p><a href="">QUEM SOMOS</a></p>
        <p><a href="contacto.php">CONTACTO</a></p></h3>
        </li>
      <li><br/><h1 class="h_footer">ACOMPANHE-NOS</h1>
      <table width="220" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:8px;">
  <tr>
    <td width="35" height="30"><a href="#" target="_blank" title="facebook"><img src="images/contactos/f_facebook.png"></a></td>
    <td><a href="#" target="_blank" title="#">#</a></td>
  </tr>
  <tr>
    <td width="35"><a href="#" target="_blank" title="twitter"><img src="images/contactos/f_twiter.png"></a></td>
    <td><a href="#" target="_blank" title="#">#</a></td>
  </tr>
</table><h2 class="h_footer">NEWSLETTER</h1>
<form id="nl_form" charset="utf-8" >
<table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="112"><input type="text" id="f_nl_fname" class="f_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
    <td><input type="text" id="f_nl_lname" class="f_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
  </tr>
</table>
<table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="184"><input type="text" id="f_nl_email" class="f_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
    <td><input type="button"  class="f_btn" value=">>"></td>
  </tr>
</table>
</form>
<div class="f_error_display"></div>
<div class="f_success_display"></div>

      </li>
      <li class="f_last"></li>
    </ul>
  </div>
 <div class="f_bar_bottom"><div style="float:none; clear:both;"></div></div>
</div>
</body>
</html>

SOLUTION: Got the solution by removing all the <html>, <head>, <body> declarations from header.php and footer.php, leaving only the <div> tags.

Server side PHP shouldn't interfere with client side jQuery as the norm, but it depends what is in your header.php that your PHP is including? — Dutts
– Dutts, Commented Mar 16, 2013 at 7:57
shouldn't the customPageHeader be placed inside you html->head tag? — uchamp
– uchamp, Commented Mar 16, 2013 at 7:59
@circle73 you may have too many conflicts. find out what that is. also, there can only be one <head>, not 3 in a page :) — tradyblix
– tradyblix, Commented Mar 16, 2013 at 8:09
do you notice the multiple doctype, html, head, body declarations? For fragments such as custom headers and footers you should do away with these declarations because they are not supposed to be full html pages. — uchamp
– uchamp, Commented Mar 16, 2013 at 8:19

uchamp · Accepted Answer · 2013-03-16 09:43:39Z

1

Since this solved your issue. I am posting my comment as a solution.

Do you notice the multiple doctype, html, head, body declarations? For fragments such as custom headers and footers you should do away with these declarations because the fragments are not supposed to be full html pages.

Additional stuff:

Even after removing these root level elements make sure your HTML is valid. Not in your case but usually header includes are placed inside the html->head. So 'divs', 'tables' and other such elements would break the html if placed inside the head. To avoid similar issues be careful about what goes in the head and body sections.

answered Mar 16, 2013 at 9:43

uchamp

2,5021 gold badge20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CIRCLE · Accepted Answer · 2013-03-16 09:15:46Z

0

SOLUTION: Got the solution by removing all the html, head, body declarations from the header.php and footer.php leaving only the div tags.

answered Mar 16, 2013 at 9:15

CIRCLE

4,9595 gold badges42 silver badges59 bronze badges

Collectives™ on Stack Overflow

PHP include messes with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related