0

How to write code in require js, I created layout default.xml file and added code like this

       <link src="Test::js/custom.js"/>

And I created web/js/custom.js and wrote like this

 jQuery(document).ready( function() {
 alert("Hai Hello");
 jQuery('#text').css('display', 'none');
 jQuery("#btn").click(function(){
 jQuery('#text').css('display', 'block');
    if ((jQuery('#text-data').val()) === '') {
        jQuery('#error-msg').css('display', 'block');
       
        return false;
    }
    else {
        jQuery('#error-msg').css('display', 'none');
    }
});
});

But it is not working. How to convert this code to require js. Plz help me

3 Answers 3

1

Try the below code which will work your custom JS as expected.

web/js/custom.js

 define([
        'jquery'
    ], function($) {
        "use strict";
jQuery(document).ready( function() {
 alert("Hai Hello");
 jQuery('#text').css('display', 'none');
 jQuery("#btn").click(function(){
 jQuery('#text').css('display', 'block');
    if ((jQuery('#text-data').val()) === '') {
        jQuery('#error-msg').css('display', 'block');
       
        return false;
    }
    else {
        jQuery('#error-msg').css('display', 'none');
    }
});
});
    }
    });

Please note JS path should be correct and run the Magento cache:flush and static content command to see the changes in the frontend. Please let me know if you are facing any issue.

Or you can add js in phtml file as well. Please review the below example

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

Examples:

Inside the require function, you can directly access jQuery functionality in place by using either jQuery or its short form alias, the dollar $ sign. For example:

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Page loaded.");
  });
});

Or

require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    alert("Page loaded.");
  });
});

Please let me know if you need any other help

9
  • what is "use strict" here
    – User0434
    Nov 17, 2021 at 13:23
  • Strict mode removes certain language constructs and behaviors that make optimizing javascript difficult, or that have bene proven to lead to bugs. It's a way for programmers to opt-in to “better” javascript, but leaves old code to run as is.
    – Nits
    Nov 17, 2021 at 13:52
  • so can i add "use strict" also in my code
    – User0434
    Nov 18, 2021 at 6:10
  • I think yes....
    – Nits
    Nov 18, 2021 at 7:03
  • instead of define we can use require? and <link src> or <script src>?
    – User0434
    Nov 18, 2021 at 9:37
1

your code is correct! just you have missed name in link tag. change code inside link tag in this form.(given below).

  1. <link src="<vendor>_<module>::js/custom.js"/>

for more information to link the click devdocs documentation.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html

I hope its work perfectly!

1
  1. Make sure your layout file is in correct place and has a correct structure: app/code/Vendor/Module/view/frontend/layout/default.xml

    <?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="Vendor_Module::js/custom.js"/>
        </head>
    </page>
    
  2. And here is how your custom.js file should look like: app/code/Vendor/Module/view/frontend/web/js/custom.js

    require([
        'jquery',
        'domReady!'
    ], function ($) {
    
        alert("Hai Hello");
    
        var textEl = $('#text'),
            btnEl = $("#btn");
    
        textEl.css('display', 'none');
        btnEl.bind('click', function(){
            textEl.css('display', 'block');
            if ($('#text-data').val() === '') {
                $('#error-msg').css('display', 'block');
                return false;
            } else {
                $('#error-msg').css('display', 'none');
            }
        });
    });
    

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.