In WordPress, I am pulling data in from an api and using custom post types to display in owl-slider. For some reason, my code is breaking the slider layout. I will post the code below.
<form>
<section class="s-raking">
<div class="container">
<?php
$terms = get_terms( array(
'taxonomy' => 'ranking',
'hide_empty' => false,
) );
?>
<h2 class="title-bar" data-ranking="<?php echo $terms[0]->slug; ?>">Ranking <span><?php echo $terms[0]->name; ?></span>
<div class="ranking-nav-btn">
<div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>
<div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>
</div>
</h2>
<div class="row no-gutters">
<div class="col-lg-8">
<div class="slider-ranking owl-carousel">
<?php
foreach($terms as $term) { ?>
<div class="rankig-one" style='background:url(<?php the_field('bg_image', 'term_' .$term->term_id ); ?>) no-repeat scroll center center; background-size: cover;' data-title="<?php echo $term->slug; ?>">
<h3><?php the_field('title_normal', 'term_' .$term->term_id ); ?> <?php if(get_field('title_strong', 'term_' .$term->term_id )) { ?><span><?php the_field('title_strong', 'term_' .$term->term_id ); ?></span><?php } ?></h3>
<ul class="ajax-content2">
<?php
$posts = get_field('top_players', 'term_' .$term->term_id );
if( $posts ): ?>
<ul>
<?php $i = '1'; foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php echo $i; ?> <?php the_title(); ?></a></li>
<?php $i++; endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<?php } ?>
</ul><! - - end ajax-content2-->
</div>
</div>
<div class="col-lg-4">
<div class="filters-ranking">
<div class="filters-search">
<input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />
<i class="fa fa-search"></i>
</div>
<div class="tabs d-flex">
<span class="tab">Ranking</span>
<span class="tab">Selecciona tu estado</span>
</div>
<div class="tab_content">
<div class="tab_item">
<div class="filters-bar">
<select class="filters-select" name="position" onchange="this.form.submit()">
<?php
$field_key = "field_5c80e92663dd1";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<option value="' . $k . '">' . $v . '</option>';
}
?>
</select>
</div>
<div class="players-results" id="ajax-content"></div>
</div>
<div class="tab_item">
<div class="players-state">
<ul>
<?php
$field_key = "field_5cebb7e973218";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<li data-value="' . $k . '">' . $v . '</li>';
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
if(isset($_GET["position"])){
$position=$_GET["position"];
// echo "select position is => ".$position;
}
?>
</form>
The link to the home page is The slider in question is:
On Closer inspection in the inspector tools, I notice the "li" information is missing after one second.
Edit:
Thanks to Mehar I have moved closer to the problem. I now have the data persisting to the page but now my slider items are all showing 2 or 3 items even though the owl carousel is set to item: 1. I am now also missing the search box to the right of the slider as seen in the image above. I will place the updated code below.
Functions.php
add_action( 'wp_ajax_nopriv_players', 'players_lpm' );
add_action( 'wp_ajax_players', 'players_lpm' );
function players_lpm() {
$position = $_POST['position'];
$ranking = $_POST['ranking'];
$search = $_POST['search'];
$state = $_POST['state'];
$args = array(
'post_type' => 'players_lpm',
'posts_per_page' => -1,
's' => $search,
'tax_query' => array(
array(
'taxonomy' => 'ranking',
'field' => 'slug',
'terms' => $ranking
)
),
'meta_query' => array(
array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
'relation' => 'AND'
)
);
$the_query = new WP_Query( $args ); $i2 = '1';
echo '<ul>';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
$i2++; endwhile; wp_reset_postdata();
echo '</ul>';
die();
}
add_action( 'wp_ajax_nopriv_playersmain', 'playersmain' );
add_action( 'wp_ajax_playersmain', 'playersmain' );
function playersmain() {
$position = $_POST['position'];
$ranking = $_POST['ranking'];
$search = $_POST['search'];
$state = $_POST['state'];
$args = array(
'post_type' => 'players_lpm',
'posts_per_page' => 10,
's' => $search,
'tax_query' => array(
array(
'taxonomy' => 'ranking',
'field' => 'slug',
'terms' => $ranking
)
),
'meta_query' => array(
array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
'relation' => 'AND'
)
);
$the_query = new WP_Query( $args ); $i2 = '1';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
$i2++; endwhile; wp_reset_postdata();
die();
}
Script.js
var owl8 = $( ".slider-ranking" );
owl8.owlCarousel({
items: 1,
loop: true,
nav:true,
animateOut: 'fadeOut',
navText:['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
dots: false,
//autoplay:true,
autoplayTimeout:4000,
autoplayHoverPause:true
});
$('.customNextBtn4').click(function() {
owl8.trigger('next.owl.carousel', [300]);
});
$('.customPrevBtn4').click(function() {
owl8.trigger('prev.owl.carousel', [300]);
});
owl8.on('changed.owl.carousel', function(e) {
var current = e.item.index;
var currSl2 = $(e.target).find(".owl-item").eq(current).find(".rankig-one h3").html();
$(".s-raking .title-bar span").html(currSl2);
var currSl3 = $(e.target).find(".owl-item").eq(current).find(".rankig-one").attr('data-title');
$(".s-raking .title-bar").attr('data-ranking', currSl3);
ranking();
});
/*for first load*/
function ranking() {
$(".filters-ranking .players-results").mCustomScrollbar("destroy");
var position = $(".filters-select option:selected").val();
var ranking = $('.s-raking .title-bar').attr('data-ranking');
var search = $('.quicksearch').attr('data-search');
var state = $('.players-state').attr('data-state');
$.ajax({
url : ajaxurl,
type: 'post',
data : {
action : 'playersmain',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$("#ajax-content").html(response);
$(".filters-ranking .players-results").mCustomScrollbar({
scrollButtons:{enable:true}
});
}
});
$.ajax({
url : ajaxurl,
type: 'post',
data : {
// action : 'playersmain',
action : 'players_lpm',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$(".ajax-content2").html(response);
}
});
}
ranking();
The front-page.php data from above is still the same. Again, Thank you Mehar for getting me closer to solving this dilema.
P.D. Here is the messed up version image so far.
In WordPress, I am pulling data in from an api and using custom post types to display in owl-slider. For some reason, my code is breaking the slider layout. I will post the code below.
<form>
<section class="s-raking">
<div class="container">
<?php
$terms = get_terms( array(
'taxonomy' => 'ranking',
'hide_empty' => false,
) );
?>
<h2 class="title-bar" data-ranking="<?php echo $terms[0]->slug; ?>">Ranking <span><?php echo $terms[0]->name; ?></span>
<div class="ranking-nav-btn">
<div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>
<div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>
</div>
</h2>
<div class="row no-gutters">
<div class="col-lg-8">
<div class="slider-ranking owl-carousel">
<?php
foreach($terms as $term) { ?>
<div class="rankig-one" style='background:url(<?php the_field('bg_image', 'term_' .$term->term_id ); ?>) no-repeat scroll center center; background-size: cover;' data-title="<?php echo $term->slug; ?>">
<h3><?php the_field('title_normal', 'term_' .$term->term_id ); ?> <?php if(get_field('title_strong', 'term_' .$term->term_id )) { ?><span><?php the_field('title_strong', 'term_' .$term->term_id ); ?></span><?php } ?></h3>
<ul class="ajax-content2">
<?php
$posts = get_field('top_players', 'term_' .$term->term_id );
if( $posts ): ?>
<ul>
<?php $i = '1'; foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php echo $i; ?> <?php the_title(); ?></a></li>
<?php $i++; endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<?php } ?>
</ul><! - - end ajax-content2-->
</div>
</div>
<div class="col-lg-4">
<div class="filters-ranking">
<div class="filters-search">
<input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />
<i class="fa fa-search"></i>
</div>
<div class="tabs d-flex">
<span class="tab">Ranking</span>
<span class="tab">Selecciona tu estado</span>
</div>
<div class="tab_content">
<div class="tab_item">
<div class="filters-bar">
<select class="filters-select" name="position" onchange="this.form.submit()">
<?php
$field_key = "field_5c80e92663dd1";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<option value="' . $k . '">' . $v . '</option>';
}
?>
</select>
</div>
<div class="players-results" id="ajax-content"></div>
</div>
<div class="tab_item">
<div class="players-state">
<ul>
<?php
$field_key = "field_5cebb7e973218";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<li data-value="' . $k . '">' . $v . '</li>';
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
if(isset($_GET["position"])){
$position=$_GET["position"];
// echo "select position is => ".$position;
}
?>
</form>
The link to the home page is https://probeis.mx The slider in question is:
On Closer inspection in the inspector tools, I notice the "li" information is missing after one second.
Edit:
Thanks to Mehar I have moved closer to the problem. I now have the data persisting to the page but now my slider items are all showing 2 or 3 items even though the owl carousel is set to item: 1. I am now also missing the search box to the right of the slider as seen in the image above. I will place the updated code below.
Functions.php
add_action( 'wp_ajax_nopriv_players', 'players_lpm' );
add_action( 'wp_ajax_players', 'players_lpm' );
function players_lpm() {
$position = $_POST['position'];
$ranking = $_POST['ranking'];
$search = $_POST['search'];
$state = $_POST['state'];
$args = array(
'post_type' => 'players_lpm',
'posts_per_page' => -1,
's' => $search,
'tax_query' => array(
array(
'taxonomy' => 'ranking',
'field' => 'slug',
'terms' => $ranking
)
),
'meta_query' => array(
array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
'relation' => 'AND'
)
);
$the_query = new WP_Query( $args ); $i2 = '1';
echo '<ul>';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
$i2++; endwhile; wp_reset_postdata();
echo '</ul>';
die();
}
add_action( 'wp_ajax_nopriv_playersmain', 'playersmain' );
add_action( 'wp_ajax_playersmain', 'playersmain' );
function playersmain() {
$position = $_POST['position'];
$ranking = $_POST['ranking'];
$search = $_POST['search'];
$state = $_POST['state'];
$args = array(
'post_type' => 'players_lpm',
'posts_per_page' => 10,
's' => $search,
'tax_query' => array(
array(
'taxonomy' => 'ranking',
'field' => 'slug',
'terms' => $ranking
)
),
'meta_query' => array(
array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
'relation' => 'AND'
)
);
$the_query = new WP_Query( $args ); $i2 = '1';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
$i2++; endwhile; wp_reset_postdata();
die();
}
Script.js
var owl8 = $( ".slider-ranking" );
owl8.owlCarousel({
items: 1,
loop: true,
nav:true,
animateOut: 'fadeOut',
navText:['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
dots: false,
//autoplay:true,
autoplayTimeout:4000,
autoplayHoverPause:true
});
$('.customNextBtn4').click(function() {
owl8.trigger('next.owl.carousel', [300]);
});
$('.customPrevBtn4').click(function() {
owl8.trigger('prev.owl.carousel', [300]);
});
owl8.on('changed.owl.carousel', function(e) {
var current = e.item.index;
var currSl2 = $(e.target).find(".owl-item").eq(current).find(".rankig-one h3").html();
$(".s-raking .title-bar span").html(currSl2);
var currSl3 = $(e.target).find(".owl-item").eq(current).find(".rankig-one").attr('data-title');
$(".s-raking .title-bar").attr('data-ranking', currSl3);
ranking();
});
/*for first load*/
function ranking() {
$(".filters-ranking .players-results").mCustomScrollbar("destroy");
var position = $(".filters-select option:selected").val();
var ranking = $('.s-raking .title-bar').attr('data-ranking');
var search = $('.quicksearch').attr('data-search');
var state = $('.players-state').attr('data-state');
$.ajax({
url : ajaxurl,
type: 'post',
data : {
action : 'playersmain',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$("#ajax-content").html(response);
$(".filters-ranking .players-results").mCustomScrollbar({
scrollButtons:{enable:true}
});
}
});
$.ajax({
url : ajaxurl,
type: 'post',
data : {
// action : 'playersmain',
action : 'players_lpm',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$(".ajax-content2").html(response);
}
});
}
ranking();
The front-page.php data from above is still the same. Again, Thank you Mehar for getting me closer to solving this dilema.
P.D. Here is the messed up version image so far.
Share Improve this question edited Sep 20, 2019 at 12:06 Erik James Robles asked Sep 18, 2019 at 18:14 Erik James RoblesErik James Robles 1074 bronze badges 03 Answers
Reset to default 0The issue is caused by your ajax call which is returning the empty response. like see in your code
$.ajax({
url : ajaxurl,
type: 'post',
data : {
action : 'playersmain',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$(".ajax-content2").html(response);
}
});
This ajax call is made through themes/probeis-child/assets/scripts.js
are you using any slider plugin, most of the slider displays the content(Timeshift and duration) for milliseconds,so increase the display seconds(Timeshift and duration) in 10000 milliseconds,
The problem was two-fold. I had the wrong action in the ajax call which should have read players_lpm. That fixed the data not persisting. Additionally, I had the wrong placement of the initial form tag. I will place the edited code below. But before I do, many thanks to Mehar for his help in getting me closer to the answer.
<section class="" style="margin-top: 60px; padding-bottom: 0;">
<div class="concept-bar">
<div class="container">
<h2 class="title-bar">EJES ESTRATÉGICOS</h2>
<div class="row" style="padding-top: 20px;">
<div class="col-4">
<div class="number-holder"><span class="eje-number">1</span>
<h2 class="concept-item">DESAROLLO INTEGRAL DE TALENTO</h2>
</div>
</div>
<div class="col-4">
<div class="number-holder"><span class="eje-number">2</span>
<h2 class="concept-item">APOYO AL BEISBOL INFANTIL Y JUVENIL</h2>
</div>
</div>
<div class="col-4">
<div class="number-holder"><span class="eje-number">3</span>
<h2 class="concept-item">IMPULSO DE CONCEPTO "BEISBOL" EN MÉXICO</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="s-raking">
<div class="container">
<?php
$terms = get_terms( array(
'taxonomy' => 'ranking',
'hide_empty' => false,
) );
?>
<h2 class="title-bar" data-ranking="<?php echo $terms[0]->slug; ?>">Ranking <span><?php echo $terms[0]->name; ?></span>
<div class="ranking-nav-btn">
<div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>
<div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>
</div>
</h2>
<div class="row no-gutters">
<div class="col-lg-8">
<div class="slider-ranking owl-carousel">
<?php
foreach($terms as $term) { ?>
<div class="rankig-one" style='background:url(<?php the_field('bg_image', 'term_' .$term->term_id ); ?>) no-repeat scroll center center; background-size: cover;' data-title="<?php echo $term->slug; ?>">
<h3><?php the_field('title_normal', 'term_' .$term->term_id ); ?> <?php if(get_field('title_strong', 'term_' .$term->term_id )) { ?><span><?php the_field('title_strong', 'term_' .$term->term_id ); ?></span><?php } ?></h3>
<!-- <ul class="ajax-content2"> -->
<?php
$posts = get_field('top_players', 'term_' .$term->term_id );
if( $posts ): ?>
<ul>
<?php $i = '1'; foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php echo $i; ?> <?php the_title(); ?></a></li>
<?php $i++; endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<?php } ?>
</div>
</div>
<div class="col-lg-4">
<div class="filters-ranking">
<div class="filters-search">
<input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />
<i class="fa fa-search"></i>
</div>
<div class="tabs d-flex">
<span class="tab">Ranking</span>
<span class="tab">Selecciona tu estado</span>
</div>
<div class="tab_content">
<div class="tab_item">
<div class="filters-bar">
<select class="filters-select" name="position" onchange="this.form.submit()">
<?php
$field_key = "field_5c80e92663dd1";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<option value="' . $k . '">' . $v . '</option>';
}
?>
</select>
</div>
<div class="players-results" id="ajax-content"></div>
</div>
<div class="tab_item">
<div class="players-state">
<ul>
<?php
$field_key = "field_5cebb7e973218";
$field = get_field_object($field_key);
foreach ( $field['choices'] as $k => $v ) {
echo '<li data-value="' . $k . '">' . $v . '</li>';
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
if(isset($_GET["position"])){
$position=$_GET["position"];
// echo "select position is => ".$position;
}
?>
</form>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745142394a4613490.html
评论列表（0条）