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

  • Why do this using jQuery when WordPress can do it with PHP? – Cedon Mar 21 '17 at 17:34
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>
|improve this answer|||||
  • 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 '17 at 16:44
  • i am new with Ajax so difficult for me to update this code – FRQ6692 Mar 21 '17 at 16:47
  • Tell me, what does not work in my code? What is missing? So that I can fix it. – TrubinE Mar 21 '17 at 18:51
  • Please check my website LINK Ajax not adding anything to, id="post-cont" in sidebar. – FRQ6692 Mar 22 '17 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 '17 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.