Я работаю над образцом информационной страницы, на которой люди в аккордеонном порядке. Я хочу, чтобы, когда вы нажали кнопку «Получить информацию», всплыло окно с дополнительной информацией о человеке. У меня отключена блокировка всплывающих окон. Не уверен, почему это не сработает. Мой код выглядит следующим образом:
javascript / jquery
$(document).ready(function () {
$('#holder').hide();
$('#get-employees').fadeIn();
$('#get-employees').click(function () {
$(this).fadeOut();
$('#loader').fadeIn(function () {
$.ajax({
url: "https://www.mccinfo.net/epsample/employees"
}).done(onAjaxComplete);
});
});
function onAjaxComplete(data) {
var employees = $.parseJSON(data);
var s = "";
for (var i = 0; i < employees.length; i++) {
s += "<h3>" + employees[i].first_name + "" + employees[i].last_name + "</h3>";
s += "<div id='" + employees[i].id + "'>
";
s += "<p>First Name: " + employees[i].first_name + "</p>";
s += "<p>Last Name: " + employees[i].last_name + "</p>";
s += "<p> Image:</p>"
s += "<img src='" + employees[i].image_filename + "' alt='Image' />";
s += "<br /></br>";
s += "<button id='" + employees[i].id + " " + "class='get-info'>Get Info</button>";
s += "</div>";
/*
if( i != employees.length - 1){
s += "<hr />";
}
*/
$("#holder").html(s);
$("#loader").fadeOut(function () {
$("#holder").accordion({
heightStyle: "content"
});
$("#holder").fadeIn();
});
$('.get-info').click(function (evt) {
console.log(this.id);
evt.stopImmediatePropagation();
$.ajax({
url: "https://www.mccinfo.net/epsample/employees/" + this.id
}).done(showEmployeeInfo);
});
}
}
function showEmployeeInfo(data) {
var employee = $.parseJSON(data);
console.log(employee);
var name = employee.first_name + " " + employee.last_name;
var salary = accounting.formatMoney(employee.annual_salary);
$('#dialog').attr('title', name);
var s = "";
s += "<p>Image:</p>";
s += "<img src='" + employee.image_filename + " ' alt='Image' />";
s += "<p>Hire Date: " + employee.hire_date + "</p>";
s += "<p>Salary: " + salary + " </p>";
s += "<p>Department: " + employee.department.name + " </p>";
$('#dialog').html(s);
$('#dialog').dialog();
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ILC 5</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/accounting.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<button id="get-employees" class="centered">Click Me to Get Employees</button>
<div id="loader" style="display:none;" class="centered"><image src="img/image.gif"></div>
<div id="holder"></div>
<div id="dialog" title=""></div>
</body>
</html>
Любое понимание того, что должно произойти, будет оценено.