Develop Reference

JSON data pass to div tag

I have the following code and it won't work. I want to pass the JSON data to the HTML div tag through javascript.
This is a div tags what I want to import data
<div class="row mt-2 mb-2 height bg-dark text-light" id="<?php echo $row['dev_ID']; ?>">
<div class="col-3" >
<div class="card height bg-dark" style="width: auto">
<div class="card-body" >
<h6 id="trname">Name : </h6>
<p id="trtype"></p>
</div>
</div>
</div>
<div class="col-2">
<div class="card height bg-dark" style="width: auto">
<div class="card-body">
<h6>Status</h6>
<p ><p id="trstatus"></p><?php // echo $row['dev_Status']; ?></p>
</div>
</div>
</div>
<div class="col-3">
<div class="card height bg-dark" style="width: auto">
<div class="card-body">
<h6>Reading 01</h6>
<p id="trreading01"><?php// echo $row['dev_Reading01']; ?></p>
</div>
</div>
</div>
<div class="col-3">
<div class="card height bg-dark" style="width: auto">
<div class="card-body">
<h6>Reading 02</h6>
<p id="trreading02"><?php// echo $row['dev_Reading02']; ?></p>
</div>
</div>
</div>
<div class="col-1">
<div class="card height bg-dark" style="width: auto">
<div class="card-body">
<h6>Dev</h6>
</div>
</div>
</div>
</div>
This is my javascript part. I'm guessing I'll need to use AJAX or Jquery but I lack the knowledge on how to do so.
document.getElementById('button').addEventListener('click',loadReadings);
//load readings
function loadReadings(){
setInterval(function(){
var xhr = new XMLHttpRequest();
xhr.open('POST','xhr.php',true);
xhr.onload = function(){
if(this.status == 200){
var obj =this.responseText;
console.log(this.responseText);
for (var key in obj){
if(obj.hasOwnProperty(key)){
var row = document.getElementById(obj[key].id);
// innerHTML = property is useful for getting or replacing the content of HTML elements.
row.div[1].innerHTML = obj[key].dev_type;
row.trstatus[2].innerHTML = obj[key].status;
row.trreading01[3].innerHTML = obj[key].reading01;
row.trreading02[4].innerHTML = obj[key].reading02;
}
}
}
}
xhr.send( )
},1000);
}
and also this is the php part.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb1";
$array = array();
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM dmaster";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$arraynew = array(
'id' =>$row["dID"],
'dev_name' =>$row["dName"],
'dev_type' =>$row["dType"],
'access_code' =>$row["access_Code"],
'time_stamp'=>$row["time_Stamp"],
'status' =>$row["dStatus"],
'reading01' =>$row["dReading01"],
'reading02' =>$row["dReading02"]
);
$arraynew = array_map('htmlentities',$arraynew);
array_push($array,$arraynew);
}
} else {
//echo "0 results";
}
mysqli_close($conn);
$json = html_entity_decode(json_encode($array));
echo "data: ".$json."\n\n";
ob_end_flush();
flush();
?>

As i checked your code and found some of the issue kindly update
update in php file:
echo "data: ".$json."\n\n";
replace with only echo $json;
Update in javascript script:
<script type="text/javascript">
function loadReadings(){
var xhr = null;
if(window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
else if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
if(xhr)
{
xhr.open('POST','xhr.php',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var obj = JSON.parse(xhr.responseText);
for (var key in obj){
if(obj.hasOwnProperty(key)){
var row = document.getElementById(obj[key].id);
console.log(row);
// innerHTML = property is useful for getting or replacing the content of HTML elements.
row.getElementsByTagName('div')[1].innerHTML = obj[key].dev_type;
document.getElementById('trstatus').innerHTML = obj[key].status;
document.getElementById('trreading01').innerHTML = obj[key].reading01;
document.getElementById('trreading02').innerHTML = obj[key].reading02;
}
}
}
}
xhr.send();
}
}
</script>
Because in your script checked only by xhr status not readystate hence it will create issue when ajax request will fire , and one more thing you set the value by taking the reference of row var it okay for div but remaining all how already id so no need to take any of reference but if you are thinking , you may list multiple of dynamic info then define all to a class because by your current code ,your page will contain multiple of same ids which is not right
update in html:
as you bind a event with button id by you do not any button id to any of the tag
So add this line on your html code
<button type="button" onclick="loadReadings()">Click here </button>

