Как редактировать / удалять таблицу по отдельной строке с помощью модального окна?

У меня есть таблица, в которой я хочу, чтобы пользователь мог редактировать информацию или удалять всю строку. Данные берутся из 3 таблиц в моей базе данных.

мои таблицы:

Таблица 1:

| ID | name | dancer name | dance name1 | comp_num1 | dance score1| etc|

| 1 |....rob....|.......jen......... | ...dance A...... | .........23........|......... 44........|etc|

| 2 |....rob....|.......larry....... | ...dance B...... | .........50........|......... 60........|etc|

| 3 |....rob....|.......jen......... | ...dance C...... | .........14........|........344........|etc|

Таблица 2

| ID | name | dancer name | dance name2 | comp_num2 | dance score2| etc|

| 1 |....rob....|.......jen......... | ...dance D...... | .........33........|......... 94........|etc|

| 2 |....rob....|.......larry....... | ...dance E...... | .........52........|......... 60........|etc|

| 3 |....rob....|.......jen......... | ...dance F...... | .........10........|........244........|etc|

таблица 3

| ID | name | dancer name | dance name3 | comp_num3 | dance score3| etc|

| 1 |....rob....|.......jen......... | ...dance G...... | .........13........|......... 39........|etc|

| 2 |....rob....|.......larry....... | ...dance H...... | .........22........|......... 70........|etc|

| 3 |....rob....|.......jen......... | ...dance I...... | .........1........|........230........|etc|

Чтобы отредактировать информацию, они нажмут на кнопку с зеленым значком, которая покажет модальное всплывающее окно.

table

В модальном окне есть 2 вкладки. Одна для отображения некоторых деталей, а другая вкладка - это форма обновления.

modal

вкладка с подробностями выглядит следующим образом:

Имя танцора: название конкурса - уровень конкурса - место

Имя судьи: Имя судьи

Комментарии судьи: комментарии судьи

Проблема, с которой я столкнулся, заключается в том, что информация в модальном окне, извлеченном из базы данных, одинакова для каждой нажатой кнопки. Но он должен получать информацию только из ряда кнопки.

На фотографиях вы заметите, что у меня всего три кнопки. Это потому, что я сначала делал только таблицу 1. Итак, из таблицы 1 все 3 танцора (джен, ларри и джен) имеют те же данные, что и Ларри, при нажатии на кнопку действия.

