无法在Wordpress中使用AJAX检索HTML文件的特定部分（single.php）

Question

I have a small problem with a feature that I'm trying to implement on my site. I want when I click on an excerpt from a blog post on my homepage that the content of the article (single.php) opens in a modal window.

I use jQuery and Ajax to do that and it works really well except that Ajax fetches me the entire contents of single.php file (ie the header with scripts, styles, doctype, footer, etc.). I would just like to get the div (#PostContainer) that includes the title of the article and the content.

You will probably tell me to just delete my header and footer of the single.php file, but this is not possible because it is important to keep intact my file to be able to access from the address of the blog post (www.mydomainname.com/blog-post1).

It turns out that I am not at all familiar with WordPress :/ This is the first time I build a theme. The codes I shared with you run like a charm on WordPress but recovers me all of my single.php file (header + content in my div #postContainer + footer). I would like to recover only the contents of my div #postContainer.

I'm stuck :/

Someone would help me please ?

Thank you so so much for your time !

Here are my codes :

HTML :

<a class="hs-inner-click modal" data-content="<?php the_permalink(); ?>"           rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

CSS :

.modal-window {
  position: fixed;
  left: 50%;
  top: 50px;
  width: 720px;
  background-color: #fff;
  transform: translate(-50%, 0);
  z-index: 11;
}
.modal-shade {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

JQUERY & AJAX in a JS file :

(function($) {

    $.fn.modal = function (opt) {

        var settings, createModal, closeModal, body;

        settings = $.extend({
            'modal': 'jquery-modal',
            'close': 'jquery-modal-close',
            'closeText':'',
            'shade': 'jquery-modal-shade'
        }, opt);

        body = $('body');

        closeModal = function(modal, shade) {
            modal.remove();
            shade.remove();
        };

        createModal = function(data) {
            var shade, close, modal;

            shade =$('<div />', {
                class: settings.shade
            }).on('click', function() {
                closeModal(modal, shade);
            });

            close =$('<a />', {
                text: settings.closeText,
                class: settings.close,
                href: '#'
            }).on('click', function(e) {
                closeModal(modal, shade);
                e.preventDefault();
            });

            modal =$('<div />', {
                html: data,
                class: settings.modal
            }).append(close);

            body.prepend(shade, modal);
        };

        this.on('click', function(e) {
            var self =$(this);

            $.ajax({
                url:self.data('content'),
                type: 'get',
                cache: false,
            }).done(function(data) {
                createModal(data);
            }).error(function() {
                createModal('There is a mistake');
            });
        e.preventDefault();
        });

    };

})(jQuery);

Answer 1

1. I would suggest to use WordPress REST API V2 for the request without the need of selecting a div or loading single.php without header & footer.

This will allow you to load post content by just calling an endpoint similar to this: /wp-json/wp/v2/posts/<id>

Full API reference here.

1. Alternatively I am not sure if it will work but jquery code might help you (execute onload of modal): $("#jquery-modal").load("www.mydomainname.com/blog-post1 #postContainer");

ADDITIONALLY: On ajax success append content on a dummy div and use it to find only the part of the page you need and return it. That's the way jquery load() actually works if you check the source.

jQuery( "<div>" ).append( jQuery.parseHTML(data) ).find("#postContainer");