Posts sorted by year in accordion

I have a custom post type for testimonials and it has few posts. I'm trying to create an accordion which shows posts by year. So when you click on the year it displays all the posts for that year (see screenshot below).
I have got it somewhat working, problem is when I click on the year, it only shows one post for that year. Here's the code -> https://pastebin.com/3F98dcEU
<?php get_header();?>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom:20px;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
<div class="container-fluid testimonial-header">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Testimonials</h1>
</div>
</div>
</div>
<div class="container testimonial-content">
<div class="block-1">
<h2 class="heading">Delivering Exceptional Customer Service</h2>
<p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
</div>
</div>
<div class="container-fluid py-5 archive-testimonial">
<div class="container">
<div class="row">
<div class="col-lg-12">
<?php
global $wpdb;
$posts = $wpdb->posts;
//Get all unique years as "years" from posts where post type is equal to testimonials
$sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC
//Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters
$result = $wpdb->get_results($sql);
foreach($result as $rs) { ?>
<button class="accordion"><?php echo $rs->years ;?></button>
<?php $args = array(
'post_type' => 'testimonials',
'post_per_page'=> -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'date_query' => array(array(
'year'=> $rs->years,
),),
);
$loop = new WP_Query($args);
if($loop->have_posts()) {
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
}
}
?>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<?php get_footer();?>
You could try the code with built-in post type and you'd see what I'm talking about.
My approach to this might be completely wrong.
Any help is highly appreciated.

Your panel div is inside your while loop, and so it is repeated for each post. You should have it outside of your loop, so it is only generated once for every year.
Change this:
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
to this:
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php } ?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
<?php endwhile; ?>
</div>

Cannot copy text from div when timer is refreshing it

I have a chat with setInterval and it's refreshing a div (where messages are), but the problem is when i select the message with my mouse (blue marker) and for example i want to copy something from it, the timer refreshes the chat div and it won't let me do that. It automaticly disables the marked text, i hope you understand me what i'm talking about.
setInterval('test()', 1000);
function test(){
$('#chatbox').load('load.php?chat_refresh');
$("#online-users-text").load(location.href+ ' #online-users-text');
<?php
$query_chat = $handler->query('SELECT * FROM users');
while($ch = $query_chat->fetch()){
if($ch['status'] == 1){
?> Chat_Refresh(); <?php
}
}
?>
}
As you can see in the code, timer is calling function test() after every second, and that function is calling $('#chatbox').load('load.php?chat_refresh'); which is refreshing load.php?chatrefresh from another page:
if(isset($_GET['chat_refresh'])){
$query = $handler->query('SELECT * FROM (SELECT * FROM chat ORDER BY id DESC LIMIT 15) AS chat ORDER BY id ASC');
while($r = $query->fetch()){
$strText = preg_replace( '/(http|ftp)+(s)?:(\/\/)((\w|\.)+)(\/)?(\S+)?/i', '<span style="text-decoration: underline;">\0</span>', showBBcodes($r['message']) );
?>
<?php if(empty($r['owner'])){ ?> <!-- Clear chat -->
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; visibility: hidden;">test</span>
</div>
</div>
<?php }else{ ?>
<ul class="chat"> <!-- Show chat -->
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="<?php echo BASE_URL, $r['avatar']; ?>" class="img-thumbnail" width='40' height='40' />
</span>
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; color: #737373;">
<b><?php echo $r['owner']; ?></b>:</span> <span class="text"><?php echo parseSmiley($strText); ?></span> <small style="line-height: 40px; margin-right: 5px;" class="pull-right text-muted"><i class="fa fa-clock-o"></i> <?php echo $r['created']; ?></small>
</div>
</div>
</li>
</ul>
<?php }
}
}
When i go to google chrome console, i can clearly see that timer is refreshing #chatbox div and that div is blinking.

JavaScript - Function that Changes content when clicked up or down