Мне также нужно иметь возможность обновлять каждую строку по строке. Я думаю, мне нужно как-то передать идентификатор, но я не уверен, как это сделать.

 <!--TABLES-->

        <div id="table" class="table-responsive-sm">
            <table id="History" class="table table-striped table-bordered table-responsive-sm table-hover" cellspacing="0" style="width:100%">  
                <thead>
                    <tr>
                        <th id="firstName" style="width: 10%">First <br> Name</th>
                        <th id="competition" >Competition <br> Name</th>
                        <th id="level">Competition Level</th>
                        <th id="danceName">Dance Name</th>
                        <th id="numComp" style="width: 10%">Number of Competitors</th>
                        <th id="placement" style="width: 10%">Dancer's Placement</th>
                        <th id="score">Dancer's Score</th>
                        <th id="firstPlace">1st Place Score</th>
                        <th id="action" style="width: 10%" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter">Action</th>
                    </tr>
                </thead>

                <tbody>

                    <!-- The modal is only updating the last loop. So I need to do something similar to what I did with the dancer dropdown button. -->

                    <?php
                    $sql = "SELECT `id`, `dancer_name`, `comp_entered`, `competition_level1`, `dance_name1`, `number_competitors1`, `dancer_placement1`, `dancer_score1`, `firstpl_score1`, `2ndpl_score1`, `3rdpl_score1`, `judge_name1`, `judge_comment1` FROM `mark_cards1` WHERE name = '$name'";
                    $res = mysqli_query($con,$sql); 
                    $markcard = 'id';
                    //if($res==FALSE){
                    //die('there was an error running query [' . $con->error . ']');
                    //  }

                    while($row=mysqli_fetch_array($res)){
                        echo '
                        <tr>
                        <td>'.$row["dancer_name"].'</td>
                        <td>'.$row["comp_entered"].'</td>
                        <td>'.$row["competition_level1"].'</td>
                        <td>'.$row["dance_name1"].'</td>
                        <td>'.$row["number_competitors1"].'</td>
                        <td>'.$row["dancer_placement1"].'</td>
                        <td>'.$row["dancer_score1"].'</td>
                        <td>'.$row["firstpl_score1"].'</td>
                        <td>
                        <!--MODAL-->
                        <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog cascading-modal" role="document">

                        <!--MODAL Content-->
                                <div class="modal-content">

                        <!--Modal cascading tabs-->
                                    <div class="modal-c-tabs">
                                        <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab">Details</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#panel8" role="tab">Edit</a>
                                            </li>
                                        </ul>

                        <!-- Tab Panels  -->
                                        <div class="tab-content">

                            <!--PANEL 1 -->
                                            <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                                <!--Body-->
                                                <div class="modal-body mb-1">
                                                    <b>'.$row["dancer_name"].'</b>: '.$row["comp_entered"].' - '.$row["competition_level1"].' - '.$row["dancer_placement1"].' 
                                                    <br>
                                                    <b>Judge:</b> '.$row["judge_name1"].'
                                                    <br>
                                                    <b>Comments:</b> '.$row["judge_comment1"].'
                                                </div>                                    
                                <!--Footer-->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>     

                            <!--Panel 2-->
                                            <div class="tab-pane fade" id="panel8" role="tabpanel">

                                <!--Body-->
                                                <div class="modal-body">
                                                    <form id="updateForm" method="post" class="form-horizontal" name="tcol" action="edit_comp.php>" role="form" data-toggle="validator">
                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Dancer Name</label>
                                                            <select class="form-control dancebox" id="dancer" name="dancer"><option>'.$data["dancer_name"].'</option>;}
                                                            </select>
                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Region</label>

                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Competition Name</label>
                                                            <select class="form-control compbox" id="compEntered" name="compEntered">
                                                            <option value="base">Please choose a Region</option>
                                                            </select>
                                                        </div>


                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Competition Level</label>
                                                            <select class="form-control levelbox" id="level" name="level">
                                                                <option>Beginner</option>
                                                                <option>Advanced Beginner</option>
                                                                <option>Novice</option>
                                                                <option>Prize Winner</option>
                                                                <option>Prelim</option>
                                                                <option>Open Champion</option>
                                                            </select>
                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Dance Name</label>
                                                            <select class="form-control" id="danceName" name="danceName">
                                                            <option>Reel</option>
                                                            <option>Light Jig</option>
                                                            <option>Slip Jig</option>
                                                            <option>Hornpipe</option>
                                                            </select>
                                                        </div>



                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Number of Competitiors</label>
                                                            <input id="competitior" type="text" name="competitor" class="form-control competitors" placeholder="Enter total competitors">
                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Dancer Placement</label>
                                                            <select class="form-control" id="placement" name="placement">
                                                            <option>1st place</option>
                                                            <option>2nd place</option>
                                                            <option>3rd place</option>
                                                            <option>4th place</option>
                                                            </select>
                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">Dancer Score</label>
                                                            <input id="danceScore" type="text" name="danceScore" class="form-control" placeholder="Enter score ">
                                                        </div>

                                                        <div class="md-form form-sm mb-5">
                                                            <label data-error="wrong" data-success="right" for="modalLRInput12">1st Place Score</label>
                                                            <input id="firstScore" type="text" name="firstScore" class="form-control" placeholder="Enter first place score ">
                                                        </div>





                                                        <div class="text-center form-sm mt-2">
                                                            <button class="btn btn-info">Update</button>
                                                            <button class="btn btn-danger">Delete comp</button>
                                                        </div> 
                                                    </form>
                                                </div>                                    
                                <!--Footer-->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                            <!--END Panel 2-->
                                        </div>
                                    </div>
                                </div>
                            <!--END Content-->
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="button" class="btn btn-outline-primary details-btn" style="background:#9ACB00" data-toggle="modal" data-target="#modalLRForm" data-id=""><i class="fas fa-eye fa-lg" data-fa-transform="shrink-1 up-5 left-9 "></i></button>
                        </div>


                                <!--modal end --></td>
                        </tr> 
                        ';  
                    }
                    $sql2 = "SELECT `dancer_name`,`comp_entered`,`competition_level1`, `dance_name2`, `number_competitors2`, `dancer_placement2`, `dancer_score2`, `firstpl_score2`, `2ndpl_score2`, `3rdpl_score2`, `judge_name2`, `judge_comment2` FROM `mark_cards2` WHERE name = '$name'";
                    $res2 = mysqli_query($con,$sql2);
                    //if($res==FALSE){
                    //die('there was an error running query [' . $con->error . ']');
                    //  }

                    while($row2=mysqli_fetch_array($res2)){
                        echo '
                        <tr>
                        <td>'.$row2["dancer_name"].'</td>
                        <td>'.$row2["copm_entered"].'</td>
                        <td>'.$row2["competition_level1"].'</td>
                        <td>'.$row2["dance_name2"].'</td>
                        <td>'.$row2["number_competitors2"].'</td>
                        <td>'.$row2["dancer_placement2"].'</td>
                        <td>'.$row2["dancer_score2"].'</td>
                        <td>'.$row2["firstpl_score2"].'</td>
                        <td></td>
                        </tr> 
                        ';  
                    }

                    $sql3 = "SELECT `dancer_name`,`comp_entered`,`competition_level1`, `dance_name3`, `number_competitors3`, `dancer_placement3`, `dancer_score3`, `firstpl_score3`, `2ndpl_score3`, `3rdpl_score3`, `judge_name3`, `judge_comment3` FROM `mark_cards3` WHERE name = '$name'";
                    $res3 = mysqli_query($con,$sql3); 

                    //if($res==FALSE){
                    //die('there was an error running query [' . $con->error . ']');
                    //  }

                    while($row3=mysqli_fetch_array($res3)){
                        echo '
                        <tr>
                        <td>'.$row3["dancer_name"].'</td>
                        <td>'.$row3["comp_entered"].'</td>
                        <td>'.$row3["competition_level1"].'</td>
                        <td>'.$row3["dance_name3"].'</td>
                        <td>'.$row3["number_competitors3"].'</td>
                        <td>'.$row3["dancer_placement3"].'</td>
                        <td>'.$row3["dancer_score3"].'</td>
                        <td>'.$row3["firstpl_score3"].'</td>
                        <td>  </td>
                        </tr> 
                        ';
                    }
                    ?>

                </tbody>


            </table>
