External JS file function cannot see page function

I have an existing legacy aspx page loading an external JS file. I am adding functionality and have added an async function in a script block on the page. The external JS file has been modified to call the async function. No matter where on the page I load the external script it still continues to complain that the page function is not defined. I’m seriously stuck! Thanks

UPDATE:

    ///loading scripts 
    <script src="../_scripts/jquery-3.4.1.min.js"></script>
    <script src="../_scripts/bootstrap-4.6.0.min.js"></script>
    <script src="../_scripts/jquery.datatables.min.js"></script>
    <script src="../_scripts/datatables.select.min.js"></script>
   //page function
    <script type="text/javascript">
        $(document).ready(function () {
           
            async function providerPopUp() {
                await $.ajax({
                    url: '../Provider/PreCert_PrvSearch.aspx', 
                    method: 'get',
                    data: { typeOfSearch: typeOfSearch, coIdNbr: coIdNbr },
                    dataType: 'json',
                    success: function (response) {.......

   //load external script after page script
    <script src="../_scripts/PreCert_Create.js"></script>

   //call to page function added to external js file
    function Pop_Modal_Window_NPI (){
        providerPopUp()
            .then((result) => {
                console.log('result: ' + result);
                retPrv = result;
            })

External JS file function Pop_Modal_Window_NPI is triggered onblur of a text box

Result is Uncaught ReferenceError: providerPopUp is not defined at Pop_Modal_Window_NPI (PreCert_Create.js:169) at HTMLInputElement.onblur (PreCert_Create.aspx?…parameters)

Answer

Pop_Modal_Window_NPI() calls the function providerPopUp(), but the latter is inside an enclosure and so isn’t in the scope of the call.

You can get around this by adding the function to the window namespace:

window.providerPopUp = async function() {
  ...
};

And then the call inside Pop_Modal_Window_NPI becomes:

window.providerPopUp()

(You don’t even need to prefix window to the function call, I just do it for consistency)

Advertisement

Answer