I am trying to create a function that when you click up it appends to the div what you want and if you press up again will show what you want again and replace the other data, same for when you press down.
The idea is to have 5 options, the option that it starts on is decided on that users info. So say they are number 3 it will start on number 3 and if you press up it will go to number 2 if you press down it will go to number 4 and show the data with those numbers.
What I am trying to figure out is how can I make this option and then when clicked do what I want it to do.
Idea of what it looks like:
When you press the blue up will go up a page and only show the player that are in diamond 2. and same for the rest
<main>
<div class="panel">
<div class="panel-body"></div>
<div class="league-banner" style="height: 50px;">
<div class="league-number" style="top: 15px; position: relative;">
<div class="league-rank">
III
</div>
<div class="league-buttons">
<img src="img/league/up.png"/>
<a class="sq-btn" href="" style="position: relative; top: -30px;"><img src="img/league/down.png"/></i></a>
</div>
</div>
<span style="color:#57a2dd; font-size: 20px;">DIAMOND 5 </span>
<span style="font-size: 20px;" class="second-banner">Diamond V</span>
<div class="light" style="font-size:20px;">Lee Sin's Redeemers</div>
</div>
<div class="league-top">
<div class="stats-header stats-row">
<div class="table-cell">Rank</div>
<div class="table-cell">Summoner</div>
<div class="table-cell">Emblems</div>
<div class="table-cell">Wins</div>
<div class="table-cell">Losses</div>
<div class="table-cell">Win Rate</div>
<div class="table-cell">Points</div>
</div>
<div class="scroll-league" id="scroll-league">
<?php
if ($league_list){
$entrieszlist = $league_list->entries;
usort($entrieszlist, function($acl,$bcl){
return $bcl->leaguePoints-$acl->leaguePoints;
});
$index = 0;
foreach ($entrieszlist as $datazlistleague){
$playerleagueId = $datazlistleague->playerOrTeamId;
$playerleagueNameSummoner = $datazlistleague->playerOrTeamName;
$playerleagueNameSummonerDivison = $datazlistleague->division;
$playerleagueNameSummonerWins = $datazlistleague->wins;
$playerleagueNameSummonerLosses = $datazlistleague->losses;
$playerleagueNameSummonerLP = $datazlistleague->leaguePoints;
$playerleagueNameSummonerGamesPlayed = $playerleagueNameSummonerWins + $playerleagueNameSummonerLosses;
$playerleagueNameSummonerGamesWinRate = (100/$playerleagueNameSummonerGamesPlayed)*$playerleagueNameSummonerWins ;
$playerleagueNameSummonerLPtarget = $datazlistleague->miniSeries->target;
$playerleagueNameSummonerLPWins = $datazlistleague->miniSeries->wins;
$playerleagueNameSummonerLPLosses = $datazlistleague->miniSeries->losses;
$playerleagueNameSummonerLPProgress = $datazlistleague->miniSeries->progress;
if (isset($datazlistleague->miniSeries)){
$miniSeriesdatayesnodata = 1;
} else {
$miniSeriesdatayesnodata = 2;
}
$summonerData1;
if(isset($playerleagueNameSummoner)) {
$formatedUserName1 = str_replace(" ", "", $playerleagueNameSummoner);
$formatedUserName1 = mb_strtolower($formatedUserName1, 'UTF-8');
$sql1 = 'SELECT * FROM players_data WHERE sum_name = "' . $formatedUserName1.'"';
$result1 = $conn->query($sql1);
if($result1->num_rows > 0) {
while ($row1 = $result1->fetch_assoc()) {
$GLOBALS['summonerData1'] = unserialize($row1['summoner_info']);
}
} else {
storeData($conn, $apiKey, $playerleagueNameSummoner, 'players_data');
header("Refresh:0; url=leaguesprofile1.php?userName=".$_GET['userName']."");
}
} else {
}
$sumiconid1 = $summonerData1->profileIconId;
$index++;
echo '<div class="stats-data stats-row loser" data-ladder_id="'.$playerleagueId.'" data-ladderdivison_id="'.$playerleagueNameSummonerDivison.'" data-promos1or2="'.$miniSeriesdatayesnodata.'">
<div class="table-cell rank">'.$index.'</div>
<div class="table-cell change-selected">
<a href="profile2.php?userName='.$playerleagueNameSummoner .'">
<div style="display: table;">
<div style="display: table-row;">
<div class="table-cell-2">
<div class="summoner-icon" style="background-image: url(http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/'.$sumiconid1 .'.png);"></div>
</div>
<div class="table-cell-2">'.$playerleagueNameSummoner .'</div>
</div>
</div>
</a>
</div>
<div class="table-cell">
<div style="display: inline-block;" original-title=""> ';
if($datazlistleague->isHotStreak == true){
echo '<img src="img/league/Hot_streak.png"/>';
} else if($datazlistleague->isHotStreak == false){
echo '<img src="img/league/streak_none.png"/>';
}
echo '</div><div style="display: inline-block;" original-title="">';
if($datazlistleague->isFreshBlood == true){
echo '<img src="img/league/Recruit.png"/>';
} else if($datazlistleague->isVeteran == true){
echo '<img src="img/league/Veteran.png"/>';
} else if ($datazlistleague->isFreshBlood == false && $datazlistleague->isVeteran == false){
echo '<img src="img/league/Recruit_none.png"/>';
}
echo '</div>
</div>
<div class="table-cell change-selected">'.$playerleagueNameSummonerWins.'</div>
<div class="table-cell change-selected">'.$playerleagueNameSummonerLosses.'</div>
<div class="table-cell change-selected">'.number_format((float)$playerleagueNameSummonerGamesWinRate, 1, '.', '').'%</div>
<div class="table-cell change-selected">';
echo $playerleagueNameSummonerLP.'LP';
echo '</div>
</div>';
}
}
?>
</div>
</div>
</div>
</main>
CODE - What it should do is depending if the data-attribute called "data-ladderdivison_id" is I then show when page I showen if it is V then show that data on page V but using a up and down button from 1 - 5 to change.
Thanks in advance

