how to get specific id to show specific detail from modal

Question

i created an article and using modal i can view the article but the problem is when i tried to view the article only the first article is being shown. not specifically the one that i clicked.. i noticed that the variable that i declared only gets the first 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       
                }
                }
                ?>

what i wanted to do is when i clicked read more the id of the one that i clicked will be sent to the modal.

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

i tried to use javascript to get the id of the article and it works but the problem is i dont know how to use the variable from javascript to declared it to my php if condition...do you have any idea on how can i get the id of the specific article so when i click the article the one that i click will be the one to shown???

Answer 1

i finally found a way how to do it.. so here is what i did.. first i change my span to button

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

and then my modal div

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

    </div>
  </div>

then created a jquery script to get the id from the button and send it to another page where my html content is and return it and display it in modal-dialog.

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

after sending the id to another page i use $_GET to get the id that is being sent.

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

after sending the id i use for loop to display the data from database in a modal based on the id that is being sent.

    $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

You have to use AJAX with PHP. Because each click you have to fetch data from database depend on you article id.kindly read through about ajax. Now i just try to solve you problem .

First add jquery library in your file

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

Replace you read more button with this

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

Change your modal like below

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

        </div>
        </div>

Add this script below to your page

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

Create a page like read_more_articles.php. Here get details of crrosponding article id and populate 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

This is happen because you are using repeated modal id. You have to make Modal Id unique like this:

<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 for Modal Open:

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