Uncaught Error: Mismatched anonymous when calling JQuery in Magento 2 frontend

Question

i use jquery in front-end for ajax in phtml page, but i'm getting this error:

Uncaught Error: Mismatched anonymous define() module: function ($, _, template) 

here's my code:

<script>
    define([
            'jquery',
            'underscore',
            'mage/template'
            ], function ($, _, template) {
                var URL = "<?php echo $this->getValidationUrl();?>";
                $(document).on('change','#order_id',function() {
                        if($('#order_id').val() == '') return;
                        var param = 'order_id='+$('#order_id').val();
                        $.ajax({
                            showLoader: true,
                            url: URL,
                            data: param,
                            type: "POST",
                            dataType: 'json'
                        }).done(function (data) {
                            console.log(data);
                            if(data != '1'){
                              $("#error_order").remove();
                              $("<p id='error_order' style='color:red;'> "+ data +"</p>").insertAfter( "#order_id" );
                              $('input[type="submit"]').prop('disabled', true);
                            }else{
                              $("#error_order").remove();
                              $('input[type="submit"]').prop('disabled', false);
                            }
                        });
                    });
                });
  </script>

Answer 1

If you place your javascript in template file, use require, not define.