Develop Reference

how to retrieve data from more than one table using session?

I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?

ACF Repeater field events triggering all together

I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>

The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>

First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here

Safari gives huge white space in content?

My website looks good on every browser except Safari.
In Safari it shows a huge whitespace.
Here you can see the difference between Chrome and Safari.
This is Safari:
And this is Chrome:
<?php get_header();?>
<?php while (have_posts()): the_post();
$imgId = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($imgId, 'full'); ?>
<div class="theBiggest">
<?php if ($imgId) { ?>
<div style="background-image: url(<?php echo $image[0] ?>); background-repeat: no-repeat; background-size: cover; min-height: 346px;background-position:100% 60%; " >
<div class="text-center" style="padding-top: 130px;">
<img src="<?php echo THEME_URL ?>/images/logo_icon_white.png" /><br>
<div class="title-page"><?php the_title();?></div>
</div>
</div>
<div class="page-bg" >
<?php } else { ?>
<div class="container text-center bg-white" style="padding-top:50px; margin-bottom: 20px;">
<img class="top-icon" src="<?php echo get_field('top_icon')['url'] ?>" /><br>
<?php $title = get_the_title();
$ar = explode(' ', strtoupper($title)); ?>
<span class="title-page grey-txt"><?php echo $ar[0] ?></span>
<?php if (count($ar) > 1) {?><span class="title-page orange-txt"><?php echo $ar[1] ?></span><?php }?>
</div>
<!-- TRAININGEN page or Coaching page -->
<?php if (have_rows('ups_trainingen')): ?>
<div class="greyBlock">
<?php if(is_page('Leiderschaps training')) {
echo "<p>Hierom kiest u voor een <strong>training</strong> van InReach</p> ";
$ctn = "t";
}
if (is_page('Leiderschaps coaching')) {
echo "<p>Hierom kiest u voor <strong>coaching</strong> van InReach</p> ";
$ctn = "c";
} ?>
<?php $i=1;?>
<?php while (have_rows('ups_trainingen')): the_row();
$text = get_sub_field("text");
$link_popover = get_sub_field("link/popover");
?>
<button type="button" class="orangeBtn btn " id="<?php echo $ctn . $i;?>" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<?php echo $link_popover ?>"><?php echo $text; ?></button>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif;
} // else $imgId
while (have_rows('sections')) { the_row();?>
<div class="container page-section">
<div class="content" >
<?php the_sub_field('content')?>
</div>
</div>
<?php
}
// OVER page
if ($post->ID == 221) { ?>
<div style="display:none">
<div id="formpopup" class="registen_form" style="padding: 30px">
<!-- <h2 style="padding-top:25px"><?php echo _e('Alles uit uw medewerkers halen?', 'new_inreach') ?></h2> -->
<h2 style="padding-top:25px"><?php echo _e('Abonneer op deze gratis leiderschapstips', 'new_inreach') ?></h2>
<!-- <h2><?php echo _e('Ontdek gratis de 3 grootste missers die u niet moet maken.', 'new_inreach') ?></h2> -->
<?php gravity_form(7, false, false, false, '', true);?>
<!-- <h4><?php echo _e('En ontvang regelmatig gratis tips om uw leiderschap te versterken', 'new_inreach') ?></h4> -->
<h4></h4>
</div>
</div>
<div class="container page-section text-center">
<div style="margin-bottom: 30px;">
Ontvang leiderschapstips
Bekijk trainingsmogelijkheden
Plan een coachingssessie in
</div>
</div>
<?php } ?>
<?php if (have_rows('info_buttons')): ?>
<div class="info_button" >
<p style="color:#fff;">Kies uw snelheid</p>
<?php while (have_rows('info_buttons')): the_row();
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div><img src="<?php echo $image['url']; ?>"></div>
<?php endwhile;?>
</div>
<?php endif;?>
<?php if ($post->post_content !== "") { ?>
<div class="container text-center bg-white test"><?php the_content();?></div>
<?php } ?>
</div><!-- page-bg -->
<?php if (have_rows('orange_&_grey_buttons')): ?>
<?php while (have_rows('orange_&_grey_buttons')): the_row();
$orangeBtnText = get_sub_field('orange_btn_text');
$orangeBtnlink = get_sub_field('orange_btn_link');
$greyBtnText = get_sub_field('grey_btn_text');
$greyBtnlink = get_sub_field('grey_btn_link');
?>
<?php
$footerText = get_field('footer_text');
if ($footerText) { ?>
<div class="page-footer" style="background-color: <?php the_field('footer_color');?>">
<div class="container"><?php echo $footerText ?></div>
</div>
<?php } ?>
<div class="orange-grey-btns" style="background-color:<?php the_field('footer_color');?>;padding:15px 0;">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 ">
<div class="col-md-12 orange-btn">
<?php echo $orangeBtnText; ?>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="col-md-12 grey-btn">
<i><?php echo $greyBtnText; ?></i>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;endif; //orange_&_grey_buttons?>
</div>
<?php endwhile; //have_posts?>
<?php get_footer();?>

Showwordpress user description when user image is clicked

I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!

HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

How to hide DIV using class when field is Empty?

I have a PHP While statement on my page. I would like to hide DIV with the class name "coupon" for each record that has empty field $rows['deal'];. This is what my code currently looks like. How can I alter to accomplish this. Thank You much!!!
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

You can do this on this way:
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
Full code
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

Try below code:
<?php while ($rows = mysql_fetch_array($query)) { ?>
<!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

You do not need javascript for this, add this line:
<?php echo ($rows['deal']==""?"style='display:none;'":"") ?>
Complete code:
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" <?php echo ($rows['deal']==""?"style='display:none;'":"") ?> id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

with PHP:
You can just count if row has a data so echo it:
this is row with data:
<?php
$row = 'you can add get rows from database';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
this is row with out data
<?php
$row = '';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>

If the field is empty, it will have a length of 0. So you can use that logic in order to hide the 'coupon' class
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<!-- My code -->
<?php
if(strlen($rows['deal'] > 0)
{
?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php
}
?>
<!-- End of my code -->
</div>
<?php } ?>

We can use something like this .
<?php if($fildvalue != ''){ ?>
<div><?php echo $fildvalue; ?> </div>
<?php } ?>
so div will be created only when their is an value

Check the data row and put all the HTML tags which you want to hide in case if it is empty or not set.
<?php if(isset($rows['deal']) && !empty($rows['deal'])){ ?>
<span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
In PHP, empty() function is able to check NULL value, empty string and zero in return.