2017-04-02 11 views
-1

私のコードは私のモダールを正しく開くように改訂しました。私はまだテーブル変数をモーダルに渡す問題に直面しているので、エディットボタンをクリックして編集する行に応じて編集することができます。MODAL HELP - PHPでユーザIDごとに行データを引き出す方法

<html> 
    <head>  
     <title>Admin View</title>  
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 

    <body background=http://wallpapercave.com/wp/ItmVuT6.jpg> 

     <!-- container with table headers/user records/edit function/approve function -->  
     <div class="container"> 
     <table class="table table-hover table-striped"> 
       <center> 
        <thead> 
         <tr style="font-size: 24; color: white;"> 
          <th>ID</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Email</th> 
          <th>Status</th> 
          <th colspan="2">Actions</th>   
         </tr> 
        </thead> 
       </center> 

       <tbody style="background-color: #F0F8FF"> 
        <?php   
        $i = 1; foreach($users as $u) 
        { 
        ?> 
        <tr style="font-size: 20;"> 

         <td width="5%;"> <?php echo $i; ?></td> 
         <td><?php echo $u->first_name; ?></td> 
         <td><?php echo $u->last_name; ?></td> 
         <td><?php echo $u->email; ?></td> 
         <td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td> 

         <!--edit button--> 
         <td><a href="" data-toggle="modal" data-target="#editModal"><span class='glyphicon glyphicon-edit'></span></a></td> 

         <!--approve button--> 
         <td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td> 

        </tr> 
        <?php $i++; } ?> 
       </tbody> 
       <table class="table table-hover table-striped"> 
      <center> 
       <thead> 
        <tr style="font-size: 24; color: white;"> 
         <th>ID</th> 
         <th>First Name</th> 
         <th>Last Name</th> 
         <th>Email</th> 
         <th>Status</th> 
         <th colspan="2">Actions</th>   
        </tr> 
       </thead> 
      </center> 

      <tbody style="background-color: #F0F8FF"> 
       <?php   
       $i = 1; foreach($users as $u) { 
       ?> 
       <tr style="font-size: 20;"> 

        <td width="5%;"> <?php echo $i++; ?></td> 
        <td><?php echo $u->first_name; ?></td> 
        <td><?php echo $u->last_name; ?></td> 
        <td><?php echo $u->email; ?></td> 
        <td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td> 

        <!--edit button--> 
        <td><a data-toggle="modal" data-target="#editModal<?php echo $u->id;?>"><span class='glyphicon glyphicon-edit'></span></a></td> 

        <!--approve button--> 
        <td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td> 


       </tr> 

    <!--modal--> 

<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='editModalLabel' aria-hidden='true'> 
     <div class='modal-dialog'> 
      <div class='modal-content'> 
       <div class='modal-header'> 
        <button type='button' class='close' data-dismiss='modal'><span class='glyphicon glyphicon-remove'></span></button> 
        <h3 class="modal-title" id='modalHeading'>Entry for User ID <?php echo $u->$id; ?></h3> 
       </div> 
       <!--modal body--> 
       <div class='modal-body'> 
        <form action='' method='post'> 

         <div class='form-group'> 
          <label for='First Name'>First Name</label> 
          <input class='form-control' type='text' name='first_name' value="<?php echo $first_name; ?>"><br/> 
         </div> 

         <div class='form-group'> 
          <label for='Last Name'>Last Name</label> 
          <input class='form-control' type='text' name='last_name' value="<?php echo $last_name; ?>"/><br/> 
         </div> 

         <div class='form-group'> 
          <label for='Email'>Email</label> 
          <input class='form-control' type='text' name='email' value="<?php echo $email; ?>"/><br/> 
         </div> 

         <div class='form-group'> 
          <label for='Approved'>Approved</label> 
          <input class='form-control' type='text' name='email' value="<?php echo $approved; ?>"/><br/> 
         </div>    
       </div> 

       <!--modal footer--> 
       <div class='modal-footer'> 
        <button type="button" class="btn btn-primary">Update</button> 
       </div> 
       </form> 
      </div>  
     </div> 
    </div> 

       <?php } ?> 
      </tbody> 
     </table> 


    <!--attempt at ajax function for approve success class  
    <script> 

     $('.edit').on("click", function(){ 
     // user id stored when row edit clicked 
     var userid = $(this).data('id'); 

     $ajax({ 

      url: $(this).attr('href'), 
      method: 'POST', 
      success: function (data) { 

      $('#row_' + userid).addClass('success') 
      }, 

      error: function (data) { 

      $('#row_' + userid).addClass('danger') 
      } 
     }); 
     }); 


    </script> 
    --> 

    </body> 
    </html> 

助けてください!

+0

print_r($ users);を試してください。データが含まれているかどうかを確認します。 – tvdpol

+0

ajaxを使用してデータをロードする必要があります。これをチェックしてください:http://stackoverflow.com/questions/14971766/load-content-with-ajax-in-bootstrap-modal – MoeinPorkamel

+0

$ users変数の宣言方法は? – winter

答えて

0

