Open link getting via ajax response in colorbox not working

Question

I have three php scripts. lectures.php , lectures-ajax.php and lectures-play.php

In lectures.php, data get retrieved from lectures-ajax.php via jquery ajax after selecting option from dropdown.

In retrieved data via ajax contains a link. I want to open that link (i.e. Play Now button link) in colorbox. But it is not working.

code in lectures.php :

head section :

 <link rel="stylesheet" href="source-floatbox/colorbox.css" />
 <script src="js/jquery.min.js"></script>   
 <script src="source-floatbox/jquery.colorbox.js"></script>

 <script>
 var $ar = jQuery.noConflict(); 
 $ar(document).ready(function(){ 
       $ar('#loader').hide();
       $ar("#sthaan_table").on('change', function() {       
        var sthaan_table_value=$ar("#sthaan_table").val();
        var dataString = 'sthaan_table_value='+ sthaan_table_value;

    if ($ar('#sthaan_table').is(':empty')){
        $ar("#sthaan_details").hide();
        $ar('.sthaan_details_empty').show();
        $ar("#sthaan_details'").empty();
   }else{
     $ar.ajax({
        beforeSend: function() {
            $ar('#loader').show();
            $ar("#sthaan_details").hide();
            $ar('.sthaan_details_empty').hide();
        },
        complete: function(){
            $ar('#loader').hide();
        },
        type: "POST",
        url: "lectures-ajax.php",
        data: dataString,
        cache: false,
        success: function(html){
            $ar("#sthaan_details").html(html);
            $ar("#sthaan_details").show();
            $ar('.sthaan_details_empty').hide();
        }
      });
    }
  });
}); 
</script>

In body section :

   <select name='sthaan' id='sthaan_table' class="form-control" >
        <option value="">Select Sthaan</option>
        <option value="cumulative">Cumulative</option>
        <option value="sutra">Sutra Sthaan</option>
        <option value="shaareer">Shaareer Sthaan</option>
        <option value="nidaan">Nidaan Sthaan</option>      
        <option value="chikitsa">Chikitsa Sthaan</option>
        <option value="kalpa">Kalpa Sthaan</option>
        <option value="uttar">Uttar Sthaan</option>
   </select>    

   <div id="loader" class="loader"><img src="images/red1.gif" style="width:100px; height:100px;"></div>
   
   <div class="sthaan_details" id="sthaan_details"></div>                   

   <div class="status alert alert-danger sthaan_details_empty" style="display:none;">Select Sthaan First</div>

code in lectures-ajax.php :

<?php
 include("db.php");

 if (isset($_POST["sthaan_table_value"])){
    $sthaan_selected = $database->filter($_POST["sthaan_table_value"]); 
    
  ?>

    <div style="background-color:#26b864; color:#FFFFFF; font-size:15px; padding:5px; font-weight:600;">Audio Lectures - <b><?php echo $sthaan_selected ;?></b></div><br>

 <?php    
  $q1 =  "SELECT * FROM  $audiotable where sthaan='$sthaan_selected' and showhide='0' order by upload_date ASC";

  $counts = 1;
  $len = $database->num_rows($q1);

  if($len !=0){
       $results = $database->get_results($q1);
  ?> 

 <table class="audiorec ff">
 <thead>
     <tr>
        <th scope="col" style="width:5%;">Sr.No.</th>
        <th scope="col" style="width:45%;">Lecture Details</th>         
        <th scope="col" style="color:#FFFFFF; width:16%; text-align:center;">Play Now</th>      
    </tr>
</thead>
<tbody>
 <?php
  foreach ($results as $data){
 ?>
    <tr>
        <td scope="row" data-label="Sr.No."><?php echo $counts;?></td>      
        <td data-label="Lecture Details"><?php echo ucwords(stripslashes($data['file_subject']));?></td>
        
        
        
        <td data-label="Play Now">
          <a href="javascript:void(0);" data-url="lectures-play.php?loginpasskey=<?php echo $token;?>&play-audio=<?php echo $data['lecture_id'];?>" target="_top"  class="btn btn-success colorbox-my">Play</a>
        <script>
        
    
        $(document).on("click", ".colorbox-my", function(){              
            $('.colorbox-my').colorbox({
               
                href: $(this).data('url'), 
                iframe: true,
                innerWidth: '95%',
                innerHeight:'70%',
                opacity : 0,
                fixed:true, 
                escKey: false, 
                overlayClose: false,             
        });
    });
</script>           
        </td>           
    </tr>       
     <?php $counts++;} ?>
 </tbody>
 </table>     


<?php 
   }
  }
 ?>
    

If displaying all results on lectures.php by default (without using sorting / filter option with dropdown and without using lectures-ajax.php, jquery - ajax) colorbox working.

Your kind help appreciated...

Answer 1

cut $(document).on("click", ".colorbox-my", function(){
$('.colorbox-my').colorbox({

            href: $(this).data('url'), 
            iframe: true,
            innerWidth: '95%',
            innerHeight:'70%',
            opacity : 0,
            fixed:true, 
            escKey: false, 
            overlayClose: false,             
    }); code from lectures-ajax.php and use it in lectures.php script section it will work