Как динамически передавать данные из PHP в JavaScript (в динамически создаваемых HTML-элементах)

Question

Как динамически передавать данные из PHP в JavaScript (в динамически создаваемых HTML-элементах)

У меня есть массив сущностей, заполненных из базы данных, каждая сущность имеет свой собственный GUID. Я показываю их на веб-странице (HTML) перебирая массив объектов и помещая каждый в новый динамически созданный div обертка.

<?php

$images = elgg_extract('entities', $vars, FALSE);

foreach ($images as $image) {
$img = elgg_view_entity_icon($image, 'small');
$image_guid = $image -> getGUID();

echo <<<HTML
<div class="file-preview-frame">
<div class="image-preview">{$img}</div>
<button type="button" class="btn-default" data-guid={$image_guid}></button>
</div>
HTML;
}

elgg_require_js('js/inline_image_view');

inline_image_view.js

require(['elgg/Ajax'], Ajax => {

var ajax = new Ajax();

$('.btn-default').click(function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('guid') // Extract info from data-* attributes

ajax.view('albums/inline_full_image_view', {
data: {
guid: recipient // querystring
},
}).then(body => {
$( '.full-image-view' ).html(body);
})
});
});

Как можно связать каждое нажатие кнопки с GUID определенного изображения в inline_image_view.js в RequireJS? Каков наилучший или предпочтительный способ сделать это?

Спасибо всем заранее?

0

ajax html javascript php requirejs

Решение

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

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

Источник

Accepted Answer

Кредиты идут на Элгг сообщество, Исмаил Хайрединов особенно.

альбомы / list.php

<?php
$images = elgg_extract('entities', $vars);
echo elgg_view_entity_list($images, [
'item_view' => 'albums/item_view',
'no_results' => 'No images to show',
]);
?>
<div class="file-full-view-frame"></div>

альбомы / item_view.php

<?php
$image = elgg_extract('entity', $vars);
elgg_require_js('albums/item_view');

$img = elgg_view_entity_icon($image, 'small');
?>
<div class="file-preview-frame">
<div class="image-preview"><?= $img ?></div>
<?php
echo elgg_view('input/button', [
'class' => 'btn-default file-preview-show-full',
'data-guid' => $image->guid,
], 'Show full');
?>
</div>

</div>

альбомы / item_view.js

define(function(require) {
var Ajax = require('elgg/Ajax');
var ajax = new Ajax();

$(document).on('click', '.file-preview-show-full', function(e) {
e.preventDefault();
var $elem = $(this);
var guid = $elem.data('guid');

ajax.view('albums/inline_full_image-view', {
//data: $elem.data(),
data: {guid: guid}
})
.done(function (output, statusText, jqXHR) {
if (jqXHR.AjaxData.status == -1) {
elgg.register_error('Unable to load full image view');
return;
}
$('.file-full-view-frame').html(output);
});
});
});

0