How to inject data content from external json into a modal, using UIkit?


Please point me to the right direction.

On a page I have a number of products displayed. The data comes from an external json, which is called via jquery / ajax, and then the data is displayed by a javascript template engine called handlebars (js).

By clicking on a product I want to show a modal with the product’s details. I’m using a theme which uses UIkit so I want to rely on UIkit’s modal’s functionality. On my local environment this is possible, by loading the json file by the product’s id (again with an ajax / jquery call). However, when trying to achieve the same inside wordpress, the modal shows no content (data) from the json and stays empty.

The last attempt I did is from this tutorial: but it didn’t got me nowhere. So I really don’t know if this is the right path to follow. Here’s the code:

First the HTML template which triggers the modal:

   <!-- container where the template gets displayed -->
        <div id="container" class="grid"></div>
  <!-- handlebars template -->    
    <script id="template" type="text/x-handlebars-template">
        <section class="gallery">
            {{#each this}} {{#ads}}
                <article class="item {{category}}">
                    <h3 class="titel">{{brand}}</h3>
                    <img src={{images.0.small}} />
                    <p class="text">{{text}}</p>
              <!-- button toggling the modal -->
                    <button id="md_button" data-id="{{id}}" class="uk-button uk-button-danger" uk-toggle="target: #modal-close-default">Load Modal</button>
            {{/ads}} {{/each}}

<!-- modal -->
<div id="dv_modal" class="modal" uk-modal>
<div id="modal_target" class="uk-modal-dialog uk-modal-body">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <!-- content in functions.php -->

Then this function on functions.php

function fetch_modal_content() {
if ( isset($_REQUEST) ) {
$post_id = $_REQUEST['id'];
        <div class="uk-modal-header">
        <h2 class="uk-modal-title"></h2>
        <?php echo get_the_title($post_id); ?>

<div class="uk-modal-body">
  <?php echo wpautop(get_the_content($post_id)); ?>

add_action( 'wp_ajax_fetch_modal_content', 'fetch_modal_content' );
add_action( 'wp_ajax_nopriv_fetch_modal_content', 'fetch_modal_content' ); 

And last my custom javascript file:

var $button = $('#md_button');
var $modal = $('#dv_modal');
var $modal_target = $('#modal_target');

$ {

var id = $(this).data('id');

url: 'https://www.example.json' + id,
dataType: 'json',
data: {
  'action' : 'fetch_modal_content',
  'id' : id
success:function(data) {
      var data =;

htmlData = '<p>' + data[0].text + '</p>;

, , tiomak 4 years 2020-02-22T08:38:36-05:00 0 Answers 71 views 0

Leave an answer