How to dynamically pass data from PHP to JavaScript (In dynamically created HTML elements)

I have an array of entities populated from a database, each entity having its own GUID. I display them on a webpage (HTML) by looping through the entities array and placing each in a new dynamically created `div` wrapper.

<?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();

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

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

How can I go about relating each button click to a specific image's GUID in inline_image_view.js in RequireJS? What is the best, or preffered way to go about this?

Thank you all in advance?

  • albums/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>
    

    albums/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>
    

    albums/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);
        });
      });
    });

     

  • Thank you @Ismayil Khayredino. That is exacly what I needed. Thank you so much. I posted your answer HERE on StackOverflow.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking