0

I have the following if statement where I want to check to see whether the postcode input is empty however it fires before the input is loaded on the page and was wondering whether anyone could please advise on how to do this?

I have the following js file that I load to the checkout page:

define([
    'jquery',
],function($){
    $(document).ready(function (){

    //check if postcode is empty
        if( !$('input[name="postcode"]').val() ) {
            $('#checkout-step-shipping_method .no-quotes-block').html('Sorry, no shipping quotes are available for this order at this time. Please ensure you have filled out your shipping details above.');
        }


    });
});

How I can ensure that the code in ran once the page has been loaded?

  • Have you tried placing a domReady! inside your define statement? That's the built in requireJS system for waiting for the page to load. You would place if right after the jquery line. If that works you can get rid of the $(document).ready stuff. – circlesix Sep 7 '18 at 14:09
  • like: define([ 'domReady', 'jquery', ] . ?? Didn't seem to work :/ – heady12 Sep 7 '18 at 14:28
  • it would have to be define([ 'jquery', 'domReady' ] to work right. it might not solve your issue, but that is the syntax to try – circlesix Sep 7 '18 at 19:52
2

Please Use

$(document).ajaxComplete(function() {

Insted of

$(document).ready(function (){

then Please clear cache and check your js will load after checkout page completely loaded.

1

maybe this is not best answer but, since I'm not too expert about knockout js (still on progress learning), I'm use this to trigger jquery event after ui component render fully loaded.

as I know when magento2 start load the checkout page the loading animation will show and hide once all component fully loaded.

so the alternative way is we trigger event after the loading animation dissappear, in magento2 the default loading div for checkout page is to be like this :

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask">

then add this code in your js script

define([
'jquery',
'domReady',
],function($){
$(document).ready(function (){

  // add this script to bind show hide event
    $.each(['show', 'hide'], function (i, ev) {
     var el = $.fn[ev];
     $.fn[ev] = function () {
     this.trigger(ev);
     return el.apply(this, arguments);
     };
   });
 // end addition

    $("#checkout-loader").on("hide", function(){
    //check if postcode is empty
    if( !$('input[name="postcode"]').val() ) {
        $('#checkout-step-shipping_method .no-quotes-block').html('Sorry, no 
        shipping quotes are available for this order at this time. Please 
        ensure you have filled out your shipping details above.');
       }
    }); 

  });
});

don't forget to clear your cache. Hope this help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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