Блог

Я сделал цикл while для отображения данных в табличном формате, я подготовил lt;agt; , когда щелкнул, он открывает модальный. Я хочу, чтобы у каждого модала было больше информации об этих конкретных данных при нажатии.

Вот как я все подготовил:

 lt;?php   $mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')  or die('Dramatic Error: ' . mysqli_error($mysqli));   $selectquery = "SELECT * FROM cases_reports";  $query = mysqli_query($mysqli, $selectquery);  $nums = mysqli_num_rows($query);   while($res = mysqli_fetch_array($query)) {  ?gt;  lt;trgt;  lt;td class="name mb-0 text-sm"gt; lt;?php echo $res['cccEmployee']?gt; lt;/tdgt;  lt;tdgt; lt;?php echo $res['irNumber']?gt; lt;/tdgt;  lt;tdgt; lt;a href="#" data-toggle="modal" data-target="#modal-default"gt;lt;?php echo $res['caseType']?gt;lt;/agt; lt;/tdgt;  lt;tdgt; lt;?php echo $res['startDateTime']?gt; lt;/tdgt;  lt;tdgt; lt;?php echo $res['endDateTime']?gt; lt;/tdgt;  lt;tdgt;  lt;div class="dropdown"gt;  lt;a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"gt;  lt;i class="fas fa-ellipsis-v"gt;lt;/igt;  lt;/agt;  lt;div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"gt;  lt;a class="dropdown-item" href="#"gt;Print PDFlt;/agt;  lt;a class="dropdown-item" href="#"gt;Export Excellt;/agt;  lt;a class="dropdown-item" href="#"gt;Export Accesslt;/agt;  lt;/divgt;  lt;/divgt;  lt;/tdgt;  lt;/trgt;   lt;div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true"gt;  lt;div class="modal-dialog modal- modal-dialog-centered modal-" role="document"gt;  lt;div class="modal-content"gt;    lt;div class="modal-header"gt;  lt;h6 class="modal-title" id="modal-title-default"gt; lt;?php echo $res['caseType']?gt; lt;/h6gt;  lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;  lt;span aria-hidden="true"gt;×lt;/spangt;  lt;/buttongt;  lt;/divgt;   lt;div class="modal-body"gt;  lt;?php   echo $res['caseType'];  ?gt;  lt;/divgt;   lt;/divgt;  lt;?php }?gt; lt;!-- End php While --gt;  

Конечно, модал показывает первые доступные данные, которые в данном случае «случайны». Как я могу показать информацию о каждых данных при нажатии на модальный URL-адрес?

просто вызовите свой модальный программный код из js и загрузите/замените соответствующие данные, прежде чем показывать модальный.

 lt;a href="#" id="modalLuncher"gt;lt;?php echo $res['caseType']?gt;lt;/agt;  

