Develop Reference

getElementById not working on IE 11: HTML5 <article> element

I'm currently building out a new website, and naturally, Internet Explorer is giving me trouble. I have some Javascript that's intended to reveal an element with an onclick.
It works exactly as intended on other browsers, but testing on IE 11 has lead me into one headache after another.
Internet Explorer is driving me nuts while I figure this out. A live example for the page effected is here: http://beerworld.sandbox.nikijones.com/whats-on-tap/
The elements effected by the bug are generated here:
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? } ?>
And the script that only partially executes is here:
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
All lines seem to trigger propperly with exception of the fact that on internet explorer, the article remains hidden by a height of zero.
These are the 3 PHP Files for the page to be absolutely thorough:
HEADER.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<title><? the_title(); ?> - Beer World</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- WP Head Includes -->
<?php wp_head(); ?>
<!-- Fancy Box Image Lightbox -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<!-- Google Analytics Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118283566-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118283566-1');
</script>
<!-- Facebook Pixel Code -->
<!-- No code yet -->
</head>
<body id="body" <? body_class(); ?> onscroll="scrollHead();">
<!-- jQuery -->
<script src="<? echo get_template_directory_uri(); ?>/js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap -->
<script src="<? echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<video id="bgVideo" preload autoplay muted loop >
<source src="/wp-content/uploads/053119795-beer-bubbles-and-foam-slow-mot_H264_420-1.mov">
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.ogg" />
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.mp4" />
</video>
<div id="site-wrap">
<div id="bg-gradient">
<!-- Background Orange Gradient -->
</div>
<div class="container">
<header id="header">
<div id="social">
<a href="https://www.facebook.com/beerworldnewwindsor/" ><img src="<? echo get_template_directory_uri(); ?>/img/social-fb.png" alt="Facebook" /></a>
<a href="https://twitter.com/beerworldstore2" ><img src="<? echo get_template_directory_uri(); ?>/img/social-twitter.png" alt="Twitter" /></a>
<a href="#" ><img src="<? echo get_template_directory_uri(); ?>/img/social-li.png" alt="Linkedin" /></a>
</div>
<nav class="navbar navbar-expand-lg">
<!-- Button Created from Codepen By Collin Smith: https://codepen.io/collinscode/full/JLXJZY -->
<button class="navbar-toggler back" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="hamburger();">
<span class="navbar-toggler-icon">
<div class="btn1 btn">
<div class="bar-container">
<div class="bar1 bar"></div>
<div class="bar2 bar"></div>
<div class="bar3 bar"></div>
</div>
</div>
</span>
</button>
<? $headArgs = array('menu' => 'Header Menu' ,
'menu_class' => 'navbar-nav nav-fill' ,
'menu_id' => '' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'HeaderMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'theme_location' => 'Header Menu',
'link_after' => '');
wp_nav_menu($headArgs); ?>
</nav>
<img src="<? echo get_template_directory_uri(); ?>/img/logo.svg" alt="Beer World Logo" id="navLogo" />
<?/* * * NIVO SLIDER REPLACED BY REVOLUTION SLIDER ON JUNE 6, 2018 * * /
<!-- Nivo Slider -->
<? if(get_field('header_slider')){ ?>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<? $images = get_field('header_slideshow'); ?>
<? foreach( $images as $image ): ?>
<img src="<? echo $image['sizes']['large']; ?>" data-thumb="<? echo $image['sizes']['thumbnail']; ?>" alt="<? echo $image['alt']; ?>" class="nivo-img" />
<? endforeach; ?>
</div>
</div>
</header>
*/ ?>
<!-- Revolution Slider -->
<? $term = get_queried_object(); ?>
<? if(get_field('header_slider', $term)){
$slides = strval(get_field('header_slideshow', $term));
echo do_shortcode($slides);
}else{ ?>
<div id="spacer"><!-- No Active Slider For This Page --></div>
<? } ?>
PAGE TEMPLATE:
<?php
/**
* Template Name: What's On Tap
*
* #package WordPress
* #subpackage Beerworld
* #since Beerworld 2.0
*/
?>
<? get_header(); ?>
</header>
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
<main id="content-area"><?
if (have_posts()){
while (have_posts()){
the_post();
$beer_array = get_field('beers');
/* Beer Display Area */ ?>
<div id="tap-beer-display" class="container" >
<div class="row">
<h2>
TRY ONE OF OUR 24 FRESH, DRAFT BEERS
</h2>
</div>
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? }
wp_reset_postdata(); ?>
</div>
<div id="tap-click" >
<h2>
CLICK ON ANY TAP BELOW
</h2>
<div class="row" >
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name;?>
<div class="tap" onclick="tap('<? echo $post_slug; ?>')" id="tap-<? echo $post_slug; ?>" >
<? $logo = get_field('logo'); ?><img class="tap-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" />
</div>
<? }
wp_reset_postdata(); ?>
</div>
</div>
<div id="tap-blurb" >
<? the_content(); ?>
</div>
<? }
}
?></main>
<? get_footer(); ?>
FOOTER.PHP
</div>
<div id="foot">
<img src="<? echo get_template_directory_uri(); ?>/img/left-wheat.png" alt="bottom left wheat decoration" class="wheat left" />
<footer class="container">
<nav class='col-12'>
<?
$footArgs = array(
'menu' => 'Footer' ,
'menu_class' => 'navbar-nav' ,
'menu_id' => 'foot-menu' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'footerMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'link_after' => '',
'theme_location' => 'Footer Menu');
wp_nav_menu($footArgs);
?>
</nav>
<div class="row" id="foot-info">
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<img id="foot-logo" src="<? echo get_template_directory_uri(); ?>/img/logo.png" alt="Beer World Logo" style="width: 160px; max-width: 160px; min-width: 160px;" />
<span style="display:block;"><span style="font-size:22pt;" >BEER WORLD</span> 323 Windsor Highway • New Windsor, New York</span>
<span><a style="color: white;" href="tel:8455612244">845.561.2244</a> | <a style="color: white;" href="mailto:Info#beerworld.com">Info#beerworld.com</a></span>
</div>
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<p style="text-align:right;">© 2018 BEER WORLD <br />WEBSITE DESIGN BY THE NIKI JONES AGENCY, INC. </p>
</div>
</div>
</footer>
<img src="<? echo get_template_directory_uri(); ?>/img/right-wheat.png" alt="bottom right wheat decoration" class="wheat right" />
</div>
</div>
<?php wp_footer(); ?>
<script type="text/javascript" src="<? echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
//Navbar Hamburger Script
function hamburger(){
var toggler = $('#header').find('.navbar-toggler');
if (toggler.hasClass('active')) {
toggler.removeClass('active');
toggler.addClass('back');
}else{
toggler.removeClass('back');
toggler.addClass('active');
}
}
var $document = $('#body'),
$element = $('#header'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 20) {
// user scrolled 20 pixels or more;
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
</script>
<script src="<? echo get_template_directory_uri(); ?>/js/ada.js"></script>

Probably you forgot to add <!DOCTYPE html> at the begining of the page, so IE switches to 5.5 emulation, makes tag self-closing and you get an empty element.

Pagination without a table

is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks

Wordress Loadmore ajax doens't hide button

I'm having trouble on the wordpress page that I'm currently working..
I used this code >>https://github.com/alexcavender/wordpress-ajax-load-more
with some adjustment (complete code below) but the "load more button doesn't hide whenever it reach the last post.
<div id="primary" class="content-area container">
<main id="main" class="site-main" role="main">
<?php if (have_posts()) : ?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:', 'thinkbit'),
'after' => '</div>',
));
?>
</div><!-- .entry-content -->
<div id="all-post" class="all-post wrapper">
<?php
$args = array(
'post_type' => array('post', 'project', 'communities'),
'posts_per_page' => 10
);
$the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<div class="row masonry">
<?php while ($the_query->have_posts()) : $the_query->the_post();
/*$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item*/
$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ($termsArray as $term) { // for each term
$termsString .= $term->slug . ' '; //create a string that has all the slugs
}
?>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
<div id="things-go-here"></div>
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<div id="load-more-posts" class="text-center">
<h4>Load More</h4>
</div>
<?php else : ?>
<?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
function load_more_posts() {
$nonce_check = check_ajax_referer('extra-special', 'security');
if ($nonce_check) {
$offset = $_POST['offset'];
$args = array(
'post_type' => array('post', 'project', 'communities'),
'post_status' => 'publish',
'posts_per_page' => '10',
'orderby' => 'date',
'order' => 'DESC',
'offset' => $offset,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
while ($loop->have_posts()) {
$loop->the_post();
?>
<article>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
</article>
<?php
}
wp_reset_postdata();
}
wp_die();
} else {
exit();
}
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

Where is your js, did you catch ajax response yet?

you can detect the last post and display none or hide the button by using this.
This is just an example
<?php if (($loop->current_post +1) == ($loop->post_count)) {
echo 'This is the last post'; ?>
<style>
#load-more-posts{display:none !important;}
</style>
<?php
} ?>

Create a pop-up using PHP variable

I am trying to a create a pop-up for product but I Am not even able to see the object in alert box:
I have defined $new_date = date('m-d-Y', $dt); in another Div
Code:
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
alert('this.$new_date' );
//tried alert(".$new_date.");
}
});
})
</script>
Also I want to create a pop-up instead of alert:
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
<class="productcart" data-toggle="modal" data-target="#myModal_product">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal_product" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
});
})
</script>
Something like this But I don't get error in console nor it works...
Actual .tpl file
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
alert('this <?php echo $new_date?>' );
}
});
})
</script>
<div class="thumbnails grid row list-inline">
<?php
$icount = 0;
foreach ($products as $product) {
$item = array();
$item['image'] = $product['thumb']['thumb_html'];
$item['title'] = $product['name'];
$item['description'] = $product['model'];
$item['rating'] = ($product['rating']) ? "<img src='" . $this->templateResource('/image/stars_' . $product['rating'] . '.png') . "' alt='" . $product['stars'] . "' />" : '';
$item['info_url'] = $product['href'];
$item['buy_url'] = $product['add'];
$preSaleImg = '';
$expectedShippingDate = '';
$newPriceClass = '';
$preSaleClass = '';
if($product['date_available'] > date('Y-m-d')){
$preSaleImg = "<img src='" . $this->templateResource('/image/pre-sale.png') . "' class='pre-sale-img'>";
$dt = strtotime($product['date_available']);
$new_date = date('m-d-Y', $dt);
$expectedShippingDate = "<span class='expected-shipping-date'>expected shipping date " . $new_date . " </span>";
$newPriceClass = "price-with-expected-shipping-date";
$preSaleClass = 'pre-sale-product';
}
if (!$display_price) {
$item['price'] = '';
}
$review = $button_write;
if ($item['rating']) {
$review = $item['rating'];
}
if($icount == 4) {
$icount = 0;
?>
<div class="clearfix"></div>
<?php
}
$icount++;
?>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="fixed_wrapper">
<div class="fixed">
<a class="prdocutname" href="<?php echo $item['info_url'] ?>"
title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
<?php echo $this->getHookvar('product_listing_name_'.$product['product_id']);?>
</div>
</div>
<div class="thumbnail">
<?php if ($product['special']) { ?>
<span class="sale tooltip-test"><?php echo $text_sale_label; ?></span>
<?php } ?>
<?php if ($product['new_product']) { ?>
<span class="new tooltip-test"><?php echo $text_new_label; ?></span>
<?php } ?>
<?php echo $preSaleImg; ?>
<?php echo $item['image'] ?>
<div class="blurb"><?php echo $product['blurb'] ?></div>
<?php echo $this->getHookvar('product_listing_details0_'.$product['product_id']);?>
<?php if ($display_price) { ?>
<div class="pricetag jumbotron">
<span class="spiral"></span>
<?php if($product['call_to_order']){ ?>
<a data-id="<?php echo $product['product_id'] ?>" href="#"
class="btn call_to_order"><?php echo $text_call_to_order?> <i class="fa fa-phone"></i></a>
<?php } else if ($product['track_stock'] && !$product['in_stock']) { ?>
<span class="nostock"><?php echo $product['no_stock_text']; ?></span>
<?php } else { ?>
<a data-id="<?php echo $product['product_id'] ?>"
href="<?php echo $item['buy_url'] ?>"
class="productcart <?php echo $preSaleClass; ?>"><?php echo $button_add_to_cart ?></a>
<?php } ?>
<div class="price">
<?php if ($product['special']) { ?>
<div class="pricenew"><?php echo $product['special'] ?></div>
<div class="priceold"><?php echo $product['price'] ?></div>
<?php } else { ?>
<div class="oneprice <?php echo $newPriceClass; ?>"><?php echo $expectedShippingDate; ?><span class='aslowas' style="font-size:12px;">AS LOW AS: </span><?php echo $product['price'] ?></div>
<?php } ?>
</div>
<?php echo $this->getHookvar('product_listing_details1_'.$product['product_id']);?>
</div>
<?php } ?>
</div>
</div>
<?php
}
?>
</div>
<div class="thumbnails list row">
<?php
foreach ($products as $product) {
$item = array();
$item['image'] = $product['thumb']['thumb_html'];
$item['title'] = $product['name'];
$item['rating'] = ($product['rating']) ? "<img src='" . $this->templateResource('/image/stars_' . $product['rating'] . '.png') . "' alt='" . $product['stars'] . "' />" : '';
$item['info_url'] = $product['href'];
$item['buy_url'] = $product['add'];
if (!$display_price) {
$item['price'] = '';
}
$review = $button_write;
if ($item['rating']) {
$review = $item['rating'];
}
?>
<div>
<div class="thumbnail">
<div class="row">
<div class="col-md-4">
<?php if ($product['special']) { ?>
<span class="sale tooltip-test"><?php echo $text_sale_label; ?></span>
<?php } ?>
<?php if ($product['new_product']) { ?>
<span class="new tooltip-test"><?php echo $text_new_label; ?></span>
<?php } ?>
<?php echo $this->getHookvar('product_listing_label_'.$product['product_id']);?>
<?php echo $item['image'] ?>
</div>
<div class="col-md-8">
<a class="prdocutname" href="<?php echo $item['info_url'] ?>"><?php echo $item['title'] ?>
<?php echo $product['model'] ? "(".$product['model'].")" :''; ?></a>
<div class="productdiscrption"><?php echo $product['description'] ?></div>
<div class="blurb"><?php echo $product['blurb'] ?></div>
<?php echo $this->getHookvar('product_listing_details00_'.$product['product_id']);?>
<?php if ($display_price) { ?>
<div class="pricetag pull-right">
<span class="spiral"></span>
<?php if($product['call_to_order']){ ?>
<a data-id="<?php echo $product['product_id'] ?>" href="#"
class="btn call_to_order"><?php echo $text_call_to_order?> <i class="fa fa-phone"></i></a>
<?php } else if ($product['track_stock'] && !$product['in_stock']) { ?>
<span class="nostock"><?php echo $product['no_stock_text']; ?></span>
<?php } else { ?>
<a data-id="<?php echo $product['product_id'] ?>"
href="<?php echo $item['buy_url'] ?>"
class="productcart"><?php echo $button_add_to_cart ?></a>
<?php } ?>
<div class="price">
<?php if ($product['special']) { ?>
<div class="pricenew"><?php echo $product['special'] ?></div>
<div class="priceold"><?php echo $product['price'] ?></div>
<?php } else { ?>
<div class="oneprice"><?php echo $product['price'] ?></div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php echo $this->getHookvar('product_listing_details11_'.$product['product_id']);?>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
Code for modal at the bottom of .tpl file
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
<class="productcart" data-toggle="modal" data-target="#myModal_product">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal_product" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
});
})
</script>

I think $new_date is a PHP variable, right? If it's true, you have to echo it out using PHP. Try this:
alert('this <?php echo $new_date?>' );

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.