External JS file function cannot see page function

Question

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)

Please provide more context and/or a [minimal and reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so we can help you better. — Jonathan Hamel, Mar 10 '21 at 18:16
Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Mar 10 '21 at 18:21
Have you tried ensuring that the document is ready in your external script - $(document).ready or equivalent? It might also help to namespace the function to window (window.myFunction) to ensure it can be found in scope. — Geat, Mar 10 '21 at 18:24
Updated code above. Sorry for vaguery, new to this! Thanks for your help. — McTech, Mar 10 '21 at 18:41

score 0 · Accepted Answer · answered Mar 10 '21 at 22:16

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)

External JS file function cannot see page function

1 Answers1