0

In my wordpress website i am trying to add post_thumbnail to div id="post-cont" dynamically with jquery. After successfully adding post_titel.

Jquery:

<script>
$(function(){
 $('body').on('click', '.post-link', function(){
  var names = ['aa', 'ab', 'ac', 'ad'];
  $('#post-cont').fadeIn();
  var post_title = $(this).closest('div').find('a').text();
  var rel = $(this).attr('rel');
  var post_thumb = jQuery(this).append('<img src="<?php echo wp_get_attachment_image_url(get_post_thumbnail_id()); ?>" />');

  for (var i=0; i<names.length; i++) {
    if ($('#post-cont').find('input[name=' + names[i] + ']').length < 1) {
      $('#post-cont').append( '<div class="rows"><input name="' + names[i] + '" value="'+rel+'">'+post_thumb+' '+post_title+'-- <a href="#" class="close">REMOVE</a></input></div>' );   
  break;
 }
}
});
$('body').on('click', '.close', function() {
  $(this).closest('.rows').remove();
});

 $('.close').click(function(){
 $('#post-cont').fadeOut();
 });
});
</script>

index.php

<?php 
 if( have_posts() ):             
 while( have_posts() ): the_post();                 
   <?php the_post_thumbnail ('large', array('class' => 'img-responsive'));?>
   <button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
endwhile;
endif; 
wp_reset_query();
?>

<div id="post-cont"> ...... </div>

I need to add both post_title and post_thumb with button class="post-link" .

How can i add post_thumbnail dynamically?

Any help is appreciated

1
  • Why do this using jQuery when WordPress can do it with PHP?
    – Cedon
    Mar 21, 2017 at 17:34

1 Answer 1

1

js (edit 4)

    $(function() {
        $('body').on('click', '.post-link', function() {
        // Jquery
        var ajax = {};
        ajax.id= $(this).attr('rel');
        var ajaxurl = '/wp-admin/admin-ajax.php';
        jQuery.post(
        ajaxurl,
        {
        'action': 'get_img_post_and_title',
        'data': ajax
        },
        function(response){
        // add html
        if(response.success){
        $('#post-cont').append("<li>ID: "+response.data.post_id+" "+response.data.post_title+" <img src='"+response.data.post_thumb+"'/> --<a href='#' class='close'>X</a></li>");  
        }
        }
        );
    });
    });

php (edit 4)

     // php
    add_action("wp_ajax_get_img_post_and_title", "get_img_post_and_title");
         add_action("wp_ajax_nopriv_get_img_post_and_title", "get_img_post_and_title");
        function get_img_post_and_title(){
         $return = array(
        'post_id' => $_POST['data']['id'],
'post_title' => get_the_title($_POST['data']['id']),
        'post_thumb' => wp_get_attachment_image_url(get_post_thumbnail_id($_POST['data']['id']))
        );
        wp_send_json_success($return);    
       }

index.php

    <?php 
 if( have_posts() ):             
 while( have_posts() ): the_post();                 
   <?php the_post_thumbnail ('large', array('class' => 'img-responsive'));?>
   <button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
endwhile;
endif; 
wp_reset_query();
?>

<div id="post-cont"> ...... </div>
10
  • Hello @TrubinE i try but unable to work your code for me. please check my Question jquery and update your jquery. that will really appreciated
    – FRQ6692
    Mar 21, 2017 at 16:44
  • i am new with Ajax so difficult for me to update this code
    – FRQ6692
    Mar 21, 2017 at 16:47
  • Tell me, what does not work in my code? What is missing? So that I can fix it.
    – TrubinE
    Mar 21, 2017 at 18:51
  • Please check my website LINK Ajax not adding anything to, id="post-cont" in sidebar.
    – FRQ6692
    Mar 22, 2017 at 5:04
  • missing means something like that var names = ['aa', 'ab', 'ac', 'ad']; and for (var i=0; i<names.length; i++) these thing need to work for Ajax adding
    – FRQ6692
    Mar 22, 2017 at 5:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.