displaying text using php echo with innerhtml inside a data-filter

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


displaying text using php echo with innerhtml inside a data-filter



Hey guys! I have attempted to inject php instead of text as innerhtml using 'onclick' This script appears in the 'head' of my website. I have a data-filter to display images under categories. 'onclick' the images are displayed. Underneath the images the php as text should appear - a heading for the category and description underneath. If left as straight innerhtml this all works. It is the php echo that doesn't. I really would like this to work so that the heading and description can be managed from the CMS (database).
1[this is an example of the type of image display] http://bootstraplovers.com/assan-kit-v3.7/bootstrap4/website-templates/classic-template/html/folio-mosaic-full.html)<


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







Please don't do this. This is the core reason people hate working with PHP. Please first prepare variables (use arrays of values if necessary), then use the prepared values. Goal: Separate view from logic as much as possible.
– janmyszkier
2 mins ago









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Arduino Mega cannot recieve any sketches, stk500_recv() programmer is not responding

Image
Clash Royale CLAN TAG #URR8PPP Arduino Mega cannot recieve any sketches, stk500_recv() programmer is not responding Yesterday we were trying to update the firmware of our 3D-printer a Tevo Tarantula i3 The printer was running Marlin 3D Printer Firmware. We installed a new module a TL-Touch Sensor, a chinese copy of the Bl-Touch an auto bedleveling touch sensor for a 3D printer. After re-configurating a new version of the firmware for our setup in the Arduino IDE we went on with uploading the sketch to the Arduino Mega that was controling our 3D printer. Before we started uploading we made sure the right COM-port was selected in the Arduino IDE and that also the right type of Arduino was selected. The Arduino Mega 2260. Then we started with compiling the firmware and then uploading it to the Mega, Somewhere in between that moment the IDE freezed and crashed. As a response we removed the USB cable that was connected from the PC uploading the firmware onto the Arduino Mega, (This was a st...
Read more

Visual Studio Code: How to configure includePath for better IntelliSense results

Image
Clash Royale CLAN TAG #URR8PPP Visual Studio Code: How to configure includePath for better IntelliSense results so I am a complete beginner to using Visual Studio Code and I have no clue what I am doing. I've searched around (maybe not enough), but I cant find just a simple explanation for someone like me on how to configure the c_cpp_properties.json file that I am redirected to whenever I click on the yellow lightbulb next to a line that is underlined with a green squiggle. Lightbulb example c_cpp_properties.json I just want to know what to put in the .json to make IntelliSense work properly This question has answers that may be good or bad; the system has marked it active so that they can be reviewed. 2 Answers 2 From: https://code.visualstudio.com/docs/languages/cpp Below you can see that the MinGW C++ include path has been added to browse.path for Windows: { "name": "Win32...
Read more

C++ virtual function: Base class function is called instead of derived

Image
Clash Royale CLAN TAG #URR8PPP C++ virtual function: Base class function is called instead of derived I have following code snippet: using namespace std; class base { public: virtual void print(char a){ std::cout<<" Base "<<std::endl;} }; class derived :public base { public: void print(floata) {std::cout<<" Derived "<<std::endl;} }; int main() { base* d = new derived; d->print(1.5); return 0; } Output is "base" Why output is coming from base function and not from derived one By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more