1

I'm using Ultimo theme and created a child theme. I created a custom module that uses jQuery UI draggable. When the page loads it's all fine but when I click on an element that should be able to be dragged, the console gives an error:

Uncaught TypeError: Cannot read property 'defaultView' of undefined ..... jquery.js:6702

Seems like it is conflicting with jQuery but I have no clue how to fix it, even after reading numerous posts about problems similar to this.

How can I fix this error?

requirejs-config.js @ app/code/Vendor/Module/view/frontend

var config = {
    map: {
        jqueryui: 'Vendor_Module/js/jquery-ui.min'
    }
};

drag.js file @ app/code/Vendor/Module/view/frontend/web/js

require(['jquery', 'jquery/ui'], function($){
    $(document).ready(function() {

        // Makes the pieces draggable & sets options
        $("#piecesArea > div > img").draggable({
            //Makes it so that the pieces' z-index can be reordered
            stack: { group: '#piecesArea > div > img', min: 500,scroll: false },
            distance: 0
        });

        // Sets what happens when you release a piece
        $("#roomArea").droppable({
            drop: function(event, ui){
                // This is so that the element "sticks" even when tab is changed.
                ui.draggable.addClass("draggedout");
            },
            // Changes current tab to the tab the piece belongs to when dragged out of body area
            out: function(event, ui){
                ui.draggable.removeClass("draggedout");
                var whichTab = ui.draggable.parent().attr("id");
                $("#piecesArea").tabs('select' , whichTab);
            }
        });

        // Tabs
        $("#piecesArea").tabs();

        // Changes the body when thumbnails are clicked
        $("#swatchesArea a").click( function() {
            var changeSrc = $(this).attr("href");
            $("#roomArea>img").attr("src", changeSrc);
            return false;
        });
    });
});

default.xml @ app/code/Vendor/Module/view/frontend/layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <link src="Vendor_Module::js/drag.js"/>
    <css src="Vendor_Module::css/mainstylesheet.css"/>
  </head>
  <body/>
</page>
Improve this question

1 Answer 1

Reset to default
2

There are a few potential issues with this:

  1. There is no need to add jQuery UI to your require JS config, it's already included with M2. Just use jquery/ui as a dependency.

  2. You should use domReady! as a dependency rather than $(document).ready. Like so: require(['jquery', 'jquery/ui', 'domReady!'], function($, ui, doc){

  3. You're loading your script via require and XML at the same time. You only need to add your script once via Require JS, once you have done this there is no need to include your JS via XML to. This is likely your issue.

To rule out any issues with your logic does the code work outside of Magento?

This is one method of calling a JS file from your template:

<script type="text/x-magento-init">
    {
        "*": {
            "Vendor_Module/js/drag": {}
        }
    }
</script>
Improve this answer
11
  • Yes the script works flawless outside Magento. The script was originally made by someone else to be a dollmaker eg. a dress up game for kids. I just converted it to be able to use it in Magento.
    – Bas
    Commented Nov 19, 2017 at 18:11
  • It sounds like it is related to how you're loading the scripts, what happens when you try the above?
    – Ben Crook
    Commented Nov 19, 2017 at 18:13
  • I've editted the files like you said in point 1 and 2. I'm not clear on your 3rd point tho. I removed the loading via XML. I added my script via Require JS, and called it "drag". How does my template file know it can use drag.js to do it's magic
    – Bas
    Commented Nov 19, 2017 at 18:42
  • I presumed the require js block was in your template sorry, you can call it using either x-magento-init or data-mage-init. I've added one method to my answer, full details can be found on devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/….
    – Ben Crook
    Commented Nov 19, 2017 at 18:49
  • I added your calling method in my template file but it throws an error. Uncaught SyntaxError: Unexpected token / in JSON at position 7. Looking at the console the error is at: // components initialised on the element defined by selector
    – Bas
    Commented Nov 19, 2017 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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