Передайте массив php в атрибут onclick кнопки и прочтите его в javascript

Я добавляю данные в таблицу с помощью ajax. В атрибуте onclick кнопки я вызываю функцию, которая содержит я бы, название в качестве первых двух параметров, где третий параметр - это вызов функции, который возвращает множество.

Теперь проблема в том, что первые два параметра успешно передаются функции javascript, но третий параметр, который является массивом, не передается функции javascript.

Как я могу передать массив php в качестве параметра функции javascript, к которой можно получить доступ в функции javascript, такой как массив [0], массив1, в зависимости от количества значений в ней. Пожалуйста помоги.

Файл PHP:

function allSizes($product_id)
{
    include("../../include/config.php");

    $allSizes = array();

    $products_extra_search = mysqli_query($link,"SELECT product_size from products_extra WHERE product_id = $product_id");
    while($products_extra_data = mysqli_fetch_array($products_extra_search))
    {
      $products_extra_size_id = $products_extra_data['product_size'];

      //getting size
      $product_size_search = mysqli_query($link,"SELECT size from products_size WHERE id = $products_extra_size_id");
      $products_size_data = mysqli_fetch_array($product_size_search);

      $allSizes[] = $products_size_data["size"];
    }

    return json_encode($allSizes);
}

    $output = '';

    $search = mysqli_query($link,"SELECT * from products ORDER BY id DESC;");

    while($data = mysqli_fetch_array($search))
    {
        $output .= '<tr><td>                        
                    <a class = "btn btn-primary" role = "button" onclick = "ProductExtraModal(`'.$data['id'].'`,`'.$data['name'].'`,`'.allSizes($data['id']).'`)"></a>
                    </td></tr>';
      }

    echo $output;

Функция Javascript, вызываемая при нажатии кнопки:

function ProductExtraModal(id,name,size)
{ 
alert(id);
alert(name);
console.info(size); /*Not Working*/
}

Обновлено:

После HtmHell ответ будет выглядеть как

Передайте массив php в атрибут onclick кнопки и прочтите его в javascript

Ожидаемый результат:

Передайте массив php в атрибут onclick кнопки и прочтите его в javascript

Вывод массива PHP в браузере:

Передайте массив php в атрибут onclick кнопки и прочтите его в javascript

Поскольку у меня шесть продуктов, только у первого два размера. Может кто-нибудь помочь, пожалуйста?

использовать json_encode

HTMHell 15.05.2018 13:47

Я использовал его в функции PHP

Shaifu 15.05.2018 13:48

Используйте escape-кавычки onclick = "ProductExtraModal (\" '. $ Data [' id '].' \ ", \" '. $ Data [' na‌ me ']. \ ",\"'.allSizes‌​($data['id']).\"

Roy Bogado 15.05.2018 13:49

Поэтому вам не следует использовать апострофы, потому что это не строка, это объект. Как это: (\''.$data['id'].'\',\''.$data['name'].'\','.allSizes($data[‌​'id']).')

HTMHell 15.05.2018 13:50

@HtmHell Он работает не для каждой строки. Выдача ошибок в некоторых строках

Shaifu 15.05.2018 14:09

@Shaifu Посмотри на мой ответ

HTMHell 15.05.2018 14:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
1 538
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы передаете объект json, поэтому вы не должны оборачивать его какими-либо апострофами.

Вот как должно быть:

<?php
$output = '<tr><td>                        
        <a class = "btn btn-primary" role = "button" onclick = "ProductExtraModal(`'.$data['id'].'`,`'.$data['name'].'`,'.allSizes($data['id']).')"></a>
    </td></tr>';

Проблема в том, что json будет содержать ", поэтому он сломает оболочку атрибутов HTML.

Окончательное решение будет примерно таким:

<script>
// put this outside the loop
var allSizes = {};
</script>
<?php
    $output = '<tr><td>         
            <script>allSizes[' . $data['id'] . '] = ' . allSizes($data['id']) . ';</script>
            <a class = "btn btn-primary" role = "button" onclick = "ProductExtraModal(`'.$data['id'].'`,`'.$data['name'].'`,allSizes[' . $data['id'] . '])"></a>
        </td></tr>';

Или избегая апострофов.

Редактировать

Согласно вашему комментарию, у вас есть еще одна проблема: вы не получаете ожидаемый массив.

Я предполагаю, что это происходит потому, что в вашей функции allSizes вы не зацикливаетесь на $product_size_search, а вызываете mysqli_fetch_array только один раз.

Вместо этого используйте этот код для циклического перебора всех размеров продукта:

function allSizes($product_id)
{
    include("../../include/config.php");

    $allSizes = array();
    $extraDataIds = array();

    $products_extra_search = mysqli_query($link,"SELECT product_size from products_extra WHERE product_id = $product_id");

    while ($products_extra_data = mysqli_fetch_array($products_extra_search)) {
        $extraDataIds[] = $products_extra_data['product_size'];
    }

    $product_size_search = mysqli_query($link,"SELECT size from products_size WHERE id IN (" . implode(",", $extraDataIds) . ") GROUP BY size");

    while ($products_size_data = mysqli_fetch_array($product_size_search)) {
        $allSizes[] = $products_size_data["size"];
    }

    return json_encode($allSizes);
}

Вы получаете ошибку в консоли / ошибке PHP?

HTMHell 15.05.2018 14:17

Выдает ошибку в <script> var allSizes = allSizes ($ data ['id']); </script>, поэтому я удалил '' из $ data ['id']

Shaifu 15.05.2018 14:20

Я обновил код, поместите его в цикл.

HTMHell 15.05.2018 14:23

Сейчас он работает, но массив содержит только один элемент в консоли

Shaifu 15.05.2018 14:35

А как выглядит HTML-код (в браузере, а не в вашем коде)? Хочу посмотреть часть <script>var allSizes...

HTMHell 15.05.2018 14:41

Я обновил вопрос, и HTML-код содержит только тег тела таблицы, поскольку я добавляю к нему данные с помощью ajax

Shaifu 15.05.2018 14:58

Я не думаю, что есть проблема с функцией allSizes, потому что страница PHP дает мне желаемый результат

Shaifu 15.05.2018 15:17

@Shaifu Обновил мой ответ, вам нужно добавить GROUP BY size в SQL-запрос

HTMHell 15.05.2018 16:01

см. Вывод массива PHP в браузере в моем вопросе. Думаю, у функции allSizes нет проблем

Shaifu 15.05.2018 16:06

одна вещь, которую я хочу упомянуть, это то, что <script> var allSizes = '.allSizes ($ data [' id ']).'; </script> выполняется дважды, я думаю, поэтому он возвращает только последний элемент массива

Shaifu 15.05.2018 16:37

Большое спасибо, дружище. Я собирался сдаться.

Shaifu 15.05.2018 17:15

Другие вопросы по теме