и в вашем файле js :

 $(document).ready(function(){  $("#modalLuncher").click(function(){    $("#modal-title-default").html('read from #modalLuncher data-* tag');  // $("#other-replacements") ;   $("#modal-default").modal();  }); });  

Я хотел показать модальный, чтобы я мог редактировать таблицу Ajax.

Вот что я сделал:

Скрипт:

 $(document).ready(function() {  // Append values in input fields  $(document).on('click', 'a[data-role=update]', function(){  var id = $(this).data('id');  var cccEmployee = $("#" id).children('td[data-target=cccEmployee]').text();  var irNumber = $("#" id).children('td[data-target=irNumber]').text();  var caseType = $("#" id).children('td[data-target=caseType]').text();  var startDateTime = $("#" id).children('td[data-target=startDateTime]').text();  var endDateTime = $("#" id).children('td[data-target=endDateTime]').text();   //Append the variables  $('#cccEmployee').val(cccEmployee);  $('#IR_number').val(irNumber);  $('#case_type').val(caseType);  $('#startDate').val(startDateTime);  $('#endDate').val(endDateTime);  $('#caseId').val(id);   $('#reportsModal').modal('toggle');  });   //Create event to get data from fields and update.  $('#save_report_changes').click(function() {  var id = $('#caseId').val();  var cccEmployee = $('#cccEmployee').val();  var irNumber= $('#IR_number').val();  var caseType = $('#case_type').val();  var startDateTime = $('#startDate').val();  var endDateTime = $('#endDate').val();   $.ajax({  url: '/edit-report',  method: 'post',  data: {  id: id,  cccEmployee: cccEmployee,  irNumber: irNumber,  caseType: caseType,  startDateTime: startDateTime,  endDateTime: endDateTime  },  success: function(response) {    $("#" id).children('td[data-target=cccEmployee]').text(cccEmployee);  $("#" id).children('td[data-target=irNumber]').text(irNumber);  $("#" id).children('td[data-target=caseType]').text(caseType);  $("#" id).children('td[data-target=startDateTime]').text(startDateTime);  $("#" id).children('td[data-target=endDateTime]').text(endDateTime);    $('#reportsModal').modal('toggle');  },  });  });  });  

Затем создал цикл while в php для отображения данных привязка кнопки редактирования к ajax:

 lt;!-- Start PHP While --gt; lt;?php  $mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db') or die('Dramatic Error: ' . mysqli_error($mysqli));  if( isset($_POST['id']) ) {  $id = $_POST['id'];  $ccc_employee = $_POST['cccEmployee'];  $IR_number = $_POST['irNumber'];  $case_type = $_POST['caseType'];  $caseLocation = $_POST['caseLocation'];  $startDate = $_POST['startDateTime'];  $endDate = $_POST['endDateTime'];  $case_description = $_POST['caseDesc'];  $action_taken = $_POST['actionsTaken'];  $details = $_POST['caseDetails'];  $notes = $_POST['caseNotes'];  $recommendation = $_POST['caseRecommendation'];   // Query to update data  $result = mysqli_query($mysqli, "UPDATE cases_reports SET  cccEmployee='$ccc_employee',  irNumber='$IR_number',  caseType='$case_type',  caseLocation='$caseLocation',  startDateTime='$startDate',  endDateTime='$endDate',  caseDesc='$case_description',  actionsTaken='$action_taken',  caseDetails='$details',  caseNotes='$notes',  caseRecommendation='$recommendation'  WHERE id='$id'");   if( $result ) {  return "Data updated successfully";  } }  $selectquery = "SELECT * FROM cases_reports";  $table = mysqli_query($mysqli, $selectquery); $nums = mysqli_num_rows($table);  while($res = mysqli_fetch_array($table)) { ?gt;  lt;tr id="lt;?php echo $res['id']?gt;"gt; lt;td data-target="cccEmployee"gt; lt;?php echo $res['cccEmployee']?gt; lt;/tdgt; lt;td data-target="irNumber"gt; lt;?php echo $res['irNumber']?gt; lt;/tdgt; lt;td data-target="caseType"gt; lt;?php echo $res['caseType']?gt; lt;/tdgt; lt;td data-target="startDateTime"gt; lt;?php echo $res['startDateTime']?gt; lt;/tdgt; lt;td data-target="endtDateTime"gt; lt;?php echo $res['endDateTime']?gt; lt;/tdgt; lt;td class="table-actions"gt;  lt;a href="#" data-role="update" data-id="lt;?php echo $res['id']; ?gt;"gt;  lt;i class="fas fa-edit"gt;lt;/igt;  lt;/agt;  lt;!-- lt;a href="#!" class="table-action table-action-delete" data-toggle="tooltip" data-original-title="Delete product"gt;  lt;i class="fas fa-trash"gt;lt;/igt;  lt;/agt; --gt; lt;/tdgt; lt;tdgt;  lt;div class="dropdown"gt;  lt;a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"gt;  lt;i class="fas fa-ellipsis-v"gt;lt;/igt;  lt;/agt;  lt;div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"gt;  lt;a class="dropdown-item" href="#"gt;Print PDFlt;/agt;  lt;a class="dropdown-item" href="#"gt;Export Excellt;/agt;  lt;a class="dropdown-item" href="#"gt;Export Accesslt;/agt;  lt;/divgt;  lt;/divgt; lt;/tdgt; lt;/trgt;  lt;div class="modal fade" id="reportsModal" tabindex="-1" role="dialog" aria-hidden="true"gt; lt;div class="modal-dialog modal- modal-dialog-centered modal-" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h6 class="modal-title" id="modal-title-default"gt; Case Details lt;/h6gt;  lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;  lt;span aria-hidden="true"gt;×lt;/spangt;  lt;/buttongt;  lt;/divgt;   lt;div class="modal-body" id="case-data"gt;  lt;div class="form-row"gt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="cccEmployee"gt;CCC Employeelt;/labelgt;  lt;input type="text" class="form-control" id="cccEmployee" name="cccEmployee"gt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="IR_number"gt;IR Numberlt;/labelgt;  lt;div class="input-group"gt;  lt;div class="input-group-prepend"gt;  lt;span class="input-group-text" id="IR_number"gt;IR#lt;/spangt;  lt;/divgt;  lt;input type="number" class="form-control" name="IR_number" id="IR_number"gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="case_type"gt;Case Typelt;/labelgt;  lt;select class="form-control" name="case_type" id="case_type" data-toggle="select"gt;  lt;option value="" disabled selectedgt;Select Case Typelt;/optiongt;  lt;option value="Accident"gt;Accidentlt;/optiongt;  lt;option value="Theft"gt;Theftlt;/optiongt;  lt;option value="Death"gt;Deathlt;/optiongt;  lt;option value="Harrasment"gt;Harrasmentlt;/optiongt;  lt;option value="badBehaviour"gt;Bad Behaviourlt;/optiongt;  lt;option value="Drugs"gt;Drugslt;/optiongt;  lt;option value="Drunk"gt;Drunklt;/optiongt;  lt;option value="Fight"gt;Fightlt;/optiongt;  lt;option value="Medical"gt;Medicallt;/optiongt;  lt;option value="illegalEntry"gt;Illegal Entrylt;/optiongt;  lt;option value="illegalWorker"gt;Illegal Workerlt;/optiongt;  lt;option value="Fire"gt;Firelt;/optiongt;  lt;option value="Electric"gt;Electriclt;/optiongt;  lt;option value="illegalHunting"gt;Illegal Huntinglt;/optiongt;  lt;option value="oilLeak"gt;Oil Leaklt;/optiongt;  lt;option value="petrolLeak"gt;Petrol Leaklt;/optiongt;  lt;option value="Kidnapping"gt;Kidnappinglt;/optiongt;  lt;option value="Blackmail"gt;Blackmaillt;/optiongt;  lt;option value="Misunderstanding"gt;Misunderstandinglt;/optiongt;  lt;option value="propertyDamage"gt;Property Damagelt;/optiongt;  lt;option value="smoke_NoFire"gt;Smoke, No Firelt;/optiongt;  lt;option value="stuck_InElevator"gt;Stuck in Elevatorlt;/optiongt;  lt;option value="Scooter"gt;Scooterlt;/optiongt;  lt;option value="Drifting"gt;Driftinglt;/optiongt;  lt;option value="LostPerson"gt;Lost Personlt;/optiongt;  lt;option value="Fraud_Forgery"gt;Fraud/Forgerylt;/optiongt;  lt;option value="Other"gt;Otherlt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="caseLocation"gt;Locationlt;/labelgt;  lt;select class="form-control" name="caseLocation" id="caseLocation" data-toggle="select"gt;  lt;option value="" disabled selectedgt;Select Locationlt;/optiongt;  lt;option value="Baylasun"gt;Baylasunlt;/optiongt;  lt;option value="Baylasun Hotel"gt;Baylasun Hotellt;/optiongt;  lt;option value="AL-Waha"gt;AL-Wahalt;/optiongt;  lt;option value="Al-Morooj"gt;Al-Moroojlt;/optiongt;  lt;option value="Royal Green"gt;Royal Greenlt;/optiongt;  lt;option value="Beach Towers"gt;Beach Towerslt;/optiongt;  lt;option value="Emmar Building"gt;Emmar Buildinglt;/optiongt;  lt;option value="Industrial Area (East)"gt;Industrial Area (East)lt;/optiongt;  lt;option value="Industrial Area (West)"gt;Industrial Area (West)lt;/optiongt;  lt;option value="Hejaz Gate"gt;Hejaz Gatelt;/optiongt;  lt;option value="Gate 3"gt;Gate 3lt;/optiongt;  lt;option value="Marina 1"gt;Marina 1lt;/optiongt;  lt;option value="Marina 2"gt;Marina 2lt;/optiongt;  lt;option value="Marina 3"gt;Marina 3lt;/optiongt;  lt;option value="Tala Garden"gt;Tala Gardenlt;/optiongt;  lt;option value="AL-Shorooq"gt;AL-Shorooqlt;/optiongt;  lt;option value="Yam Beach"gt;Yam Beachlt;/optiongt;  lt;option value="Sales Center"gt;Sales Centerlt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="startDate"gt;Start Date amp; Timelt;/labelgt;  lt;input class="form-control" type="datetime-local" name="startDate" id="startDate"gt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-6 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="endDate"gt;End Date amp; Timelt;/labelgt;  lt;input class="form-control" type="datetime-local" name="endDate" id="endDate"gt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-12 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="case_description"gt;Case Descriptionlt;/labelgt;  lt;textarea class="form-control" name="case_description" id="case_description" rows="3"gt;lt;/textareagt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-12 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="action_taken"gt;Actions Takenlt;/labelgt;  lt;textarea class="form-control" name="action_taken" id="action_taken"gt;lt;/textareagt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-12 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="details"gt;Detailslt;/labelgt;  lt;textarea class="form-control" name="details" id="details"gt;lt;/textareagt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-12 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="notes"gt;Noteslt;/labelgt;  lt;textarea name="notes" id="notes" class="form-control"gt;lt;/textareagt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-12 mb-3"gt;  lt;div class="form-group"gt;  lt;label class="form-control-label" for="recommendation"gt;Recommendationslt;/labelgt;  lt;textarea name="recommendation" id="recommendation" class="form-control"gt;lt;/textareagt;  lt;/divgt;  lt;/divgt;  lt;input type="hidden" id="caseId" class="form-control"/gt;   lt;/divgt;  lt;/divgt; lt;div class="modal-footer"gt;  lt;button type="button" id="save_report_changes" class="btn btn-primary"gt;Save changeslt;/buttongt;  lt;/divgt; lt;?php } //End php While