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
Related
I'm creating a website for a client, but I'm primarily a front-end developer. I had to create a while loop (which works just fine) to build a gallery. The client wants a before/after display on the gallery. I elected to use the TwentyTwo jQuery plugin. However, I am having an issue. It is only displaying the first container, which displays just fine.
The necessary jQuery, inline , and css files are displayed on that page linked above. I am using bootstrap as a framework. Here is my code:
$(window).load(function() {
$("#container1").twentytwenty();
});
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery ORDER BY postDate DESC") or die($GLOBALS['gmysqli']->error);
while ($row = $sql->fetch_assoc()) {
$image = $row["image"];
?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
The problem here is the duplicate ID you generating in the php loop. This results in invalid html and can cause problems when using it as a selector.
You can switch to using a class selector:
$(document).ready(function(){
$(".twentytwenty-container").twentytwenty();
});
I updated your ready handler to the recommend structure. Or for the shorthand:
$(function() {
$(".twentytwenty-container").twentytwenty();
});
When using the class selector you can get rid of the ID in the HTML element
If you want to stick to the ID you can add a iteration variable to your loop and use the attribute selector:
$(function() {
$( "div[id^='container-']" ).twentytwenty();
});
<?php
$i = 0;
while($row = $sql->fetch_assoc()) {
$image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container-<?php echo $i; ?>" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php
$i++;
} ?>
try without order by statement.
Example:
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery") or die($GLOBALS['gmysqli']->error);
while($row = $sql->fetch_assoc())
{ $image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
If you could share how you database are filled out could more easy to help you.
And the project link.
I hope helped you out anyway.
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 try to reach the same animation like this link http://mynameismatthieu.com/WOW/index.html, the doge image come from way top to bottom
how to get the animation like that.
heres my code
<div class="about-title">
<h1 class="text-center title">
<?php
$about_title = get_field('about_title', 'option');
?>
<?php if(strlen($about_title) > 0): ?>
<?php echo $about_title; ?>
<?php endif; ?>
</h1>
<hr class="divider wow animated slideInDown" data-wow-duration="2s" data-wow-delay="0.5s">
</div>
<script>
new WOW().init();
</script>
Replace "slideInDown" to "fadeInDownBig".... This is the solution for you..
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 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>