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: https://gist.github.com/wondergryphon/ab7647c13c36cefb1a0032f1dea9233a 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>
                </article>
            {{/ads}} {{/each}}
        </section>
    </script>
</div>   

<!-- 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 -->
</div>

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>

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

<?php
}
die();
}
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');

$button.click(function() {

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

$.ajax({
url: 'https://www.example.json' + id,
dataType: 'json',
data: {
  'action' : 'fetch_modal_content',
  'id' : id
  },
success:function(data) {
      var data = data.T.ads;
      //console.log(JSON.stringify(data));
      $modal.find('.uk-modal-title').html(data[0].brand);

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

  $modal_target.html(data);
  $modal.modal('show');
}
});
});