uikit Pass Information to Modal

Question

I am showing a modal using uikit (documentation) by setting up my button:

<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
  <span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Rename Category</h2>
        <form id="form-category-update">
            <input type="hidden" name="ExistingCategoryName" />
            <input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
        </form>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
        </p>
    </div>
</div>

And what I need to do is pass the value in data-category-name to my hidden input in the form in the modal.

I found a Stack Overflow article (here) where the questioner claims to have answered their own answer by referencing the button in the button's click event. But I'm not satisfied with the answer.

Is there no way for the modal to reference which DOM opened it? Ideally, I would like to listen to the beforeshow event, grab the element that invoked the DOM, and then grab my data attribute.

Answer 1

I ran into this earlier so .. you're right about targeting beforeshow event, but you really can't get the calling button from called modal. Instead, you can attach event listener to toggle element. This way, you can access calling button (toggle) and the modal (target).

// const element = document.querySelector('button[uk-toggle]'); // not needed in this example
document.addEventListener('beforeshow', function(el) {
    // get the hidden input
    const hiddenInput  = el.target.querySelector('input[name="ExistingCategoryName"]');
    // get original category name from the button
    const categoryName = el.explicitOriginalTarget.getAttribute('data-category-name');
    // set new value
    hiddenInput.value = categoryName;
    // log new value, just to see the result somewhere
    console.log(hiddenInput.value);
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
  <span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Rename Category</h2>
        <form id="form-category-update">
            <input type="hidden" name="ExistingCategoryName" />
            <input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
        </form>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
        </p>
    </div>
</div>