Answer the question
In order to leave comments, you need to log in
Why doesn't ajax work in wordpress: opening a post in a modal window?
Hello! I have such a problem. I'm trying to make it so that all posts that are displayed on the main page through the loop do not open in a new window, but in a modal window from bootstrap. The problem is that for some reason it does not work quite the way we would like - it does not work. It opens a modal window, but empty, without an article. Here's how it works:
in functions.php I put the following code:
add_action('wp_ajax_my_action', 'data_fetch');
add_action('wp_ajax_nopriv_my_action', 'data_fetch');
function data_fetch($postID){
$postID=intval( $_POST['param'] );
$args = array(
‘p’ => $postID, // ID of a page, post, or custom type
//’post_type’ => ‘any’
);
$recent = new WP_Query($args);
while ( $recent->have_posts() ) : $recent->the_post();?>
<div class=»modal-header»>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»><span aria-hidden=»true»>×</span></button>
<?php the_title( '<h2 class=»modal-title text-center»>', '</h5>' ); ?>
</div>
<div class=»modal-content»>
<div class=»conterer″>
<img src=»<?php echo get_the_post_thumbnail_url(); ?>» class=»instaupp-img img-circle»>
</div>
<div class=»conterer″>
<p><i>Описание</i></p>
</div>
</div>
<?php endwhile; ?>
<?php
die();
}
<?php query_posts('cat=2');
$args = array(
'p' => $postID, // ID поста
'post_type' => 'any'
);
$recent = new WP_Query($args);
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="oneNew p1" style="background-image: url(img/newBg.png)">
<a href="#" data-toggle="modal" data-target=".bd-example-modal-xl" data-ajax-param="<?php the_ID(); ?>"><?php the_title( '<h2 class="modal-title text-center">', '</h2>' ); ?></a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<script>
function fetch(e){var param = $(e.target).attr('data-ajax-param');
// поиск id поста
$.post('wp-admin/admin-ajax.php', {'action':'my_action', 'param':param}, function(response){
$('.modal-content.ajax').html(response);
});
}
</script>
<script>
$( '[data-ajax-param]' ).click(function (e) {
fetch(e);
});
</script>
<div class="modal fade bd-example-modal-xl modal-content.ajax" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
... <div class="conterer">
</div>
</div>
</div>
</div>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question