あなたのforeach内にモーダルを入れて、<a data-toggle="modal" data-target="#editModal<?php echo $u->id;?>"><span class='glyphicon glyphicon-edit'><div class='modal fade' id='editModal<?php echo $u->id;?>' tabindex='-1' role='dialog' aria-labelledby='editModalLabel' aria-hidden='true'>にするだけです。私はMySQLiオブジェクト指向を使用するための私のコード全体を持っている、私はあなたの問題に役立つことを願っています。

<?php 
$servername = "localhost"; 
$username = "username"; //username 
$password = "password"; //password 
$dbname = "myDB"; //myDB 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
?> 

<!DOCTYPE html> 
<html> 
<head> 
    <title>ACE | aice09</title> 
    <!--Bootstrap 3.3.7 CSS--> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!--Data Tables--> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css"> 
    <!--Fonts--> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> 
    <!--Date Timepicker--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> 
</head> 
<body> 
    <nav class="navbar navbar-default mynavbar"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="javascript:;" onclick="window.location.href = '#'">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="javascript:;" onclick="window.location.href = '#'">Link <span class="sr-only">(current)</span></a></li> 
      <li><a href="javascript:;" onclick="window.location.href = '#'">Link</a></li> 
      <li class="dropdown"> 
       <a href="javascript:;" onclick="window.location.href = '#'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Action</a></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Another action</a></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Separated link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="javascript:;" onclick="window.location.href = '#'">Link</a></li> 
      <li class="dropdown"> 
       <a href="javascript:;" onclick="window.location.href = '#'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Action</a></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Another action</a></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="javascript:;" onclick="window.location.href = '#'">Separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav><!--/navbar navbar-default mynavbar--> 

    <ol class="breadcrumb"> 
     <li><a href="javascript:;" onclick="window.location.href = '#'"><span class="fa fa-home"></span></a></li> 
     <li><a href="javascript:;" onclick="window.location.href = '#'">Users</a></li> 
     <li class="active"><b>Data</b></li> 
    </ol><!--/breadcrumb--> 

<!--////////////Start the Content Here//////////////////--> 

<div class="container-fluid" style=""> 
    <!-- Data Table Here --> 
    <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th rowspan="2" style="width: 3%">NO</th>     
       <th rowspan="2" style="text-align: center; width: 10%;">CLIENT ID</th>     
       <th rowspan="2" style="text-align: center;width: 10%">NAME</th> 
       <th colspan="4" style="text-align: center">ADDRESS</th> 
       <th rowspan="2" style="width: 5%"></th> 
      </tr> 
      <tr> 
       <th style="text-align: center; width: 18%">BARANGAY </th> 
       <th style="text-align: center; width: 18%;">MUNICIPALITY </th> 
       <th style="text-align: center; width: 18%;">PROVINCE </th> 
       <th style="text-align: center; width: 18%;">COUNTRY </th> 
      </tr> 
     </thead> 
     <tbody> 
      <?php 
       $sql = "SELECT * FROM users"; 
       $result = $conn->query($sql); 
       if ($result->num_rows > 0) { 
        $id=1; 
        while($row = $result->fetch_assoc()) { 
      ?> 

      <tr> 
       <td><?php echo $id++;?></td> 
       <td ><?php echo $row['clientid'] ?></td> 
       <td><a data-toggle="popover" title="Popover title" data-content="<div class='media'><a href='#'' class='pull-left'><img src='<?php echo $row['image'] ?>' class='media-object' alt='<?php echo $row['name'] ?> Image'></a><div class='media-body'><h4 class='media-heading'><?php echo $row['name'] ?></h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>"><?php echo $row['name'] ?></a></td> 
       <td><?php echo $row['barangay'] ?></td> 
       <td><?php echo $row['municipality'] ?></td> 
       <td><?php echo $row['province'] ?></td> 
       <td><?php echo $row['country'] ?></td> 
       <th><a href="" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal<?php echo $row['clientid'] ?>">EDIT</a> <a href="" class="btn btn-danger btn-sm"><span class="lnr lnr-trash"></span> </a> </th> 
      </tr> 
      <!-- Modal --> 
      <div class="modal fade" id="myModal<?php echo $row['clientid'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
       <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">ADD SOMETHING</h4> 
        </div> 
        <div class="modal-body"> 
        <p>This for <?php echo $row['name'] ?> modal</p> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button type="button" class="btn btn-primary">Submit</button> 
        </div> 
       </div> 
       </div> 
      </div> 

      <?php 
       } 
      } else { 
       echo "0 results"; 
      } 
      $conn->close(); 
      ?> 
     </tbody> 
    </table> 

</div><!--/container-fluid--> 

<!--////////////End of Content Here//////////////////--> 

<!--Data Table JS--> 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script> 
</body> 
</html> 

<style type="text/css"> 
    .mynavbar{ 
     margin-bottom: 0px; 
    } 
    .mymodalbutton{ 
     margin-bottom: 5px; 
    } 
</style> 

<script type="text/javascript"> 
$(document).ready(function() { 

    //data-table 
    $('#example').DataTable(); 
}); 
</script> 
+0

上記の私の改訂コードをご覧ください。今はテーブル内の単一の行としてID 1をロードするだけです。それをクリックすると、未定義の変数が続いています。それは私のモーダルのデータターゲットですか? –

+0

私の与えられたコードを試してみて、その違いを見て、あなたの違いが何であれフィードバックをお願いします。 – Ace

関連する問題