I have a php function as shown below, which takes in an array that has values from an SQL query (in another, not shown function). In this case, the SQL query returns a set of filenames and their associated picture names.
// Take in an array of filters;
// each element is a dictionary of column name
// to the value of that row from SQL query
function displayFilters($filters) {
foreach($filters as $filter){
//output images in img tags, with their appropriate classes
echo " <div class='w3-quarter'>
<div class='w3-card-2'>
<img src='images/".$filter['File_Name']."' style='width:100%'>
<div class='w3-container'>
<h4>".$filter['Filter_Name']."</h4>
</div>
</div>
</div>";
}
}
Now, this works fine and will properly display the images as I want. However, I keep having to modify this code, change classes, properties and what not, and if I need to add/modify to the div, I have to go into this function to change everything. Is there a better way to do this than going into the echo function to change it? I'd rather not have to use Javascript if possible, but if that is the only clean way to do it, can someone point me to a way to do this?
<?php function displayFilters($filters) {
foreach($filters as $filter){ ?>
//output images in img tags, with their appropriate classes
<div class='w3-quarter'>
<div class='w3-card-2'>
<img src='images/<?=$filter['File_Name']>' style='width:100%'>
<div class='w3-container'>
<h4><?=$filter['Filter_Name']></h4>
</div>
</div>
</div>
<?php
}
} ?>
I do it this way and it seems easy than learning a new template engine
Use a PHP Template Engine
http://www.smarty.net/
Smarty is fast and lean with a small memory footprint.
http://twig.sensiolabs.org/ (Looks remarkably like Dwoo)
Twig is a modern template engine for PHP (Fast, Secure, Flexible)
http://dwoo.org/ (Inspired by Smarty)
Dwoo is a templating system used to make creating websites easier and more structured.
http://platesphp.com/ (Inspired by Twig)
Plates is a native PHP template system that’s fast, easy to use and easy to extend.
http://phptal.org/
PHPTAL is a PHP implementation of ZPT work. To be short, PHPTAL is a XML/XHTML template library for PHP.
I have written how to retrieve query and how to display in below code.
You can use this one. you can also use image tag within table <tr> tag.
$con=mysqli_connect('localhost','username','password','databasename');
$sql="SELECT `COL 1` , `COL 2` , `COL 3` , `COL 4` , `COL 5` , `COL 12` FROM `TABLE` WHERE 1 ORDER BY `COL 3` ;";
$result=mysqli_query($con,$sql);
<table style="width:100%" >
<tr>
<th>Col1</th>
<th>Clo2</th>
<th>Col3</th>
</tr>
<?
while ($row=mysqli_fetch_row($result))
{
echo "<tr><td>".$row[0]."</td><td>".$row[1]."\t".$row[2]."\t".$row[3]."\t".$row[4]."</td><td>".$row[5]."</td></tr>";
}
?>
</table>
Related
I know there are already a few questions like mine but I wasn't able to fix my problem with their solutions.
I got this code in an external html file to include it in others files:
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
The "file" above gets included into this "file":
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
The Variable from the second code should replace the content of the h1 tag in the first code. I know this isn't a forum to get free codes, I just want some inspirations or suggestions. Thanks Guys!
You can replace the html of one element with the html of another element, like so:
$(".replace-me").html($(".variable").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
However, as Rama Schneider pointed out, you might want to get your content in a different way than html.
Also note that this jQuery-solution is done client-side. If you already know the content when serving the initial HTML, you want to do this server-side.
If you have control over the external file, I'd suggest rewriting things so the external file serves a json object of some sort and work with your data from there.
Otherwise it's a simple matter of using JQuery to get the html contents from the variable and use that value to replace the html contents of the 'replace-me'.
You should solve this on server-side if you can. Make the common template a function, like this:
function getHeader($content) { ?>
<div class="header">
<h1 class="replace-me"><?php echo $content; ?></h1>
</div> <?php
}
calculate $content before you call the function and pass it to the function. If you cannot make this a function and you get this as it is from a third-party source, then you can do it via Javascript, like this:
<script type="text/javascript">
document.getElementsByClassName("header")[0].getElementsByClassName("replace-me")[0].innerHTML = "<?php echo $content; ?>";
</script>
Make sure you add this script after the header tag was loaded.
What is the functional difference between these two snippets of code
<!--?php include('json-ld.php'); ?--><script type="application/ld+json">// <![CDATA[
<?php echo json_encode($payload); ?>
// ]]></script>
and
<?php include('json-ld.php'); ?><script type="application/ld+json">
<?php echo json_encode($payload); ?>
</script>
My objective is to apply a JSON-LD file (containing schema.org structured data) to my WordPress site. The first code is taken from this page, and purports to do what I need. But I can't understand why the author would post a snippet with so many comments. From what I understand about HTML and JS comments, the code appears to be functionally equivalent to the bottom code. I am posting here to assure myself that I am not misunderstanding something about this syntax.
Perhaps there is a security purpose for using the commented code? If so, I would be interested in practicing best practices in terms of security.
Thanks.
CDATA stands for Character Data and it means that the data in between these strings includes data that could be interpreted as XML markup, but should not be. This is so that html tags and such can be used without it breaking the xml code - each html tag would be represented as a child-node to the xml. By using the CDATA "comment" you are telling the xml to consider the html tags as a string value, not a child-node.
Regarding the first line: <!--?php include('json-ld.php'); ?--> This isn't including the file - this may be a typo on the original authors' part. If your code works without it, it is probably safe to remove; otherwise, fix it ;)
From what I see, it's purely so that potential output of <?php include('json-ld.php'); ?> are not treated as HTML.
Since most of the time there is no output in <?php include('json-ld.php'); ?> , <!-- <?php include('json-ld.php'); ?> --> just do <!----> . But potential PHP notices or errors that randomly pop will end commented and not breaking the DOM.
Question
I want to know if there is an alternative syntax to output data in Vue.js, instead of the curly braces, like the ng-bind Angular directive.
Reading the docs, it seems that Vue.js accepts only tag properties with the v-bind directive, but I want it to work with the inner html too.
Context
I want to output data using PHP and, once the page is loaded, manage it with Vue. Imagine the next situation:
We want this output:
<div>Hello</div>
First, we output the data with php
<div><?php echo $hello_string ?></div>
After that, we want to be able to change the content with Vue. The current syntax is;
<div>{{ hello_string }}</div>
We can't mix the two syntaxes, so I need something like this:
<!--Ideal syntax for mixing vue and php-->
<div v-bind:innerhtml="hello_string"><?php echo $hello_string ?></div>
Thank you for your help.
You could use the v-text directive:
<div v-text="hello_string"></div>
<!-- same as -->
<div>{{ hello_string }}</div>
or the v-html:
<div v-html="html"></div>
<!-- same as -->
<div>{{{ html }}}</div>
Vue.component({
el:'#app',
data:function(){
return {
hello_string:"<?php echo json_encode($hello_string) ?>"
};
}
});
Then in HTML:
<div id="app><div>{{ hello_string }}</div></div>
Basically you need to use PHP to fill your javascript variables, whether you do it through AJAX or just printing out the variables like above is up to you. You probably need to encode it to JSON or at least make sure quotes are escaped. On the front end, let Vuejs manage the view rather than printing directly into it with PHP.
I am using this wonderful jquery plugin called justified gallery. Below is a simplified html syntax to use this plugin, followed by javascript syntax.
HTML
<div id="my-gallery">
<a href="path/to...............">
<img src="path/to/............1.jpg" />
</a>
<a href="path/to...............">
<img src="path/to/............2.jpg" />
</a>
.......
</div>
JAVASCRIPT
<script>jQuery("#my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});</script>
ISSUE - With the above code the plugin is working just fine BUT only for the first instance of the html syntax. Meaning, if I try <div id="my-gallery">......</div> twice or more on the same page, it only works on the first instance. Since there is going to be multiple galleries on a same page I need this to loop.
I can handle php well but yet to start learning javascript so unable to hack the javascript. If it was only php I would have generated different ids for each gallery with something like the code below.
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
The code above would have resulted to this in the view-source.
<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>
So the question is, is my logic correct to solve this, if yes then (since my javascript is nill) how do I solve this in context of my javascript. Any response if appreciated. TIA.
You are not allowed to have multiple element with identical id's... so having two or more <div id="my-gallery"> is invalid HTML.
Instead give each one a class, and use that class name as the selector in your jQuery.
<div id="my-gallery1" class="my-gallery-class">
...
</div>
<div id="my-gallery2" class="my-gallery-class">
...
</div>
$(function(){
$(".my-gallery-class").each(function(){
$(this).justifiedGallery({
rowHeight : 120,
margins : 0
});
});
});
Use a class instead. An ID must be unique. Having multiple identical IDs is invalid HTML. Output as follows:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
foreach($arr as $a){
echo '<div class="my-gallery">'.$a. '</div><br>';
}
And use Javascript then like this. (Note that a document ready event might be required!)
<script>
$(document).ready(function() {
$(".my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
Using br in HTML for this purpose is discouraged. If your elements are block elements and are not floated or absolutely positioned, you won't need br. If you want some space between them you can set a margin is CSS (and remove br):
.my-gallery {margin: 24px auto;}
If you want to keep the unique ID on the gallery items (I don't know why, it seems pointless and needless markup to me, but anyway) you can do it like this:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
As others have suggested you can give each gallery a common class and use that in your JavaScript
eg:
<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>
<script>
jQuery(".gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
I need to generate a unique ID via js or PHP. Obviously this is pretty easy, but the part I can't figure out is that I need to generate a unique id for a <p> element, and then reference that unique id in some inline js below.
Here's the code to make this more clear:
<p id="UNIQUE-ID" class="toolbox"><a class="tooltip" onmouseover="tooltip.pop(this, '##UNIQUE-ID');"></a>
Basically, in both places where it says "UNIQUE-ID", I need an identical unique id generated. There will be an unknown number of these kind of <p> and <a> pairs generated dynamically.
Any help is greatly appreciated.
You've said that the <p> and <a> pairs are generated dynamically, and also asked for a unique ID "...via js or PHP..." So I'm going to assume the dynamic generation is via PHP, in some kind of loop.
If so, just remember the value in a variable in your loop and output it in the two required locations, e.g.:
<?php
while (someCondition) {
$id = /* ...generate the ID...*/;
?>
<p id="<?=$id?>" class="toolbox"><a class="tooltip" onmouseover="tooltip.pop(this, '##<?=$id?>');"></a>
<?php
}
?>
(Obviously that's using shorttags, which many people recommend against. But it gets the idea across. If you don't use shorttags, you can easily change that to use echo instead.)
I am just giving the structure.Just change it according to your requirement
<?php
for($i=0;condition;$i++)
{
?>
<p id="par_<?php echo $i;?>" <a id="id_<?php echo $i;?>" href=""></a>
<?php
}
?>