Magento Question posted in
The official documentation can be found here.

Magento 2 – Create html element with data-mage-init attribute – with Js/Jquery

I am using ajax to add / delete elements on page. When element is added / deleted then alert widget is displayed. I am using data-mage-init attribute to trigger js when element is clicked. When adding new element with jquery how I can generate it with data-mage-init attribute?

1 ) When element is created in template then data-mage-init attribute is not visible on page and it works. (Js is triggered when ‘a’ element is clicked).

Template:

                <div class="item">
                <div class="item-content">
                    <div class="name"><?= $product['name']; ?></div>
                    <div class="sku"><?= $product['sku']; ?></div>
                    <div class="remove-action">
                        <a
                            data-mage-init='{"learningPath": <?= json_encode(['removeUrl' => $block->getUrl('corporate/learning/removeCourse'), 'productId' => $product['id']]) ?>}'
                            href="#" class="action secondary"><?= __('Remove'); ?></a>
                    </div>
                </div>

Browser:

enter image description here

..but when I generate that element with js then data-mage-init attribute is visible and its not working. Here is my code:

Js file:

$('.path-builder-selection .selection-container').append("<div class='item'><div class='item-content'>" +
                        "<div class='name'>n" + data['product']['name'] + "</div>" +
                        "<div class='sku'>"+ data['product']['sku'] + "</div>" +
                        "<div class='remove-action'><a data-mage-init='{"learningPath":{"removeUrl": " + data['remove_url'] + ", "productId": " + data['product']['id'] + "}}' href='#' class='action secondary'>" + data['remove_label'] + "</a></div>n" +
                        "</div></div>");

Browser:

enter image description here

Conclusion: data-mage-init attribute is not parsed when I create new element with it through js. Is there any way how I can add element through js/jquery and add data-mage-init attribute to it. (To be possible to delete that element later if needed again with js, otherwise I cannot delete element because data-mage-init is not parsed and js is not triggered)

Tags:

2

Answers


  1. 0

    Execute data-mage-init and x-magento-init in dynamic content

    To trigger .trigger('contentUpdated') on the element when dynamic content is injected, use:

    $.ajax({
    url: 'https://www.example.com',
    method: 'POST',
    data: {
        id: '1'
    },
    success: function (data) {
        $('.example-element').html(data)
                             .trigger('contentUpdated')
    }
});
    Login or Signup to reply.
  2. 0

    This is an old question but maybe it helps to someone else:

    Add as an attribute the data-mage-init, let say you want to add a menu:

        $(elem).attr(
      "data-mage-init",
      JSON.stringify({
        menu: {
            responsive: true,
            expanded: true,
            position: {
                my: "left top",
                at: "left bottom",
            },
        },
    })
);
jQuery.mage.init();

    This way you can initialize your element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search