Передача данных строки MySQL в модал начальной загрузки

Question

Передача данных строки MySQL в модал начальной загрузки

-2

Хорошо, что у меня есть база данных MySQL, и я использую PHP для вывода его в мой браузер в таблице HTML. В каждой строке есть кнопка редактирования, и я смог передать одно значение mysql (lead_id) в модальное, но не могу понять, как получить остальную часть данных и быть в состоянии CRUD внутри модального. Я прочитал много разных статей и форумов об этом, и все они, похоже, используют некоторую форму.ajax в jQuery. Я пробовал все эти функции jQuery, но не увенчался успехом. Может быть, не работают с 3.1.1? ИДК.

Если кто-то может помочь мне с вызовом.ajax и частью jquery, это, по-моему, самая большая борьба. Я также хорошо разбираюсь в php, но я не уверен, что будет выглядеть php файл для вызова.ajax.

Ниже мой код.

<?php
/* mysql connect info */
$mysqlhost = '';
$mysqlusername = '';
$mysqlpassword = '';
$mysqldb = '';
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website | Login</title>
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet">

<?php    
$mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb);

if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="SELECT * FROM leads";
$result=mysqli_query($mysqli,$sql);

// Associative array
$row=mysqli_fetch_assoc($result);
?>


<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
  <h1>
    <a class="navbar-brand" href="#">
    <span class="glyphicon glyphicon-th-list" aria-hidden="true"> 
    </a>
  </h1>
 </div> 
 </div>
 </nav>

 <header id="header">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-12">
 </div>
 </div>
 </div>
 </header>

 <!-- Beginning of Sections -->
 <section id="main">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-12">
 <div class="container">

 <table class="table table-striped">
 <thead>
  <tr>
    <!--<th>Lead Number</th>-->
    <th>First Name</th>
    <th>Last Name</th>
    <th>Moving Date</th>
    <th>eMail</th>
    <th>Phone</th>
    <th>From</th>
    <th>To</th>
    <th>Moving Size</th>
    <!--<th>IP Address</th>-->
    <!--<th>Source</th>-->
    <th>Submission Time</th>
    <th>Actions</th>
   </tr>
  </thead>
  <tbody>


 <?php
 while($row=mysqli_fetch_assoc($result))
 {
 echo "<tr>";
 /*echo "<td>" . $row["lead_id"] ."<td>";*/
 echo "<td>" . $row["customer_first_name"] ."</td>";
 echo "<td>" . $row["customer_last_name"] ."</td>";
 echo "<td>" . $row["moving_date"] ."</td>";
 echo "<td>" . $row["customer_email"] ."</td>";
 echo "<td>" . $row["customer_phone"] ."</td>";
 echo "<td>" . $row["customer_from_zip"] ."</td>";
 echo "<td>" . $row["customer_to_zip"] ."</td>";
 echo "<td>" . $row["customer_moving_size"] ."</td>";
 /*echo "<td>" . $row["customer_ip_address"] ."<td>";*/
 /*echo "<td>" . $row["lead_handle"] ."</td>";*/
 echo "<td>" . $row["sent_date"] ."</td>";
 echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"] ."\" id=\"". $row["lead_id"] ."\">Edit</button></td>";
 echo "</tr>";
 }
 echo "</tbody>";
 echo "</table>";

 ?>

</div>
</div>
</div>
</div>


</section>

</div>






  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- this is google jquery library-->

  <script src="js/jquery-3.1.1.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/my.js"></script> 
  <!-- This is the functionality of the login screen -->

  <!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library-->


<!-- MODAL BEGIND -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<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">Modal title</h4>
  </div>
  <div class="modal-body" id="thebody">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Здесь я чувствую, что моя проблема:

 $('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); 
  var id = button.data('id');
  var modal = $(this)
  $.ajax({
      type: "POST",
      url: "selecta.php",
      data: {id:id},
      success: function(data){
        $('.modal-body').html();
        $('#myModal').modal("show");// this triggers y
  modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

})
})
})

</script>
</body>
</html>

Это результат, который я получаю, когда запускается функция jQuery $.ajax. По какой-то причине ведущее число не переходит к модальному

Теперь, когда я комментирую jQuery, модаль действительно загружается с номером ведущего, как показано на этом рисунке. введите описание изображения здесь

 $('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); 
  var id = button.data('id');
  var modal = $(this);
  /*$.ajax({
      type: "POST",
      url: "selecta.php",
      data: {id:id},
      success: function(data){
        $('.modal-body').html();
        $('#myModal').modal("show");// this triggers y*/
  modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

})

Chris W. 30 март 2017, в 04:06

Источник

0

В чем проблема? Есть ошибки?
Tony 30 март 2017, в 02:04
0

Вы не должны использовать mysqli_fetch_assoc() дважды.
Funk Forty Niner 30 март 2017, в 02:07
0

Вы уже не спросили этот stackoverflow.com/q/43011591/1415724 и не приняли ответ? что отличается от этого?
Funk Forty Niner 30 март 2017, в 02:13
0

Первоначально я думал, что если я смогу получить уникальное значение из строки записи в модальном режиме, то смогу выполнить какой-то запрос в модале для CRUD записи. Это был мой первый вопрос, как использовать атрибуты data- *. С тех пор я изо всех сил пытался получить остальные данные. Теперь, когда я смог получить идентификатор записи в модальном режиме, я не могу понять, как получить остальные данные и взаимодействовать с формой MySQL внутри.
Chris W. 30 март 2017, в 19:30

Показать ещё 2 комментария

Теги:

php

mysql

jquery

twitter-bootstrap

ajax

1 ответ

Ещё вопросы

Вы не должны использовать mysqli_fetch_assoc() дважды.
Вы уже не спросили этот stackoverflow.com/q/43011591/1415724 и не приняли ответ? что отличается от этого?
Первоначально я думал, что если я смогу получить уникальное значение из строки записи в модальном режиме, то смогу выполнить какой-то запрос в модале для CRUD записи. Это был мой первый вопрос, как использовать атрибуты data- *. С тех пор я изо всех сил пытался получить остальные данные. Теперь, когда я смог получить идентификатор записи в модальном режиме, я не могу понять, как получить остальные данные и взаимодействовать с формой MySQL внутри.

Vikash Mishra · Answer 1 · 2017-03-30T03-06-00.000Z

Я не вижу никакой проблемы, кроме того, что вы пропустили ";" в конце

var modal = $(this)
modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

... и некоторые закрывающие скобки. Вы получаете какую-либо ошибку? Вы можете поделиться снимками экрана или результатами.

Нет ошибок Есть ли у вас какие-либо идеи, как я должен структурировать "selecta.php"? Должен ли я использовать JSON? Также есть ";" требуется?
Знаете ли вы, что JS будет автоматически предполагать, что точки с запятой должны быть размещены в определенных местах? Точка с запятой, хотя, как правило, хорошая идея, не требуется JS.