id="modalLRForm" Вы даете всем модальным окнам один и тот же идентификатор. Каждый элемент HTML должен иметь уникальный идентификатор (особенно если вы хотите иметь возможность ссылаться на них по идентификатору с помощью jQuery, что вы и делаете, имея data-target="#modalLRForm"). Лично я бы, вероятно, запросил модальные данные через ajax при нажатии кнопки и повторно использовал тот же модальный, вместо предварительной загрузки всего этого, когда он может вам не понадобиться.
Patrick Q 10.08.2018 17:42

Я использую только один модальный, и этот модальный имеет id = "modalLRForm". Модальное окно находится в цикле while вместе со всеми другими данными таблицы. Итак, я думаю, мне нужно каким-то образом получить модальное окно для получения идентификатора каждой строки. Но я ломаю голову над тем, как это сделать.

T.C 10.08.2018 19:54

Вы создаете модальный в пределах вашего цикла. Это означает, что у вас не один, а один на строку результата. Однако, поскольку вы даете каждому один и тот же идентификатор, а затем используете этот идентификатор для определения цели вашего клика, только первый из них будет открыт. Как я уже сказал, вместо того, чтобы заранее заполнять данные в модальном окне, я бы использовал ajax для их извлечения при нажатии кнопки «Редактировать», а потом заполнял модальное окно, которое вы бы создали только один раз, за пределами цикла.

Patrick Q 10.08.2018 19:59

Можно ли это сделать без использования ajax?

T.C 13.08.2018 04:31
0
4
420
0

Другие вопросы по теме