S
S
supercoder6662020-04-27 17:41:05
WordPress
supercoder666, 2020-04-27 17:41:05

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 classmodal-header»>
        <button typebutton» classclose» data-dismissmodal» aria-labelClose»><span aria-hiddentrue»>&times;</span></button>
        <?php the_title( '<h2 classmodal-title text-center»>', '</h5>' ); ?>
        </div>
        <div classmodal-content»>
        <div classconterer″>
            <img src=»<?php echo get_the_post_thumbnail_url(); ?>» classinstaupp-img img-circle»>
        </div>
            <div classconterer″>
                <p><i>Описание</i></p>
            </div>
        </div>
    <?php endwhile; ?>
<?php
    die();
}

Then, in index.php I did this:
<?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; ?>

And also in the same index.php script:
<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>

Well, in footer.php html-layout of this very modal window:
<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">&times;</span>
        </button>
      </div>
      ... <div class="conterer">

      </div>
    </div>
  </div>
</div>

By clicking on the news, a modal window opens, but empty, without anything. Where can there be an error or not something works somewhere? Thanks

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question