У меня есть таблица, в которой я хочу, чтобы пользователь мог редактировать информацию или удалять всю строку. Данные берутся из 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|
Чтобы отредактировать информацию, они нажмут на кнопку с зеленым значком, которая покажет модальное всплывающее окно.
В модальном окне есть 2 вкладки. Одна для отображения некоторых деталей, а другая вкладка - это форма обновления.
вкладка с подробностями выглядит следующим образом:
Имя танцора: название конкурса - уровень конкурса - место
Имя судьи: Имя судьи
Комментарии судьи: комментарии судьи
Проблема, с которой я столкнулся, заключается в том, что информация в модальном окне, извлеченном из базы данных, одинакова для каждой нажатой кнопки. Но он должен получать информацию только из ряда кнопки.
На фотографиях вы заметите, что у меня всего три кнопки. Это потому, что я сначала делал только таблицу 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". Модальное окно находится в цикле while вместе со всеми другими данными таблицы. Итак, я думаю, мне нужно каким-то образом получить модальное окно для получения идентификатора каждой строки. Но я ломаю голову над тем, как это сделать.
Вы создаете модальный в пределах вашего цикла. Это означает, что у вас не один, а один на строку результата. Однако, поскольку вы даете каждому один и тот же идентификатор, а затем используете этот идентификатор для определения цели вашего клика, только первый из них будет открыт. Как я уже сказал, вместо того, чтобы заранее заполнять данные в модальном окне, я бы использовал ajax для их извлечения при нажатии кнопки «Редактировать», а потом заполнял модальное окно, которое вы бы создали только один раз, за пределами цикла.
Можно ли это сделать без использования ajax?
id = "modalLRForm"
Вы даете всем модальным окнам один и тот же идентификатор. Каждый элемент HTML должен иметь уникальный идентификатор (особенно если вы хотите иметь возможность ссылаться на них по идентификатору с помощью jQuery, что вы и делаете, имеяdata-target = "#modalLRForm"
). Лично я бы, вероятно, запросил модальные данные через ajax при нажатии кнопки и повторно использовал тот же модальный, вместо предварительной загрузки всего этого, когда он может вам не понадобиться.