php - 情報は追加されず、jquery 折りたたみ可能に表示されません

Question

このトピックに再び取り組んでいますが、まだ解決策が見つかりません

を。私が行ったアクション: PDO を使用してクエリを作成し、PHP を使用して DB から情報を取得します。その後、結果を連想配列に追加し、ajax を使用して送信するためにエンコードします。最後に、$.ajax を使用して情報を取得し、折りたたみ可能な jquery を作成しました。

b. 問題: 折りたたみ可能な構造内に情報が追加されていません。ajax が受信したデータの console.log に情報が表示されなかった

データベース アプリ

表:バグ ID、タイプ、ステータス、重大度、システム、ブラウザ、タイトル、説明、作成日

表:プロジェクト ID、プロジェクト名、ステータス、説明、start_date、due_date

アプリの構造は次のとおりです。

• inc/errorList.php
• inc/connection.php
• index.html (複数ページファイル)

ファイル: errorList.php

<?php
    // Import the connection to the database  
    require_once 'connection.php';

    // Get the instance
    $conn = dbConnect();

    // Build the query 
    $sql = " SELECT bg.bug_id, py.project, bg.type, bg.status, bg.severity, bg.system, bg.browser, bg.title, bg.description,bg.creation_date FROM bugs bg, projects py WHERE bg.projectid = py.id ";

    // Run the query and gets the results
    $result = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);

    // Build an iteration and create an associative array   
    foreach ($result as $row){

    $return[]=array(
                'bug_id'=>$row['bug_id'],
                'project'=>$row['project'],
                'type'=>$row['type'],
                'status'=>$row['status'],
                'severity'=>$row['severity'],
                'system'=>$row['system'],
                'browser'=>$row['browser'],
                'title'=>$row['title'],
                'description' => $row['description'],
                'creation_date'=>$row['creation_date']);
     }

     // Encode the array 
     echo json_encode($return);

?>

ファイル: index.html / ページ: #bugs

HTMLファイル内にdiv "SET"を追加しました

<div data-role="collapsible-set" id="set"><div>
    <script type="text/javascript">

        $(document).on('pagebeforeshow', '#bugs', function (){

                $.ajax({
                    url: 'inc/errorList.php',
                    data: "",
                    dataType: 'json',
                    success: function(data)
                    {
                        // Create the variable content to concatenate the results
                        var content = "";

                        // Build an iteration of the information received in data

                        for (var i = 0; i < data.length; i++) {

                            // Add the header of the collapsible  
                            content = "<div data-role='collapsible' data-collapsed-icon='arrow-r'   data-expanded-icon='arrow-d' data-iconpos='right' data-theme='a'><h3> " + data[i].bug_id + ' - ' + data[i].title + "</h3>" + "<ul data-role='listview' data-inset='true'  data-theme='a'>";

                            // Concatenate the header with the information retreived
                             content = content +
                            '<li>Project: ' + data[i].project + '</li>' +
                            '<li>Type: ' + data[i].type + '</li>' +
                            '<li>Status: ' + data[i].status + '</li>' +
                            '<li>Severity: ' + data[i].severity + '</li>' +
                            '<li>Browser: ' + data[i].browser + '</li>' +
                            '<li>Creation Date ' + data[i].creation_date + '</li>' +
                            '<li>Detail: ' + data[i].description + '</li>' ;

                            content = content + '</ul>';
                            content = content + "</div>";

                            // Append the content into the div     
                            $("#set").append(content);
                        }

                        // Refresh the Collapsible 
                        $("#set").collapsibleset("refresh").enhanceWithin();
                       }
                    });
            });
    </script>