I'm trying to add an HTML next to an existing element in my page. This is what I've tried::
HTML/PHP
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
jquery:
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
What exactly I want is when the condition $isPastDue is true, I want to append/add a html tag next to #report h2. But it's not displaying. Any ideas? Help is much appreciated. Thanks.
Try this code
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
<?php if($isPastDue):?>
<span>Past Due!</span>
<?php endif;?>
If your requirement this much, no need to add JavaScript.Just use only php.
Try to do like this:
<?php
if($isPastDue) {
?>
<script>
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
</script>
<?php
}
?>
So, the main case is you want to execute the insertAfter script only if isPastDue is true. You can do it by echo the insertAfter script before closing } of your PHP if condition.
<?php
if($duedatereservation < $today){
echo '<script>';
echo '...
echo '</script>';
}
No need to use JQuery for this. You can do this using PHP only
<h2 id="report">Notice <?php if($isPastDue){echo "<span>Past Due!</span>";} </h2>
Related
The script on my site does not work correctly. It works only for the first post. Help please understand. Thank you.
Screnshot
Code to get my post
function render($Post) {
ob_start();
?>
<div class="post-1">
<div <?php //post_class(); ?> id="post-<?= $Post->ID; ?>">
<div class="My-title">
<h3><?= $Post->post_title; ?> </h3>
</div>
<div class="post-2">
<span id="read_more">Reed more</span>
<div id='read'>
<?= apply_filters('the_content', $Post->post_content); ?>
</div>
<span id='hidden'>Turn</span>
</div>
</div>
</div>
<?php return ob_get_clean();
}
My JavaScrip
$(document).ready(function(){
$('#read_more').click(function(){
$('#read').slideDown(200);
$(this).hide();
$('#hidden').show(200);
});
$('#hidden').click(function(){
$('#read').slideUp(200);
$(this).hide();
$('#read_more').show(200);
});
});
You need to use class name instead of id
Please consider using the following code:
PHP:
function render($Post) {
ob_start();
?>
<div class="post-1">
<div>
<div class="My-title">
<h3><?= $Post->post_title; ?> </h3>
</div>
<div class="post-2">
<span class="read_more">Read more</span>
<div class="read">
<?= apply_filters('the_content', $Post->post_content); ?>
</div>
<span class="hidden">Turn</span>
</div>
</div>
</div>
<?php return ob_get_clean();
}
JAVASCRIPT:
$(document).ready(function(){
$('.read_more').click(function(){
$(this).parent().find('.read').slideDown(200);
$(this).hide();
$(this).parent().find('.hidden').show(200);
});
$('.hidden').click(function(){
$(this).parent().find('.read').slideUp(200);
$(this).hide();
$(this).parent().find('.read_more').show(200);
});
});
I'm showing my data in an inline manner using bootstrap like this
for example,
But when I add some bootstrap classed, then my images are not showing.
My Code is :
<div class="container">
<h3>Teachers:</h3>
<div class="row">
<?php
$queryTeachers = "SELECT places.PLACE_NAME,teacher_status.PERSON_NAME,DATE_FORMAT(teacher_status.STATUS_DATE,'%d-%m-%Y') as STATUS_DATE,DATE_FORMAT(teacher_status.STATUS_TIME,'%h:%i:%s %p') as STATUS_TIME, teachers.IMAGE_FOLDER AS IMAGE_FOLDER,teachers.IMAGE_NAME as IMAGE_NAME FROM places,teacher_status,teachers WHERE places.PLACE_ID=teacher_status.PERSON_CURRENT_PLACE AND teachers.TEACHER_ID=teacher_status.TEACHER_ID;";
$resultTeachers = mysqli_query($conn,$queryTeachers) or die("Unable to select status". mysqli_error($conn));
while($row=mysqli_fetch_assoc($resultTeachers)) {
echo '<div class="col-lg-3">';
echo '<img src="'."../".$row['IMAGE_FOLDER'].$row['IMAGE_NAME'].'" width="130" height="150"/>';
echo "<br>";
echo "Persone Name : ".ucwords($row['PERSON_NAME']);
echo "<br>";
echo "Current Place : ".ucwords($row['PLACE_NAME']);
echo "<br>";
echo "Status Date : ".$row['STATUS_DATE'];
echo "<br>";
echo "Status Time : ".$row['STATUS_TIME'];
echo "<br><br>";
echo '</div>';
}
?>
</div>
</div>
I'm completely new to bootstrap and only know the basics.
Hello Try following code that is for demo only
<div class="container">
<h3>Teachers:</h3>
<div class="row">
<?php for($i=1;$i<=4;$i++) {?>
<div class="col-lg-3">
<div class="img-responsive"><img src="http://via.placeholder.com/150x150"></div>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
<?php } ?>
</div>
Don't use fixed height and width in images just use a class ie : img-responsive
eg:- class="img-responsive" in img tag
I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
I'd like to check the id of the parent element, to display either the big or the small version of an image.
<div id="content">
<?php include 'test.php';?>
</div>
<div id="sidebar">
<?php include 'test.php';?>
</div>
In test.php, an if-statement checks if the parent has the demanded id.
Is there a way to get the parentnode-id without JavaScript?
No. PHP do nothing with the rendered page.
But why don't you create a function and call that with parameters?
include 'test.php'
?>
<div id="content">
<?php showImage(); ?>
</div>
<div id="sidebar">
<?php showImage(true); ?>
</div>
<?php
And in test.php
function showImage($smallImage = false) {
if (!$smallImage) {
echo '<img src="path/to/bigimage" alt="" />';
} else {
echo '<img src="path/to/smallimage" alt="" />';
}
}
Or there are an alternative way. Set a variable before you include your file, and you can set an if condition in your test.php when you want to show the image.
<div id="content">
<?php
$parentNode = 'content';
include 'test.php'
?>
</div>
<div id="sidebar">
<?php
$parentNode = 'sidebar';
include 'test.php'
?>
</div>
I'm sorry if this is already asked. I couldn't find it.
I'm making an AJAX chat system. It's going great, the only problem I'm having is that I need the chat to automatically refresh itself every second. I know this can be done with the load() function...
But I would like to refresh the div and the PHP inside it, now load it from another script.
My piece of code(JS):
<script>
setInterval(function() {
$('#container').load();
}, 1000); </script>
And the div I want to reload/refresh every second:
<div class="container" id="container">
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
</div>
And if I do $('#container').load('index.php'); it will give me this(the site will also be very slow): $('#container').load('index.php');
Thank you very much for helping in advance! My English is also very bad due that it's not my mother language :-)
Don't you think it will be cleaner to just include() your "message pooling" script inside your <div class="container" id="container">, so that your main chat page will now have:
<div class="container" id="container">
<?php
include("chatScript.php");
?>
</div>
Then chatScript.php will contain:
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
Then you can simply do
<script>
setInterval(function() {
$('#container').load();
}, 1000);
</script>
after loading <div class="container" id="container">.
Hope this helps