如何在Codeigniter中显示动态模式弹出窗口 [英] How to display dynamic modal popup in codeigniter

问题描述

我正在一个Codeigniter项目中，该项目以卡的形式显示数据库信息，并具有Read More选项.我想显示带有选定行内容的模式弹出窗口.目前，我正在工作的代码仅显示第一行，并且如果删除了模型目标，则代码将显示正确的内容，但不会以模态形式显示.请协助查询.

I am working on a Codeigniter project which displays database information in the form of cards, having an option for Read More. I want to display the modal popup with the selected row content. For now the code I'm working is displaying only the first row, and if model target is removed the code is displaying correct contents but its not showing in form of modal. Please assist with the query.

查看代码从此处开始

<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='Fetch/getDetails/{$row->id}' 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

        
    }
?>

控制器代码从此处开始

public function getDetails($id)
    {


        $row = $this-> db
                -> select('swo_brief_intro, swo_image_heading, swo_images')
                -> where('id', $id)
                -> limit(1)
                -> get('services_offered')
                -> row();
        
        if (isset($row))
        {

        echo "<div class='modal fade' id='exampleModal' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";
        echo "<div class='modal-dialog'>";
        echo "<div class='modal-content'>";
        echo "<div class='modal-header'>";
        echo "<h2 class='modal-title' id='exampleModalLabel'>$row->swo_image_heading</h2>";
        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 "<label>$row->swo_brief_intro</label>";
        echo "<br />";
        echo "<img src='".base_url().$row->swo_images."' class='img-fluid' alt='' style='height:250px; width:650px;'>";
        echo "</div>";
        echo "<br />";
        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>";
        }
            
    }

请协助查询.谢谢

视图将是这样

但是模态总是显示第一个内容

but the modal is always displaying the first content

推荐答案

您应为模式或服务的每个模式赋予不同的ID，每个服务的ID必须唯一.

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

为按钮提供ID

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

并为模态赋予相同的ID

and give the modal also the same id

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

您可以在数据库中使用服务ID或为其指定唯一名称，以确保按钮和模式具有相同的ID.

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.

顺便说一句，我已经在您的其他

btw I already answered this on your other question

这篇关于如何在Codeigniter中显示动态模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！