테이블에서 모달로 정보를 가져 와서 편집하십시오.

Question

Ok 데이터베이스에서 가져온 정보를 표시하도록 설정된 테이블이 있습니다.

이 표의 끝에는 업데이트 버튼이 있습니다. 부트 스트랩을 사용하고 있는데이 버튼을 클릭하면 양식이있는 모달을 열고 사용자가 정보를 편집 할 수 있도록 특정 행의 값을 양식에 전달하려고합니다.

테이블이 생성됩니다 :

<?php 
       $con=mysqli_connect("50.63.106.181","TheGreenPandaWeb","MacBook1!","TheGreenPandaWeb"); 
       // Check connection 
       if (mysqli_connect_errno()) 
        { 
        echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
        } 

       $query = "SELECT * FROM affiliate_tasks WHERE username = '$_SESSION[username]'"; 

       if(isset($_POST['sort-selection']) && $_POST['sort-selection'] != 'all') 
       { 
        $query .= " AND status = '". $_POST['sort-selection']."';" ; 
       } 

       $result = mysqli_query($con, $query); 

       echo "<table class='table table-message table-hover'> 
       <tr class='heading'> 
       <td class='cell-title'>Tasks</td> 
       <td class='cell-status hidden-phone hidden-tablet'>Status</td> 
       <td class='cell-time align-right'>Due Date</td> 
       <td class='check-box' width='10px'>&nbsp;</td> 
       <td class='check-box' width='10px'>&nbsp;</td> 
       </tr>"; 

       while($row = mysqli_fetch_array($result)) 
        { 
        echo "<tr class='task " . ($row['resolved'] == 1 ? 'resolved' : '') . "' id='task-$row[task_id]'>"; 
        echo "<td class='cell-ttle'>" . $row['task_name'] . "</td>"; 
        echo "<td class='cell-status hidden-phone hidden-tablet " . ($row['status'] == Done ? 'text-success' : '') ." " . ($row['status'] == Overdue ? 'text-warning' : '') ."'>" . $row['status'] . "</td>"; 
        echo "<td class='cell-time align-right'>" . $row['due_date'] . "</td>"; 
        echo "<td class='check-box' width='10px'>" . "<a class='icon-arrow-up' href='#updateTaskModal' role='button' data-toggle='modal'></a>" . "</td>"; 
        echo "<td class='check-box' width='10px'>" . "<a class='icon-remove' href='#deleteTaskModal' role='button' data-toggle='modal'></a>" . "</td>"; 
        echo "</tr>"; 
        } 
       echo "</table>"; 

       mysqli_close($con); 
      ?> 

및 양식과 같이 보입니다 : 난 당신이 내가 어디에 확실하지 않다 자바 스크립트하지만해야합니다 파악하고

<form class="form-horizontal" name="new_task" action="scripts/form_scripts/new_task.php" method="post"> 
      <div class="control-group"> 
       <div class="controls"> 
        <input type="text" name="username" id="username" class="hide" value="<?php session_start(); echo $_SESSION[username]; ?>"> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="task_name">Task Name</label> 
       <div class="controls"> 
        <input type="text" name="task_name" id="task_name" placeholder="Something with description."> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="status">Task Status</label> 
       <div class="controls"> 
        <select id="status" name="status"> 
         <option value="Pending">Pending</option> 
         <option value="In Progress">In Progress</option> 
         <option value="Done">Done</option> 
        </select> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="due_date">Due Date</label> 
       <div class="controls"> 
        <input type="date" name="due_date" id="due_date" placeholder="mm/dd/yyyy"> 
       </div> 
      </div> 

시작한다.

Answer 1

이것이 내가하는 방법입니다. 태그에 "업데이트"클래스를 지정하고 태그의 일부 데이터 속성을 아래와 같이 채 웁니다. 다음과 같이

echo "<a class='icon-arrow-up update' href='#updateTaskModal' data-status='".$row['status']."' data-name='".$row['task_name']."' data-date='".$row['due_date']."' role='button' data-toggle='modal'></a>"; 

는 그런 다음 JQuery와는

이상적으로

$(document).ready(function(){ 

$('a.update').click(function(){ 
    var name = $(this).data('name'); 
    var date = $(this).data('date'); 
    var status = $(this).data('status');  

    $('#task_name').val(name); 
    $('#status').val(status); 
    $('#due_date').val(date); 
    }); 

}); 

당신은 트위터가 내 머리 위로 떨어져 부트 스트랩과 너무 익숙하지 ..... 모달 콜백이 코드를 통합 할 것이다 .. 갈 것 그래도이 부분을 알아 내려고합니다.

PS 완전히 테스트되지 않은 코드입니다. 여기서 아이디어를 제공하기 만하면됩니다. 여기에서 확인할 수 있습니다. :)

Answer 2

여기서 greybox 또는 fancybox를 사용하여 URL에 가치를 전달할 수 있습니다. 그러면 호출 된 페이지에서 해당 값을 검색 할 수 있습니다.