jquery Datatables с диалоговой кнопкой

Question

jquery Datatables с диалоговой кнопкой

Я пытаюсь использовать кнопку, которая откроет диалог, основанный на конкретной строке, в которой находится кнопка. Я прикрепил свой код ниже.

Кнопка является классом dlg-outletpart-btn:

Вот часть JQuery Javascript:

<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},

});

$( ".dlg-outletpart-btn" ).click(function() {
var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>

Вот HTML с PHP:

<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php

session_start();

require_once('./includes/php/include_master.php');

if ($_SESSION['authenticated'] == "true") {

$id_account = $_SESSION['ID_Account'];

$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);

$r = $q->execute();

if(FileMaker::isError($r)){

if($r->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$r->code;
}

}else{}

} else {
echo "You are not logged in.";
}

?>
<?php

foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');

echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
echo '1. &nbsp;'.$outletPart1.'<br>';
echo '2. &nbsp;'.$outletPart2.'<br>';
echo '3. &nbsp;'.$outletPart3.'<br>';
echo '4. &nbsp;'.$outletPart4.'<br>';
echo '5. &nbsp;'.$outletPart5.'<br>';
echo '6. &nbsp;'.$outletPart6.'<br>';
echo '7. &nbsp;'.$outletPart7.'<br>';
echo '8. &nbsp;'.$outletPart8.'<br>';
echo '9. &nbsp;'.$outletPart9.'<br>';
echo '10. &nbsp;'.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');

echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>

</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>

-1

datatables filemaker jquery jquery-datatables php

Решение

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

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

Источник

Accepted Answer

Я не пытался проверить это, и был много очистки, поэтому возьмите это с зерном соли, а не с точным решением.

Прежде чем перейти к объяснению, необходимо сделать пару замечаний:

Будьте в курсе ваших уровней отступов
- Код с плохим отступом сложнее встроить и еще сложнее устранить неисправности. Перед публикацией в StackOverflow или на любом другом сайте вы должны сначала очистить свой код (на самом деле, вы должны делать это так, как вы пишете код). Вероятно, это причина того, что вы получили отрицательный голос, и причина, по которой вы не получили от меня ответа по этому вопросу. Однако, если вы вернетесь и отредактируете свой ответ, чтобы правильно сделать отступ, я бы поднял ваш вопрос.
- ПОМНИТЕ: то, что вы публикуете в Интернете, отражает вас как программиста.
Не используйте переменные с одиночными буквами.
- Дайте вашим переменным правильные и описательные имена. Имена из одной буквы также затрудняют кодирование и устранение неполадок.
Если тебе это не нужно, не пиши
- Это особенно верно, если вы собираетесь публиковать сообщения в StackOverflow с просьбой о помощи. Место, где у вас есть предложение else без какого-либо кода, должно быть исключено из вашего вопроса и действительно должно быть удалено из вашего кода. Если у вас нет задач для выполнения в предложении, не добавляйте их. Добавьте его обратно, когда вы на самом деле необходимость Это. Это касается закрытия и немедленного открытия элемента php. Нет причин закрывать один элемент php, если вы собираетесь немедленно открыть другой. Если это потому, что вы связываете два разных раздела для вопроса, то очистите его, прежде чем отправить его.

Я не хочу ругаться, но, если честно, если вы публикуете плохо отформатированный и написанный код в StackOverflow, никто не ответит на него, и вы будете получать голоса. Вы чуть не потеряли меня в процессе форматирования кода, но я все равно решил закончить.

Итак, вот код, который вы можете попробовать. Сосредоточьтесь на частях, которые я прокомментировал в JavaScript. Основная идея:

Сделайте стол своим главным селектором.
- Вы могли бы сделать tr элемент главного селектора, и он все равно даст вам индекс tr в таблице, но добавление селектора в саму таблицу означает, что если вы программно добавляете новые строки после рендеринга DOM, метод jquery также будет работать для них.
Использовать this Ключевое слово в качестве отправной точки.
- это будет нажатая кнопка, которая позволит вам перемещаться.

Используйте в этом случае методы навигации jquery closest().

<html>
<head>
<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
});
</script>

<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},

});

// I changed the element selector to the id of the table element.
// This allows you to specify the selector for the 'on' method to apply to all
// tr elements within the given table and then reference their index relative
// to the overall table.
// I'm using `button` for the method's selector because you have only have
// on button in your table so it de-couples your selector from your class name.
$( "#table_id_outlets" ).on('click', 'button', function() {
debugger;
// this: refers to the button that was clicked
// closest: walks up the node hierarchy till it finds a `tr`
// index(): gives you the index of the `tr` within the table.
// Use the index number however you need.
console.log($(this).closest('tr').index());

var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>
</head>

<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php

session_start();

require_once('./includes/php/include_master.php');

if ($_SESSION['authenticated'] == "true") {

$id_account = $_SESSION['ID_Account'];

// Note: you can't put a space between your
$query = $protoFM['EMGSV']->newFindCommand('web_outlets');
$query->addFindCriterion('id_account', '==' . $id_account);

$result = $query->execute();

if(FileMaker::isError($result)){
if($result->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$result->code;
}
}

} else {
echo "You are not logged in.";
}

foreach ($result->getRecords() as $parts){
$outletID     = $parts->getField('ID_Outlet');
$outletData1  = $parts->getField('Image_Data');
$outletData2  = $parts->getField('Image_Data2');
$outletData3  = $parts->getField('Image_Data3');
$outletPart1  = $parts->getField('part1');
$outletPart2  = $parts->getField('part2');
$outletPart3  = $parts->getField('part3');
$outletPart4  = $parts->getField('part4');
$outletPart5  = $parts->getField('part5');
$outletPart6  = $parts->getField('part6');
$outletPart7  = $parts->getField('part7');
$outletPart8  = $parts->getField('part8');
$outletPart9  = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');

echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
// Use an unordered list here
echo '1. &nbsp;'.$outletPart1.'<br>';
echo '2. &nbsp;'.$outletPart2.'<br>';
echo '3. &nbsp;'.$outletPart3.'<br>';
echo '4. &nbsp;'.$outletPart4.'<br>';
echo '5. &nbsp;'.$outletPart5.'<br>';
echo '6. &nbsp;'.$outletPart6.'<br>';
echo '7. &nbsp;'.$outletPart7.'<br>';
echo '8. &nbsp;'.$outletPart8.'<br>';
echo '9. &nbsp;'.$outletPart9.'<br>';
echo '10. &nbsp;'.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result->getRecords() as $outlet){
$outletFloor        = $outlet->getField('Outet_Floor');
$outletAreaServed   = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber   = $outlet->getField('Outet_Room_Number');
$outletNumber       = $outlet->getField('Outlet_Number_In_Room');
$outletGas          = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel        = $outlet->getField('Outlet_Model');

echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>

</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
</html>

Я не тестировал часть php, но jquery определенно работает.

0