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 so we can help you better. — Jonathan Hamel
– Jonathan Hamel, Commented Mar 10, 2021 at 18:16
Please visit help center, take tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet — mplungjan
– mplungjan, Commented Mar 10, 2021 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
– Geat, Commented Mar 10, 2021 at 18:24
Updated code above. Sorry for vaguery, new to this! Thanks for your help. — McTech
– McTech, Commented Mar 10, 2021 at 18:41

Geat · Accepted Answer · 2021-03-10 22:16:22Z

0

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)

answered Mar 10, 2021 at 22:16

Geat

1,2297 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

External JS file function cannot see page function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related