How to Fetch row details in popup modal using codeigniter

Question

Have displayed data from database using bootstrap card. All these cards have Read more buttons. Once click on the Read More the modal should fetch that specific row details and display. The view is as shown below

The codes are mentioned below:

Code for View using card

<div class="row clearfix">

<?php 
    $query = $this->db->query("SELECT * FROM services_offered LIMIT 15");
    foreach ($query->result() as $row) {
        echo "<div class='col-lg-4 bottommargin-sm'>";
        echo "<div class='feature-box media-box fbox-bg'>";
        echo "<div class='fbox-media'>";
        echo "<a href='#'><img src='$row->swo_images' alt='Featured Box Image' style='height:250px; width:450px;'></a></div>";
        echo "<div class='fbox-content fbox-content-lg'>";
        $string = $row->swo_brief_intro;
        $string = word_limiter($string, 15);
        echo "<h3 class='nott ls0 font-weight-semibold'>$row->swo_image_heading<span class='subtitle font-secondary font-weight-light ls0'>$string</span></h3>";
        
        echo "<a href='fetchDetails' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#whatwedo'>Read More</a>";
        echo "</div>";
        echo "</div>";
        echo "</div>";
    }
?>

Code for modal that should load:

<?php 

    $query = $this->db->query("SELECT * FROM services_offered");
    foreach ($query->result() as $row) {
        
        echo "<div class='modal fade' id='whatwedo' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";
        echo "<div class='modal-dialog' >";
        echo "<div class='modal-content'>";
        echo "<div class='modal-header'>";
        echo "<h5 class='modal-title' id='exampleModalLabel'>$row->swo_image_heading</h5>";
        echo "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
        echo " <span aria-hidden='true'>&times;</span>";
        echo "</button>";
        echo "</div>";
        echo "<div class='modal-body'>";    
        echo "..";
        echo "</div>";
        echo "<div class='modal-footer'>";
        echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>";
        echo "<button type='button' class='btn btn-primary'>Save changes</button>";
        echo "</div>";
        echo "</div>";
        echo "</div>";
        echo "</div>";
    }
 ?>

Code for controllers

public function fetchDetails($id)
    {
        $this->db->where('id',$id);
        $query = $this->db->query("SELECT * FROM services_offered");
        return $query->result();
    }

question from:https://stackoverflow.com/questions/66062055/how-to-fetch-row-details-in-popup-modal-using-codeigniter

Answer 1

You should give the modal different ID each modal or services, ID must unique for each services.

give id for the button

echo "<a href='fetchDetails' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#idmodal'>Read More</a>";
           

and give the modal also the same id

echo "<div class='modal fade' id='idmodal' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";

you can use services id in your database or give it a unique name make sure the button and the modal have the same id.