php - PHP が jQuery を混乱させる

Question

ホームページで jQuery アプリを作成しようとするたびに、アプリが独自に処理を開始し、要求への応答を停止します。たとえば、画像スライダーを実装しようとしていますが、ページを実行すると、再生/一時停止ボタンが機能せず、画像が互いに重なり合っていることがわかります。しかし、すべての PHP インクルードを削除すると、エラーなしで正常に実行されます。これは一般的なエラーですか?制御を失うことなく、jQuery にインクルードの存在を受け入れさせる方法はありますか?

<?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>

私header.phpのには、次のものがあります。

<!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>

私footer.phpのには、次のものがあります。

<!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>

解決策:とからすべての<html>, <head>,<body>宣言を削除し、タグのみを残して解決策を得ました。header.phpfooter.php<div>

score 1 · Accepted Answer

これで問題が解決したので。解決策としてコメントを投稿しています。

doctype、html、head、body 宣言が複数あることに気付きましたか? カスタムヘッダーやカスタムフッターなどのフラグメントについては、これらの宣言を廃止する必要があります。これは、フラグメントが完全な html ページであると想定されていないためです。

追加のもの：

これらのルートレベルの要素を削除した後でも、HTML が有効であることを確認してください。あなたの場合ではありませんが、通常、ヘッダーインクルードは html->head 内に配置されます。そのため、「divs」、「tables」などの要素を head 内に配置すると、html が壊れてしまいます。同様の問題を回避するには、head セクションと body セクションの内容に注意してください。

score 0 · Accepted Answer

解決策：header.phpとfooter.phpからすべてのhtml、head、body宣言を削除し、divタグのみを残して解決策を見つけました。

php - PHP が jQuery を混乱させる

2 に答える 2

Related

Reference