Wordpress load php content via AJAX

Question

I'm trying to make this panel work:

The elements on the left are h4 with a data-* attribute that contains the post category that they have to load via $.ajax(); in the middle section. there i display just the the_post_thumbnail(); with a simple php loop. Then on clicking on one img I want to load the details of the post via $.ajax(); on the box on the right.

$(document).ready(function() {
  $('h4.homus-partners-global-ajax').click(function() {
    var pb_cat = $(this).data('pb-cat');
    $('section').append(pb_cat);

    $.ajax({

      // type: "POST",
      // url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",


      success: function(result) {

        $('ul.homus-partners-section-slide').html(result);

        $('section').append(result);
      }
    });

  });
});

section.homus-partners {
  max-width: 960px;
  height: 150px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: auto;
  margin-top: 60px;
}
@media screen and (max-width: 940px) {
  section.homus-partners {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 480px;
    height: 100%;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners {
    margin-top: 30px;
    max-width: 100vw;
  }
}
section.homus-partners .homus-partners-list {
  max-width: 170px;
  background-color: #a21c26;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  text-align: left;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list {
    max-width: 480px;
    min-height: 40px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  margin-left: 30px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap {
    margin: 10px 30px;
    max-width: 480px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  font-weight: 400;
  text-transform: capitalize;
  padding: 3px 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    margin: 0 5px;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 25%;
  left: -15px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
  border-left: 5px solid rgba(255, 255, 255, 0.5);
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  border-left: 5px solid #ffffff;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    position: absolute;
    width: 1px;
    height: 1px;
    left: calc(50% - 5px);
    top: auto;
    bottom: -5px;
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
    border-bottom: 5px solid rgba(255, 255, 255, 0.5);
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    border-bottom: 5px solid #ffffff;
  }
}
section.homus-partners .homus-partners-section {
  background-color: #c22633;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 490px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-section {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section {
    min-height: 100px;
  }
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right {
  margin: 0 10px;
  height: 150px;
  width: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left i,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right i {
  color: #ffffff;
  cursor: pointer;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
section.homus-partners .homus-partners-section .homus-partners-section-inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 460px;
  height: 150px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-left: 0px;
  width: auto !important;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single:last-of-type {
  padding: 0;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis {
  max-width: 310px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: inset 0 0 0 5px #c22633;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 5px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
    width: 30%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: auto;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
    max-width: 70%;
    margin: 0 10px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info h4 {
  font-weight: 700;
  color: #c22633;
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info p {
  padding-right: 10px;
  font-size: 12px;
  line-height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="homus-partners">
  <div class="homus-partners-list">
    <div class="homus-partners-wrap">
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_partner">
        partners
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_ente">
        enti
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="">
        associazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_coll">
        collaborazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_media">
        media
      </h4>
    </div>
  </div>

  <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

    <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
      <i class="uk-icon-caret-left"></i>
    </a>

    <div class="homus-partners-section-inner uk-slider-container">

      <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

        <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

          <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
            <i class="uk-icon-caret-left"></i>
          </a>

          <div class="homus-partners-section-inner uk-slider-container">

            <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

            </ul>

          </div>

          <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
            <i class="uk-icon-caret-right"></i>
          </a>


        </div>

      </ul>

    </div>

    <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
      <i class="uk-icon-caret-right"></i>
    </a>


  </div>

  <div class="homus-partners-detalis">
    <div class="homus-partners-detalis-img">
      <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg" />
    </div>
    <div class="homus-partners-detalis-info">
      <h4>Fenice Pool</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

</section>

This is the cose i'm working on but i cant append any img to try the ajax function neither load php content because the server respond with a 500 error

EDIT As asked I provide the php code

this is the code i want to replace

    <?php get_template_part('loop_pb_coll') ?>

and this is the ajax function loading the new code

 $.ajax({
  type: "POST",
  url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",
  success: function(result){
    $('ul.homus-partners-section-slide').html('<?php get_template_part('+result+') ?>');
    $('footer').append(result);
  }
 });

This is the error i get

500 is an internal server error, so it sounds like it is a problem with your PHP script, please post that as well. — ZZZZtop
– ZZZZtop, Commented Feb 26, 2016 at 15:20
The ajax request getting a 500 error sounds like you'd need to check your ajax endpoint and investigate for an error there first. Are you providing good data to the .php page? If not, you'd need to check the data your sending and implement error handling at the endpoint. What happens if you try and access that url directly in the browser? — ak_
– ak_, Commented Feb 26, 2016 at 15:20
@AdamKonieska if i try from the address i get a 404 but the url is correct — Nicola Bertelloni
– Nicola Bertelloni, Commented Feb 26, 2016 at 16:06
Can you replace your css code (as it is not really necessary to the question) with your php code used in the ajax call; as others have pointed out, it is the most likely cause of the 500. — ImClarky
– ImClarky, Commented Feb 26, 2016 at 16:12
@NicolaBertelloni if you're getting a 404 error by entering the url in the browser's address bar, then the url doesn't seem to be correct. Can you share the URL you're trying to use as your AJAX endpoint? — ak_
– ak_, Commented Feb 26, 2016 at 16:21

Blackbam · Accepted Answer · 2016-02-26 16:33:56Z

1

WordPress has a specific way to handle ajax requests. It is bad practice to place external PHP scripts inside the WordPress structure. If needed put them in a place on the server which is outside the control of the WordPress .htaccess.

WordPress functions anyway will not work within this script if you do not include wp-blog-header.php (which will trigger the bootstrap process of WordPress).

You can handle Ajax requests from within your theme or within a custom plugin you create.

The correct way to handle Ajax requests in WordPress is extensivley described in the WordPress codex:

https://codex.wordpress.org/AJAX_in_Plugins

Option 1: Create a custom Plugin and use the functions as described in the codex

Option 2: Use the ajax functions as described in the codex in a custom Theme or Child Theme

Option 3: Create an external PHP file outside the WordPress folder structure on your server structure and make an ajax call to this external script.

Option 1 and 2 are good practice in terms of migration.

edited Feb 26, 2016 at 16:33

answered Feb 26, 2016 at 16:25

Blackbam

19.7k31 gold badges112 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicola Bertelloni Over a year ago

But that is not a plugin. You think I should transform it in a plugin?

Blackbam Over a year ago

Plugin is option 1. Option 2: Inside your Theme (if it is custom, same functions as described). Option 3: Make a folder outside WordPress, if needed load WordPress externally and your Ajax should work, too.

Blackbam Over a year ago

The answer of @Mark describes Option 2 in more detail.

Moishy · Accepted Answer · 2016-02-26 16:39:56Z

0

in your header.php add this to declare your ajax url

<script>var ajaxURL = '<?php echo esc_js(admin_url('admin-ajax.php'));?>';</script>

then in your JS.

$(document).delegate('h4.homus-partners-global-ajax', 'click', function(event) {
    event.preventDefault();
    var pb_cat = $(this).data('pb-cat');
    var data = {
        'action': 'GetPost',
        catURL : "loop_"+ pb_cat,
    };
    $.post(ajaxURL, data, function(response) {
        $( 'ul.homus-partners-section-slide' ).html(response);
    });

  });

then in your functions.php

function GetPost(){
    $cat = $_POST['catURL'];
    get_template_part($cat);
    exit();
}
add_action('wp_ajax_nopriv_GetPost', 'GetPost');
add_action('wp_ajax_GetPost', 'GetPost');

edited Feb 26, 2016 at 16:39

answered Feb 26, 2016 at 16:31

Moishy

3,6583 gold badges28 silver badges46 bronze badges

2 Comments

Nicola Bertelloni Over a year ago

I tried but this doesn't work. Can you explain me the code that you want me to put in the header?

Moishy Over a year ago

I modified it slightly

Collectives™ on Stack Overflow

Wordpress load php content via AJAX

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related