0

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');
}
});
}); 
0

Ok. The solution I found out, was more simple than I thought. On the script use "jQuery" instead of "$". HTML trigger:

<a href="#myModal" onclick=javascript:openModal({{id}})><article>... 
</article></a>

function openModal(id){

jQuery.ajax({
    type: "GET",
    url: 'https://www.example.json' + id,
    dataType: 'json',
    success: function(data) {
        var data = data.T.ads;
        var infoModal = jQuery('#myModal');
        infoModal.find('.uk-modal-title').html(data[0].brand + ' ' + data[0].model);

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

        infoModal.find('.uk-modal-body').html(htmlData);
        UIkit.modal(infoModal).show();
    }
});

return false;

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.