Javascript 在数据过滤器内使用php echo和innerhtml显示文本
我尝试使用“onclick”将php而不是文本作为innerhtml注入。该脚本出现在我网站的“head”中。我有一个数据过滤器来显示分类下的图像。”单击“下一步”，将显示图像。在图片下面，php作为文本应该出现——下面是类别和描述的标题。如果将其保留为直线，则所有操作都有效。这是php的回声，而不是。我真的很想这样做，以便标题和描述可以从CMS（数据库）管理。 [这是图像显示类型的示例]）Javascript 在数据过滤器内使用php echo和innerhtml显示文本,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我尝试使用“onclick”将php而不是文本作为innerhtml注入。该脚本出现在我网站的“head”中。我有一个数据过滤器来显示分类下的图像。”单击“下一步”，将显示图像。在图片下面，php作为文本应该出现——下面是类别和描述的标题。如果将其保留为直线，则所有操作都有效。这是php的回声，而不是。我真的很想这样做，以便标题和描述可以从CMS（数据库）管理。 [这是图像显示类型的示例]） <
<!-- script for product category and description -->
<script>
function clearText(){ //clears all TEXT when ALL link clicked
document.getElementById('productCategoryName').innerHTML="";
document.getElementById('productDescription').innerHTML="";
}
function getDetails_Propagation(){ //get details for Propagation products when PROPAGATION link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=4";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Ventilation(){ //get details for Ventilation products when VENTILATION link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=7";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Heaters(){ //get details for Heaters products when HEATERS link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=8";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Screens(){ //get details for Screens products when SCREENS link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=6";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
</script>
</head>
<body>
<ul class="filter list-inline">
<li><a class="active" href="#" data-filter="*" onclick="clearText()">Show All</a></li>
<li><a href="#" data-filter=".photography" onclick="getDetails_Propagation()">Propagation</a></li>
<li><a href="#" data-filter=".illustration" onclick="getDetails_Ventilation()">Ventilation</a></li>
<li><a href="#" data-filter=".branding" onclick="getDetails_Heaters()">Heaters</a></li>
<li><a href="#" data-filter=".web-design" onclick="getDetails_Screens()">Screens</a></li>
</ul>
<div class="portfolio-box iso-call col-5-no-space">
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_1.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen1.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen2.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen3.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_2.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW ONE-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan1.jpg"" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_3.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen4.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen4.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen5.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen5.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen6.jpg" class="img-responsive" alt="">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen6.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW TWO-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_armMistController.jpg" class="img-responsive" alt="">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_armMistController.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_armMistController2.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_armMistController2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_soilwarmingCable.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_soilwarmingCable.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan2.jpg" class="img-responsive" alt="ventiliation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW THREE-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_soilwarmingCable2.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_soilwarmingCable2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration ">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat2.gif" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat2.gif" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat3.gif" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat3.gif" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet2.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW FOUR-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration ">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan2.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW FIVE-->
</div>
</div> <!--end portfolio-box-->
<!-- product category details -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="blog-post">
<h2 id="productCategoryName"></h2> <!-- function in head -->
<p id="productDescription"></p> <!-- function in head -->
</div><!--blog post-->
</div><!--end col-->
</div><!--row for blog post-->
</div> <!--full width-->
</div> <!--end container-->
</body>
<?php echo "<script>document.getElementById('productCategoryName').innerHTML=". $row['product_categoryName']."</script>" ?>