如何動態地將數據從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元素中）

回答

相關問題