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

Question

Я хочу показать диалог 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> 

Answer 1

Вы пытаетесь использовать данные, которые находятся на сервере на клиенте, без какого-либо кода, чтобы отправить его клиенту. У вас должен быть способ получить данные с 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"); 
    }); 

Answer 2

Есть много способов для достижения этой цели некоторые из них:

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

2) Если статический то любой из перечисленных ниже может быть использован -

• a) Храните массив js массива php массива и извлекайте его с помощью ключа, сделав ключ массива как идентификатор строки и извлеките данные из массива onClick из строки.

• б) Если вы хотите, чтобы избежать массивов затем -

  • я) Создать уникальный DIV с информацией, которые должны отображаться для каждой строки. По умолчанию скрыть его, щелкнув по нему, и показать его как диалог.
  • ii) Создайте функцию js с аргументом и включите диалог в ней с информацией, переданной ему в качестве аргумента. Для каждой строки вызывается эта функция в событии onClick, передавая информацию как аргумент.