Передача значений БД в модальный с помощью jquery

#javascript #php #jquery #html #database

#javascript #php #jquery #HTML #База данных

Вопрос:

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

В настоящее время это то, что я получаю, когда нажимаю кнопку редактирования:

Теперь мне все еще не хватает одной вещи, и это JavaScript, который я уже создал:

 <script>
    $('#exampleModal').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget) // Button that triggered the modal
          var recipient = button.data('whatever') // Extract info from data-* attributes
          var modal = $(this);
          var dataString = 'id='   recipient;

            $.ajax({
                type: "GET",
                url: "editdata.php",
                data: dataString,
                cache: false,
                success: function (data) {
                    console.log(data);
                    modal.find('.dash').html(data);
                },
                error: function(err) {
                    console.log(err);
                }
            });
    })
</script>  

Мой fetch.php — это чисто PHP, и я не уверен, как бы я добавил в него JS. Вот мой fetch.php :

 <?php
$connect = mysqli_connect("localhost", "root", "", "seatrequest");
$output = '';
$colors = array();
$colors["Ongoing"] = "red";
$colors["Closed"] = "#00FF00";
if(isset($_POST["query"]))
{
	$search = mysqli_real_escape_string($connect, $_POST["query"]);
	$query = "
	SELECT * FROM request 
	WHERE req_date LIKE '%".$search."%'
	OR reqname LIKE '%".$search."%'
	OR natureofreq LIKE '%".$search."%'
	OR postitle LIKE '%".$search."%'
	OR critlevel LIKE '%".$search."%'
	OR deadline LIKE '%".$search."%'
	OR account LIKE '%".$search."%'
	OR newaccname LIKE '%".$search."%'
	OR lob LIKE '%".$search."%'
	OR site LIKE '%".$search."%'
	OR status LIKE '%".$search."%'
	";
}
else
{
	$query = "
	SELECT * FROM request ORDER BY reqnumber";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
	$output .= '<div class="table-responsive">
					<table class="table table bordered">
						<tr>
							<th style="background-color: #e6ecff;">Date Requested</th>
							<th style="background-color: #e6ecff;">Requested By</th>
							<th style="background-color: #e6ecff;">Nature of Request</th>
							<th style="background-color: #e6ecff;">Position Title</th>
							<th style="background-color: #e6ecff;">Critical Level</th>
							<th style="background-color: #e6ecff;">Deadline</th>
							<th style="background-color: #e6ecff;">Account</th>
							<th style="background-color: #e6ecff;">Name of Account (For New Seat)</th>
							<th style="background-color: #e6ecff;">LOB</th>
							<th style="background-color: #e6ecff;">Site</th>
				            <th style="background-color: #e6ecff;">Status</th>
				            <th style="background-color: #e6ecff;">Action</th>
				            <th style="background-color: #e6ecff;">Edit</th>
						</tr>';
	while($row = mysqli_fetch_array($result))
{
    $output .= '<tr>
    			<td>'.$row["req_date"].'</td>
    			<td>'.$row["reqname"].'</td>
    			<td>'.$row["natureofreq"].'</td>
    			<td>'.$row["postitle"].'</td>
    			<td>'.$row["critlevel"].'</td>
                <td>'.$row["deadline"].'</td>
                <td>'.$row["account"].'</td>
                <td>'.$row["newaccname"].'</td>
                <td>'.$row["lob"].'</td>
                <td>'.$row["site"].'</td>
                <td style="color:' . $colors[$row["status"]] . ';">' .$row["status"] . '</td>
                <td>
                	<form method="post" action="update-work-status.php">
                		<input type="hidden" name="reqnumber" value="'.$row['reqnumber'].'" />
                		<button class="fa fa-check" style="color: green" type="submit" name="approve" value=""></button><button class="fa fa-close" style="color: red" type="submit" name="decline" value=""></button>
                	</form>
                </td>
                <td><a class="btn btn-small btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="'.$row['reqnumber'].' ">Edit</a></td>
            	</tr>
        ';
}  
echo $output;
}
else
{
	echo 'Data Not Found';
}
?>  

Я предполагаю, что мой вопрос заключается в том, как бы я включил этот JS внутрь fetch.php ? Я не совсем уверен, сработает ли это после добавления JS, но я выясню.

Редактировать модальный

Комментарии:

1. Обратите внимание на переменную запроса, которую вы используете. Вы создаете запрос GET, а в PHP извлекаете переменную запроса POST. Кроме того, убедитесь, что местоположение файла указано правильно. Для вашего JS-скрипта PHP-файл должен находиться в той же папке, что и ваш HTML-файл.

Ответ №1:

Чтобы передать данные вашему компьютеру fetch.php из JS, я бы создал данные array и использовал POST метод, подобный следующему:

 var dataString = {
  id: recipient,
  other: 'string'
}
$.ajax({
  type: "POST",
  url: "fetch.php",
  data: dataString,
  cache: false,
  success: function (data) {
      console.log(data);
      modal.find('.dash').html(data);
  },
  error: function(err) {
      console.log(err);
  }
});
  

и в вашем php :

 $id = $_POST['id'];
$other = $_POST['other'];
//Do something with your data
  

Дайте мне знать, если это поможет.

Комментарии:

1. Хм, спасибо, но я не уверен, куда именно это поместить.

2. Первое находится в вашем js-файле, второе может быть размещено везде в fetch.php , обычно в начале.

3. Я имею в виду, как бы я включил JS-скрипт в свой fetch.php ?

4. Я отредактировал ответ. Вы можете передавать данные из js в php, просто указав параметр url. По сути, это http-запрос. Вам следует прочитать больше developer.mozilla.org/en-US/docs/Web/Guide/AJAX или api.jquery.com/jquery.ajax