如何获取特定ID以显示模态的具体细节

Question

我创建了一篇文章并使用模态我可以查看文章，但问题是当我试图查看文章时只显示第一篇文章。不是特别是我点击的那个..我注意到我声明的变量只获得第一个id。

            <?php
                include_once('../model/articles.php');
                $database = new Database();
                $conn= $database->getConnection();
                $db= new articles($conn);
                $output = $db->viewAllarticles();
                $articleid ='';
                $artname = '';
                $artpublished = '';
                $arttitle= '';
                $artbody = '';
                foreach ($output as $key) {
                        $articleid = $key['art_id'];
                        $artpublished = $key['date_published'];
                        $arttitle = $key['art_title'];
                        $artbody =$key['art_body'];
                    if($key['art_isSaved'] == '0'){
            ?>
            <style>
                .ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            </style>
            <div id="article" class="col-lg-4" style="background:#f9f9f9;width:218px;margin-right:10px;">

            &emsp;<strong class="font-1"><?php echo $key['firstname'].' '.$key['lastname'] ?></strong><br>
          <?php echo $key['art_body']?><br>
          <?php
        <i class="fa fa-eye"></i> <?php echo $key['art_seen']?>
        <span class="pull-right"><span style="color:#59960b;" data-toggle="modal" data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>">  </span>

            </div>
            <?php       
                }
                }
                ?>

我想要做的是当我点击时阅读更多我点击的ID的ID将被发送到模态。

<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
    <div class="modal-dialog">
     <?php
        $output = $db->viewArticle($articleid);
            foreach ($output as $key):
                if($key['art_id'] == $articleid){   
            ?>
          <!--view Modal content-->
          <div id="articlepost" class="modal-content-article">
            <div class="modal-header-article">
                <input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
        <button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">&times;</button>
            </div>
        <img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
        <div class="modal-body">
        <div align="center"  style="color:#222;">   
        <strong class="font-2" id="title"><?php echo $arttitle ?></strong>
                <br>
            </div>
    <?php }?>
  </div>
</div>

我尝试使用javascript来获取文章的ID并且它可以工作，但问题是我不知道如何使用javascript中的变量将其声明为我的php如果条件...你对如何有任何想法我可以获得特定文章的ID，所以当我点击文章时，我点击的那个将是显示的那个???

Answer 1

这是因为您正在使用重复的模态ID。你必须让Modal Id像这样独特：

<span class="pull-right" id="artid"><span style="color:#59960b;" class="read" data-id="myModal_<?php echo $articleid; ?>">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"> </span>

<div class="modal fade margin-top-70" id="myModal_<?php echo $articleid; ?>" role="dialog" style="margin-left:-50px;">
    <div class="modal-dialog">
     <?php
        $output = $db->viewArticle($articleid);
            foreach ($output as $key):
                if($key['art_id'] == $articleid){   
            ?>
          <!--view Modal content-->
          <div id="articlepost" class="modal-content-article">
            <div class="modal-header-article">
                <input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
                  <button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">&times;</button>
              <img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
            </div>
    <?php }?>
  </div>
</div>

用于模态打开的jQuery：

$("body").on("click",".read",function(){
   var id = $(this).data('id');
   ('#'+id).modal('toggle');
});

Answer 2

你必须在PHP中使用AJAX。因为每次点击你必须从数据库中获取数据取决于你的文章id.kindly阅读关于ajax。    现在我只想解决你的问题。

首先在文件中添加jquery库

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'></script>

用这个替换你读更多按钮

<span class='pull-right'><span style='color:#59960b;' data-toggle='modal' data-id='<?php echo $articleid; ?>' data-target='#myModal'>Read more..</span><span>

更改您的模态，如下所示

<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
        <div class="modal-dialog">

        </div>
        </div>

将以下脚本添加到您的页面

<script>

$(document).ready(function(){
    $(document).on('click','span[data-toggle=modal]',function(){
    var articleID=$(this).data('id');
    $.ajax({
        'url':'../model/read_more_articles.php',//create a page and give the url   
        'data':{id:articleID},//pass id into read_more_articles.php page using method post
        'method':'POST',
         success: function (data) { //data contain return of the read_more_articles.php
                $('.modal-dialog').html(data);//put generate html of the modal-dialog div
            }
    })
});
})
</script>

创建一个类似read_more_articles.php的页面。这里获取crrosponding文章ID和填充html的详细信息。

<?php
     $output="";
     $articleid=$_POST['id'];//receive article id which is sent by ajax.
        $output = $db->viewArticle($articleid);
            foreach ($output as $key){
                if($key['art_id'] == $articleid){  
                        $output .="<div id='articlepost' class='modal-content-article'>
                        <div class='modal-header-article'>
                         <input type='hidden' name='aid' id='aid' value='".$articleid."'/>
        <button type='button' style='padding-left:1155px;position:fixed;' class='close' data-dismiss='modal'>&times;</button>
            </div><img src='".$key['art_cphoto']."' style='margin-left:100px;'/>
            <div class='modal-body'>
        <div align='center'  style='color:#222;'>   
        <strong class='font-2' id='title'>".$arttitle."</strong><br></div>"
  }
  }
  echo $output;

  ?>

Answer 3

我终于找到了一种如何做的方式..所以这就是我所做的..首先我将我的跨度改为按钮

<button type="button" class="btn openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $articleid;?>">Read More....</button>

然后 我的模态div

 <div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
    <div class="modal-dialog">

    </div>
  </div>

然后创建了一个jquery脚本来从按钮获取id并将其发送到我的html内容所在的另一个页面并将其返回并以模态对话框显示。

<script type="text/javascript">

    $('.openModal').click(function(){
        var id = $(this).attr('data-id');
        alert(id);
        $.ajax({url:"../controller/displayarticle.php?id="+id,cache:false,success:function(result){
            $(".modal-dialog").html(result);
        }});
    });

</script>

将id发送到另一个页面后，我使用$ _GET来获取正在发送的id。

  $artid = '';
   if ( !empty($_GET['id'])) {
     $artid = $_GET['id'];
  }else{
    header("Location: home.php");
  } 

发送id之后我使用for循环根据正在发送的id以模式显示数据库中的数据。

    $output = $db->viewArticle($artid);
    foreach ($output as $key):
    <div id="articlepost" class="modal-content-article">
       <div class="modal-header-article">
          <input type="hidden" name="aid" id="aid" value="<?php echo $artid ?>"/>
          <img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
       </div>
       <div class="modal-body">
         <img  src="./<?= $key['image'];?>" style="border-radius:50%;margin-top:10px;" width="5%" height="5%" />
       </div>
<?php
foreach ($db->countarticlecomment($artid) as $value) {
?>
<i class="fa fa-comment" style="color:#59960b;"></i> <span style="color:gray;"><b><?php echo $value['comments']?></b></span>&emsp;
    </div
    <?php endforeach ?>