Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Function is undefined after dynamically including <script> to external JS with function

P

ppowell777

Coder
I have an HTML file that contains a page that, upon clicking a button, should do the following:

1) A <div> panel opens up
2) That <div> panel contains <script src="scripts/record_update.js"></script>
3) The external .js file "record_update.js" contains only one function: officialRecordUpdate()
4) A dropdown in the <div> panel, upon onChange event, will fire officialRecordUpdate()

However, upon onChange, I am constantly getting "Uncaught ReferenceError: officialRecordUpdate is not defined", which makes no sense, because it absolutely is defined, referenced via <script> tag:

HTML: 
<div id="recordPanel">
    <script>
    $.getScript("scripts/record_update.js");
    </script>
    <form>
        <select id="yesNo" onChange="officialRecordUpdate()">
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
    </form>
</div>

Here is scripts/record_update.js:

JavaScript: 
function officialRecordUpdate() {
    alert('You are in officialRecordUpdate!');
}

Basically, I want to be able to use a function from an external .js file that is only referenced when a particular <div> panel opens up to give you the opportunity to use it, but it seems to no longer be able to load it after page load had previously been completed. How do I successfully load an external script after page load?

Thanks
 
Solution
P
Antero360 said:
Hope you don't mind the questions, just trying to find you the best option here. I am assuming that this is for your work, or for something else?
Click to expand...
I don't mind the questions, and, yes, this is for work.

I actually ended up solving it myself by performing $.getScript('scripts/record_update.js') on the onClick event in the previous panel (where you click the "Update Record" button):

<span class="button" id="myButton" onClick="$.getScript('scripts/record_update.js');continueDoingOtherStuff()">Update Record</span>
Sort by date Sort by votes
ppowell777 said:
I have an HTML file that contains a page that, upon clicking a button, should do the following:

1) A <div> panel opens up
2) That <div> panel contains <script src="scripts/record_update.js"></script>
3) The external .js file "record_update.js" contains only one function: officialRecordUpdate()
4) A dropdown in the <div> panel, upon onChange event, will fire officialRecordUpdate()

However, upon onChange, I am constantly getting "Uncaught ReferenceError: officialRecordUpdate is not defined", which makes no sense, because it absolutely is defined, referenced via <script> tag:

HTML: 
<div id="recordPanel">
    <script>
    $.getScript("scripts/record_update.js");
    </script>
    <form>
        <select id="yesNo" onChange="officialRecordUpdate()">
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
    </form>
</div>

Here is scripts/record_update.js:

JavaScript: 
function officialRecordUpdate() {
    alert('You are in officialRecordUpdate!');
}

Basically, I want to be able to use a function from an external .js file that is only referenced when a particular <div> panel opens up to give you the opportunity to use it, but it seems to no longer be able to load it after page load had previously been completed. How do I successfully load an external script after page load?

Thanks
Click to expand...
Hi there,
If the script you need resides in your filesystem, all you need to do is reference the path to it in the src attribute in a script tag

Ex:
HTML: 
<script src="path/to/script.js" type="text/javascript" ></script>
 
Upvote 0 Downvote
Antero360 said:
Hi there,
If the script you need resides in your filesystem, all you need to do is reference the path to it in the src attribute in a script tag

Ex:
HTML: 
<script src="path/to/script.js" type="text/javascript" ></script>
Click to expand...
That also produced the exact same "Uncaught ReferenceError" error, and the script resides in the external .js file in my filesystem. I tried <script src="scripts/record_update.js"></script> to no avail
 
Upvote 0 Downvote
Can't do that. The HTML file is a static HTML file that is pretty much off-limits to me. I can only dynamically include code via Java processes via Servlet via XMLHttpResponse object, hence the unusual architecture. I can't even run <script>alert('hello world');</script> either; nothing at all happens
 
Upvote 0 Downvote
ppowell777 said:
Can't do that. The HTML file is a static HTML file that is pretty much off-limits to me. I can only dynamically include code via Java processes via Servlet via XMLHttpResponse object, hence the unusual architecture. I can't even run <script>alert('hello world');</script> either; nothing at all happens
Click to expand...
Not sure I follow... so, you don't have access to the html file?
 
Upvote 0 Downvote
ppowell777 said:
No; I can add onto it via writing Java that runs classes that will submit information to be formatted into an HTML string to be inserted into the static HTML
Click to expand...
Hope you don't mind the questions, just trying to find you the best option here. I am assuming that this is for your work, or for something else?
 
Upvote 0 Downvote
Antero360 said:
Hope you don't mind the questions, just trying to find you the best option here. I am assuming that this is for your work, or for something else?
Click to expand...
I don't mind the questions, and, yes, this is for work.

I actually ended up solving it myself by performing $.getScript('scripts/record_update.js') on the onClick event in the previous panel (where you click the "Update Record" button):

<span class="button" id="myButton" onClick="$.getScript('scripts/record_update.js');continueDoingOtherStuff()">Update Record</span>
 
Upvote 0 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom