I can not retrieve a specific portion of an HTML file (blog post) with AJAX

  • Hello to the WordPress community!

    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).

    Someone would have any idea ?

    Thank you so so much for your time !

    Here are my code :

    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 :

    (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);

Viewing 3 replies - 1 through 3 (of 3 total)

  • Well, you could do one of the following:

    1) Use the WordPress API to retrieve the post object, and reconstruct the data you need in your JS. This may be too complicated, based on what else is in your post.

    2) Process the HTML that’s returned from the AJAX call so that you strip off everything but the part you need.

    3) Write a back-end function that generates just the HTML you need, and use your AJAX call to call that function. If your theme is well-structured, you can just re-use the parts that generate the post content area.

    Thread Starter DurdenBlog

    (@durdenblog)

    Hi @ancawonka,

    Thank you for this informations. However, would you have a tutorial, or can I have a little help from you to solve my problem?

    It turns out that I am not at all familiar with WordPress :/ This is the first time I build a theme. The code that I have shared in my first comment runs 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 need help for example to create a function in my function.php file that only get my content on my single.php file and then specify it in my js file.

    Thank you.. and sorry for my lack of knowledge.

    Thread Starter DurdenBlog

    (@durdenblog)

    Ok.. I’ve found a way to fix my problem.
    I really don’t know if it’s the right way to do but it works.. so for that moment I will use this code.

    I’ve changed this :

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

			body.prepend(shade, modal);
		};

    To this : 

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

			body.prepend(shade, modal);
			};

    So now, it returns me only the div #modalAjax instead of my full single.php code.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘I can not retrieve a specific portion of an HTML file (blog post) with AJAX’ is closed to new replies.

Tags