You'll need to look at the structure your data is in and determine fairly early on in the script which bit is the "current important" entry point, that would probably be an indexer into an array containing your leagues.
You can do this for example by passing a parameter via the url that you then pickup in the beginning of your script, or initialize to some predefined point (probably 0 for the first league).
// take the ?league=... from the url or set it to 0
$currentLeagueIndex = isset($_GET['league']) ? $_GET['league'] : 0;
then where you're rendering the buttons you can point to the current url with that index plus or minus one.
$hrefPrevious = $currentLeagueIndex-1 > -1 // bounds check for sanity
? 'my-url?league=' . ($currentLeagueIndex-1);
: 'javascript:void()';
$hrefNext = ($currentLeagueIndex+1) < count($allLeagues)
? 'my-url?league=' . ($currentLeagueIndex+1);
: 'javascript:void()';

How to make an image inside a modal clickable

I have button that displays a modal which contains many icons, and I want it when I click one of the images it will indicate that I have clicked it. But I don't have any idea how to implement it.
So far this is how my modal looks like.
My objective:To put an indicator that I have clicked it.
CODE
<div class="modal-body">
<div class="row">
<div class="col-lg-6 pull-left">
<?php
$tokenSql = mysql_query(" SELECT * FROM topplayer WHERE user_id = '$user_id' ");
$retToken = mysql_fetch_assoc($tokenSql);
$token = $retToken['token'];
echo ("<b>Tokens : $token </b><br>");
?>
</div>
<div class="col-lg-6 pull-right">
</div>
</div>
<div class="row ml">
<?php
$sendGiftSql = mysql_query("SELECT * FROM gifts WHERE isDelete = 'false' ORDER BY price ");
while($sendGift = mysql_fetch_assoc($sendGiftSql)){
$giftIMG = $sendGift['img_path'];
echo("
<div class='col-xs-4 mb'>
<br>
<img id='edgiftPhoto' class='center-block' alt='No image' src='$giftIMG' style='height:120px; width: 120px'/>
</div>
");
}
?>
</div>

Generic, super super super simple solution. No need for a plugin.
JS:
$('.modal-body').on('click','img',function(){
$(this).toggleClass('clicked');
})
CSS:
.clicked{
border:1px solid black;
//style it however you want
}