Извлечение данных из базы данных MySQL в аккордеон - PullRequest
Новая
       12

Извлечение данных из базы данных MySQL в аккордеон

0 голосов
/ 02 октября 2018

Извлечение данных из базы данных MySQL в HTML-аккордеон.

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

после извлечения ... все эпизоды загружаются в "Сезон 1" .. не соответственно Сезоны ...

demo

fetch.php

<?php
$connect = mysqli_connect("localhost", "root", "", "baba");
$output = '';

$query = "
SELECT * FROM `episodes` WHERE `title_id` = '9851'
";

$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '

 ';

while($row = mysqli_fetch_array($result))
{
   $output .= '
  <!-- video episode item -->
  <div class="related-video-item">
      <div class="thumb">

          <a href="#"><img src="'.$row["poster"].'" alt=""></a>
      </div>
      <a href="#" class="title">'.$row["title"].'</a>
      <a class="channel-name" href="#">Episode '.$row["episode_number"].'<span>
              <i class="fa fa-check-circle"></i></span></a>
  </div>
  <!-- // video episode item -->
  ';

 }
 echo $output;
}
else
{
 echo 'Not Found';
}
?>

index.html 

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#S1">Season 1</a>
                </h4>
            </div>
            <div id="S1" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div id="result">
                        <div class="row"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S2">Season 2</a>
            </h4>
        </div>
        <div id="S2" class="panel-collapse collapse">
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S3">Season 3</a>
            </h4>
        </div>
        <div id="S3" class="panel-collapse collapse">
            <div class="panel-body">

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

        $(document).ready(function () {

            load_data();

            function load_data(epi) {
                $.ajax({
                    url: "fetch.php",
                    method: "POST",
                    data: { query: epi },
                    success: function (data) {
                        $('#result').html(data);
                    }
                });
            }
        });

    </script>
</body>

</html>

1 Ответ

0 голосов
/ 02 октября 2018

возвращает результат sql напрямую, используйте json_encode () для добавления идентификатора в аккордеонное тело,

- это способ загрузки данных в определенный аккордеон.

Вам необходимо изменить значение.season_id accordianк вашим данным 

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#S1">Season 1</a>
                </h4>
            </div>
            <div id="S1" class="panel-collapse collapse in">
                <div class="panel-body" id="div_season_1">
                </div>
            </div>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S2">Season 2</a>
            </h4>
        </div>
        <div id="S2" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_2">
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S3">Season 3</a>
            </h4>
        </div>
        <div id="S3" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_3">

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

сделать это в ajax, 

$.ajax({
    url: "fetch.php",
    method: "POST",
    data: {query: epi},
    success: function (data) {
        $.each($.parseJSON(data), function (key, value) {
            var output = '';
            output = '<div class="related-video-item"> <div class="thumb">' +
                    '<a href="#"><img src="' + value.poster + '" alt=""></a>' +
                    '</div>' +
                    '<a href="#" class="title">' + value.title + '</a>' +
                    '<a class="channel-name" href="#">Episode ' + value.episode_number + '<span>' +
                    '<i class="fa fa-check-circle"></i></span></a>' +
                    '</div>';
            $('#div_season' + value.season_id).append(output);
        })

    }
});

таким образом, вы можете динамически добавлять к определенному аккордеонному телу

, но я хотел бы сделать аккордеон динамическимтоже, потому что откуда ты знаешь, сколько у тебя сезонов ?,

...