JavaScript — Использование диалогового окна jquery ui и переполнение стека

Question

JavaScript — Использование диалогового окна jquery ui и переполнение стека

Я пытаюсь свести к минимуму скачки страниц, поэтому я использовал объект jQuery ui для аккордеона, чтобы вкладывать то, что клиент должен видеть. Под аккордеоном проекта я хочу перечислить диалоговые кнопки с названием проекта. Когда клиент нажимает на диалоговое окно, появляется окно с подробной информацией о проекте. Мне удалось собрать все под правильный аккордеон, но я не могу получить диалоговую кнопку для отображения каждой детали проекта. Я могу получить только первый проект, все проекты или перечислить его как есть.

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

        foreach ($r->getRecords() as $project){
$projectId = $project->getField('ID_Project');
$projectName = $project->getField('Project_Name');
$projectDate = $project->getField('Date_Start');
$projectStaff = $project->getField('Staff');
$projectReport = $project->getField('MasterReport');

echo '<div id="dialog" title="Project Detail">';
echo '<p>';
echo '<b>Affidavit:</b> &nbsp;' . $projectId . '<br>';
echo '<b>Project Name:</b> &nbsp;' . $projectName . '<br>';
echo '<b>Project Date:</b> &nbsp;' . $projectDate . '<br>';
echo '<b>Verifier:</b> &nbsp;' . $projectStaff . '<br>';
echo '<b>Report Link:</b> &nbsp;' . "<a href='includes/php/containerBridge.php?path=".urlencode($projectReport)."'>Click here to download PDF Report</a><br>";
echo '</p>';
echo '</div>';echo '<button id="opener">' . $projectName . '</button><br>';
}

Вот скрипт в той части заголовка, которую я использую:

<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});

$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 250,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>

0

filemaker javascript jquery jquery-ui php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы проверяли использование jqueryui-диалог?

Сначала вы должны сгенерировать JQuery диалоги с помощью $("#id").dialog; тогда вы должны связать click() функции для каждой кнопки.Заметка: Диалог <div> а также <button> всегда работайте в парах, поэтому вы должны избегать id на каждой <div>,

Так что измените ваш php-код, например так:

foreach($r->getRecords() as $project){
//getField...
echo '<div class="dlg" id="dialog-'.$projectId.'" title="Project Detail">';
//...echo other contents
echo '<button class="dlg_btn" data-dlg="'.$projectId.'">' . $projectName . '</button><br>';
}

После этого ваш вывод html должен выглядеть так:

<div class="dlg" id="dialog-1">
<p>....
</div>
<button class="dlg_btn" data-dlg="1">Project 1</button>

Теперь ваш JavaScript должен быть:

<script>
//do bindings
$(".dlg").dialog({
autoOpen: false
});
//button click callback
$(".dlg_btn").click(function(){
var projectid = $(this).attr("data-dlg");
$("#dialog-"+projectid).dialog("open");
});
</script>

Обратите внимание id подключите каждую пару кнопок div. Но если ваш <button> всегда размещается сразу после <div> проекта, есть более простой способ кодирования:

$(".dlg_btn").click(function(){
$(this).prev().dialog("open");
});

Я кодировал их на jsfiddle: демонстрация

0