如何动态地将数据从PHP传递到JavaScript（在动态创建的HTML元素中）

我有一个从数据库填充的实体数组，每个实体都有自己的GUID。我将它们显示在网页（HTML）上，方法是循环遍历实体数组，并将每个数组放入一个新的动态创建的包装器div中。如何动态地将数据从PHP传递到JavaScript（在动态创建的HTML元素中）

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

我怎么能去在inline_image_view.js在RequireJS每个按钮的点击与特定图像的GUID？什么是最好的，或者优先考虑的方式？

谢谢大家提前？

来源

2016-07-08 Program-Me-Rev

昨天我回答了你准备好了。 http://stackoverflow.com/questions/38247952/how-can-i-go-about-passing-data-from-one-php-file-to-another-via-javascript/38249068#38249068 :-) –

In这个问题，元素是在循环中动态创建的。每个应该保持一个唯一的GUID。 –

积分转到Elgg community， Ismayil Khayredinov特别是。

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

来源

2016-07-09 08:04:36

如何动态地将数据从PHP传递到JavaScript（在动态创建的HTML元素中）

回答

相关问题