javascript - How to pass variables into dynamic UIkit Modal? -

how pass variables uikit modal?

the button:

<button type="button" class="uk-button" data-uk-modal="{target:'#info',center:true}" data-added="added-test" data-modified="modified-test"><i class="uk-icon-info"></i></button> 

the modal:

<div class="uk-modal" id="info">     <div class="uk-modal-dialog">         <h4 style="margin-bottom:5px;">added:</h4>         <div id="added"></div><br>         <h4 style="margin-bottom:5px;">modified:</h4>             <div id="modified"></div>         <div class="uk-modal-footer">           <button type="button" class="uk-button uk-modal-close">close</button>                 </div>     </div> </div> 

the script:

$(document).ready(function () {     $('#info').on('uk.modal.show', function (event) {         var button = $(event.relatedtarget);         var added = button.data('added');         var modified = $(e.target).data('modified');         var modal = $(this);         modal.find('.uk-modal-dialog #added').text(added);         modal.find('.uk-modal-dialog #modified').text(modified);     }); }); 

this not working. not error in console. i´ve tried few other ways of them didn´t worked should.

update #1

the following jquery works partially. i´ve added id "infotrigger" button.

jquery('#info').appendto("body"); jquery(document).on('click', '#infotrigger', infomodal_handler); function infomodal_handler(e) {     var added = jquery(e.target).data('added');     var modified = jquery(e.target).data('modified');     jquery('#info').on({         'show.uk.modal':function(){             jquery('#added', jquery(this)).text(added);             jquery('#modified', jquery(this)).text(modified);         }     }).trigger('show.uk.modal'); } 

the problem it´s working partially. think reason button in foreach loop. have old data when opening modal. if open again have correct data.

any ideas how fix that?

the problem icon presssed instead of button itself. data couldn´t fetched. fix variables need changed from:

var added = jquery(e.target).data('added'); 

to:

var added = jquery(this).data('added'); 

now correct dom element target.

to use modal inside loop changed bit. i´ve put modal script function pass element-id through , apply different elements:

function info_modal( $id ) {     return "     <script>     jquery('#info" . $id . "').appendto('body');     jquery(document).on('click', '#infotrigger" . $id . "', infomodal_handler" . $id . ");     function infomodal_handler" . $id . "(e)     {         console.log(e);         var added" . $id . " = jquery(this).data('added" . $id . "');         var modified" . $id . " = jquery(this).data('modified" . $id . "');         jquery('#info" . $id . "').on({             'show.uk.modal':function(){                 jquery('#added" . $id . "', jquery(this)).text(added" . $id . ");                 jquery('#modified" . $id . "', jquery(this)).text(modified" . $id . ");             }         }).trigger('show.uk.modal');     }     </script>      <!-- info modal -->     <div class='uk-modal' id='info" . $id . "'>         <div class='uk-modal-dialog'>             <h4 style='margin-bottom:5px;'>" . __( 'added on', 'easy-code-placement' ) . ":</h4>             <div id='added" . $id . "'></div><br>             <h4 style='margin-bottom:5px;'>" . __( 'last modified on', 'easy-code-placement' ) . ":</h4>                 <div id='modified" . $id . "'></div>             <div class='uk-modal-footer uk-text-right'>               <button type='button' class='uk-button uk-modal-close'>" . __( 'close', 'easy-code-placement' ) . "</button>                     </div>         </div>     </div>     ";    } 

inside loop i´ve placed button , apply element-id , after call function (the function better code readability - script , modal can, of course, placed directly inside loop):

<button type="button" id="infotrigger<?php echo $code->id; ?>" class="uk-button" data-uk-modal="{target:'#info<?php echo $code->id; ?>',center:true}" data-added<?php echo $code->id; ?>="added" data-modified<?php echo $code->id; ?>="modified"><i class="uk-icon-info"></i></button> <?php echo info_modal( $code->id ); ?>