CODEWITHSUNDEEP
phpjqueryinclude
CIRCLE
CIRCLE

Reputation: 4879

PHP include messes with jQuery

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.

Upvotes: 0

Views: 322

Answers (2)

uchamp
uchamp

Reputation: 2512

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.

Upvotes: 1

CIRCLE
CIRCLE

Reputation: 4879

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

Upvotes: 0

Related Questions