CODEWITHSUNDEEP
phpcodeignitermodal-dialogpopup
VIVEK ROBIN KUJUR
VIVEK ROBIN KUJUR

Reputation: 33

How can I display data in a modal popup on click using CodeIgniter?

I am developing a blog using Codeigniter where the details are being displayed in a bootstrap card with the "Read More" feature. The code is fetching data dynamically and is displaying all the details in the card, but once clicking on 'Read More' it is only displaying the first row data. What can be done to fetch the particular row data in modal popup against which the Read More button is clicked? Here is the code for fetching the data and displaying in 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='#' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#whatwedo'>Read More</a>";
        echo "</div>";
        echo "</div>";
        echo "</div>";
        // section for modal starts here
        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 "</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>";

        // section for modal starts here
    }
?>

What else it could be possible with? Please assist. Thankyou

Upvotes: 0

Views: 441

Answers (1)

Daffa Akbari
Daffa Akbari

Reputation: 135

you should give different ID for each set of button and the modal

for the button

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

for the modal

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

so 1 read more button will associate with 1 modal

if you have ID in your table you can do something like this

foreach($data as $dt){
echo "<a href='#' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#modal".$dt->id."'>Read More</a>";

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

if you dont have ID you can do this

$counter = 1;
foreach($data as $dt){
    echo ("<a href='#' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#modal".$counter"'>Read More</a>");
    
    echo ("<div class='modal fade' id='modal".$counter"' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>");
counter++;
    }

you will achieve the same result.

Upvotes: 0

Related Questions