2

I'm trying to use jquery in an adminhtml js file...but it seems not to be working and can't get to understand why...any help would be appreciated !

Layout is like

<head>
    <script src="Vendor_Module::js/logger.js"/>
</head>

Js file is like

define([
    'jquery'
], function ($) {
    'use strict';

});

But this throw me the error :

require.js:166 Uncaught Error: Mismatched anonymous define() module: function ($) {

'use strict';

}

http://requirejs.org/docs/errors.html#mismatch at makeError (require.js:166:17) at intakeDefines (require.js:1221:36) at require.js:1408:25

Improve this question

2 Answers 2

Reset to default
2

Instead of code

define([
    'jquery'
], function ($) {
    'use strict';

});

Try require, like this:

    require([
        'jquery'
    ], function($){
        //code here
    });

"define" actually trying to add jquery to you DOM, which is probably loaded already, so instead of define use require

Improve this answer
4
  • Thanks; but in that case why is all commercial modules uses define inside their js files. I also manage to get this working adding a domcontent load condition...sometime it works on the first time, sometimes i need to relead the page one time to make it work. The behaviour is really strange. What you say make sense to me, I will try it. But it's weird that in that case all custom and commercial modules doest not use require instead of define. Cause obviously jquery gonna be already defined in everyprojects.
    – Claims
    Oct 10, 2022 at 8:14
  • It's working. But i don't understand everything behind ^^
    – Claims
    Oct 10, 2022 at 14:29
  • 1
    load your js using requirejs-config.js (instead of a script tag) will also resolve your issue. The main issue is that you have probably loaded your script in xml instead of requirejs-config.js
    – Shoaib Munir
    Oct 11, 2022 at 4:20
  • I also tried using requirejs though; may be the wrong way. Thanks for your assistance :)
    – Claims
    Oct 11, 2022 at 7:11
1

Hi there please try this below example in order to call your JS file from the head tag:

Please use this link on why we should not use the define directly.

In your layout handle file something like this which is present already = sales_order_view.xml use the below sample code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Sample_Module::js/order-post-action.js"/>
    </head>
</page>

Please use this file in this path = app/code/Sample/Module/view/adminnhtml/web/js/order-post-action.js

require([
    'Sample_Module/js/restore-order'
]);

After that use this file again in this path = app/code/Sample/Module/view/adminhtml/web/js/restore-order.js where you are defining it

define([
    'jquery',
    'Magento_Ui/js/modal/confirm',
    'mage/translate'
], function ($, confirm) {
    'use strict';

});

If this answer helped you , please do a give a like as this helps me answer more. Thanks.

Improve this answer
3
  • What is the role of app/code/Sample/Module/view/adminnhtml/web/js/order-post-action.js I don't get it ? Cause my js file already load, the issue isn't there but on the define method fromt he lib. I will try though.
    – Claims
    Oct 10, 2022 at 8:15
  • Okay @Claims please try and let me know if this works, I'll update why is this solution and all in this post soon. Thanks.
    – Bharath Kumar
    Oct 10, 2022 at 9:35
  • @Claims , Please check the answer i have updated with the link.
    – Bharath Kumar
    Oct 10, 2022 at 16:32

Your Answer

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

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