如何从模态中获取特定的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将被发送到模态。

<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

我终于找到了一种方法。我就是这么做的..。首先，我将我的跨度更改为按钮

<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 ?>

Answer 2

之所以发生这种情况，是因为您使用的是重复的模态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 3

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

首先在文件中添加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;

  ?>