Доступ к многомерному массиву PHP в JavaScript

Question

Доступ к многомерному массиву PHP в JavaScript

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

Проблема: при щелчке по изображению строки «Просмотр дополнительных сведений» функция JS получает идентификатор нажатой строки. Я не могу присвоить переменной JS «данные», как это было в HTML-части кода. Как я могу решить это? Это хороший способ сделать это?

<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
height: 400,
width: 600,
buttons: [{
text: "Close",
click: function() {
$(this).dialog("close");
}
}]
});

$(".details").click(function(){
$("#dialog").empty();
var i = $(this).attr('id');
var data = <?=$cars[i]['price']?>;
$("#dialog").append("<p>Car:"+data+"</p>");
$("#dialog").dialog("open");
});
});
</script>

<table>
<?php for($i = 0; $i < count($cars); $i++) { ?>
<tr>
<td><?=$cars[$i]['model']?></td>
<td><?=$cars[$i]['colour']?></td>
<td>
<img class="details" id="<?=$i?>" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/>
</td>
</tr>
<?php } ?>
</table>

-2

javascript jquery jquery-ui-dialog php

Решение

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

Есть много способов достичь этого:

1) Если данные динамические, то использует Ajax

2) Если статический, то можно использовать любое из нижеперечисленного:

a) Сохраните информацию о массиве php в массиве js и извлеките его, используя Key, сделав ключ массива в качестве идентификатора строки и извлекая данные из массива при onClick строки.
б) Если вы хотите избежать массивов, то —
- я) Создайте уникальный div с информацией, которая должна отображаться для каждой строки. По умолчанию скрыть его по клику, показать его и показать как диалог.
- ii) Создайте функцию js с аргументом и включите в нее диалог с информацией, передаваемой ей в качестве аргумента. Для каждой строки вызывайте эту функцию для события onClick, передавая информацию в качестве аргумента.

1

Источник

Accepted Answer

Вы пытаетесь использовать данные, которые находятся на сервере на клиенте, без какого-либо кода, чтобы отправить их клиенту. У вас должен быть способ получить данные из php в javascript. Вот одна альтернатива, которая использует атрибуты данных HTML.

В вашем теге изображения сделайте это:

 <img class="details" id="<?=$i?>" data-price="<?=htmlentities($cars[$i]['price'])?>" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/>

Это просто сохраняет некоторые данные в форме, которую клиент может легко прочитать. htmlentities это просто для безопасности в случае, если переменная содержит символы кавычки (намеренно или нет)

Я должен отметить, что на данный момент нет явной необходимости в атрибуте id, если вы не используете его для чего-то другого.

Затем вы можете изменить свою функцию щелчка следующим образом (из верхней части моей головы, не проверено, обратитесь к документации для .data()):

$(".details").click(function(){
$("#dialog").empty();
var data = $(this).data('price');
$("#dialog").append("<p>Car:"+data+"</p>");
$("#dialog").dialog("open");
});

0