Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jquery widget loses "change" event after applied Knockout view model #10261

Closed
codedge opened this issue Jul 17, 2017 · 3 comments
Closed

Jquery widget loses "change" event after applied Knockout view model #10261

codedge opened this issue Jul 17, 2017 · 3 comments
Assignees
@magento-engcom-team
Labels
bug report Component: Cms Issue: Cannot Reproduce Cannot reproduce the issue on the latest `2.4-develop` branch Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Progress: needs update

Comments

@codedge
Copy link

codedge commented Jul 17, 2017 •
edited

When moving a Magento widget, i. e. mage.configurable in to Knockout component, all the before applied change events get lost.

In my case I am moving the complete product-options-wrapper which holds the configurable product options into a div container with my own applied VM as I need to attach some infos around the product-options-wrapper - not inside the wrapper itself.

Preconditions

  1. Magento CE 2.1.7

Steps to reproduce

  1. Update product detail page with
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.form.options">
            <move element="product.info.options.wrapper" destination="configurator" />
            <block class="Magento\Framework\View\Element\Template" name="configurator" after="-" template="catalog/product/view/configurator.phtml" />
        </referenceBlock>
    </body>
</page>
  1. Create a normal phtml template file with
<div class="tab-content" data-step="1" data-bind="scope:'times'">
    <?php echo $block->getChildHtml('product_options_wrapper'); ?>
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "times": {
                    "component": "Vendor_Module/js/times"
                }
            }
        }
    }
}
</script>

It moves the configurable products options into a DIV container with applied Knockout VM.

With applied change events to the selects:

onchange_jquery_mage_1

Without change events to the selects:

onchange_jquery_mage_2

Expected result

  1. The Magento widget should still be fully functional with all onChange events

Actual result

  1. All onChange events gets dropped after the Knockout VM is applied
@magento-engcom-team magento-engcom-team added 2.1.x bug report Component: Cms Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed and removed G1 Passed labels Sep 5, 2017
@magento-engcom-team magento-engcom-team added the Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed label Sep 20, 2017
@magento-engcom-team
Copy link
Contributor

@codedge thank you for your report.
We were not able to reproduce this issue by following the steps you provided.
Please provide more details regarding your environment, or try to reproduce this
issue on a clean installation.

@magento-engcom-team magento-engcom-team added Issue: Cannot Reproduce Cannot reproduce the issue on the latest `2.4-develop` branch Progress: needs update labels Sep 20, 2017
@orlangur
Copy link
Contributor

@codedge looks like delegation can help in your case, see https://stackoverflow.com/a/10817807/8640867.

Generally it is not a good idea to mix jQuery + KnockutJS event handlers.

@magento-engcom-team magento-engcom-team self-assigned this Sep 21, 2017
@magento-engcom-team
Copy link
Contributor

@codedge, we are closing this issue due to inactivity. If you'd like to update it, please reopen the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@magento-engcom-team magento-engcom-team

Labels
bug report Component: Cms Issue: Cannot Reproduce Cannot reproduce the issue on the latest `2.4-develop` branch Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Progress: needs update
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@orlangur @veloraven @codedge @magento-engcom-team