Информация не добавляется и не отображается в jquery.
Я снова работаю над этой темой и пока не нашел решения
а. Действие, которое я сделал: я строю запрос, используя PDO, чтобы получить информацию из БД, используя PHP, после чего я добавляю результаты в ассоциативный массив и кодирую его для отправки их с использованием ajax. Наконец, я использовал $.ajax, чтобы получить информацию и собрать разборный jquery.
б. Проблема: информация не добавляется в структуру разборного устройства. Console.log данных, полученных ajax, не отображал никакой информации
Приложение базы данных
Таблица: идентификатор ошибки, тип, статус, серьезность, система, браузер, заголовок, описание, дата создания
Таблица: идентификатор проекта, имя проекта, статус, описание, дата начала, дата исполнения
Структура приложения:
- вкл /errorList.php
- вкл / 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 / Page: #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>
1 ответ
Решение
Да, наконец я нашел ошибку! Проблема заключалась в акцентах в некоторых словах в поле "Описание", ниже я добавляю окончательный код:
Файл: 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']);
}
header("Content-type: application/json", true);
echo json_encode($return);
exit;
?>
Файл: json.js
address = 'inc/errorList.php';
$.ajax({url: address,
cache: false,
data: "",
dataType: 'json',
success: function(new_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();
},
error: function (request,error) {
//var err = eval("(" + xhr.responseText + ")");
//alert(err.Message);
// This callback function will trigger on unsuccessful action
alert('Connection Error!');
alert('Error: ' + error);
//console.log(new_data);
}
});
});