How do i show the content through ajax in a popup

2 comments

1. This is a basic example of how to use AJAX in WordPress. It shows how to take a variable from javascript, pass it to a PHP function (altering it slightly), and then pass it back to the javascript.

   This assumes you already know how to enqueue javascript, etc.

   Javascript Piece (which you can add in header.php or footer.php or in template file in which it is needed.)

   jQuery(document).ready(function($) {
   
       // We'll pass this variable to the PHP function example_ajax_request
       var fruit = 'Banana';
   
       // This does the ajax request
       $.ajax({
           url: ajaxurl,
           data: {
               'action':'example_ajax_request',
               'fruit' : fruit
           },
           success:function(data) {
               // This outputs the result of the ajax request
               console.log(data);
           },
           error: function(errorThrown){
               console.log(errorThrown);
           }
       });  
   
   });
   

   PHP Piece (have to include in functions.php)

   function example_ajax_request() {
   
       // The $_REQUEST contains all the data sent via ajax
       if ( isset($_REQUEST) ) {
   
           $fruit = $_REQUEST['fruit'];
   
           // Let's take the data that was sent and do something with it
           if ( $fruit == 'Banana' ) {
               $fruit = 'Apple';
           }
   
           // Now we'll return it to the javascript function
           // Anything outputted will be returned in the response
           echo $fruit;
   
           // If you're debugging, it might be useful to see what was sent in the $_REQUEST
           // print_r($_REQUEST);
   
       }
   
       // Always die in functions echoing ajax content
      die();
   }
   
   add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
   add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
   
   
   // If you wanted to also use the function for non-logged in users (in a theme for example)
   // add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
   

2. you can add ajax request like that.

   jQuery(".item").click(function(e) {
       var currentID = jQuery(this).attr("id");
   
       jQuery.ajax({
           method: "POST",
           url: "some.php",
           data: {
               id: currentID,
               location: "Boston"
           }
       })
   
   
       .done(function(msg) {
               jQuery(".popup-overlay").html(msg);
   
               jQuery(".popup-overlay").show();
           });
       });
   

   you ajax.php should b like that check it and update me..

   <?php include("wp-load.php");
   $id=$_GET['id'];
    ?> 
   
     <div class="popup-overlay">
     <?php  
     $args = array( 'post__in' => $sss, 'post_type' => 'portfolio',);
     $loop=new WP_Query;
     $count=1;
     if($loop->have_posts()):whiile(have_posts()) :the_post();  
   if($count==$id) {
     ?>
     <div class="popup-box <?php echo $count; ?> ">
         <div class="inner-box">        
         </div>
     </div> 
   <?php  }
   $count;
   endwhile;
   endif;
   ?>
   

Comments are closed.