Javascript - Function not recognized when js file is called using createElement stuff

Question

I have coding like this:

<script language="javascript" src="test.js"></script>
<script language="javascript">

    mp.init({
    app_id  : 'hd32y4328r3meh2423em',
    version : '1.0'
    });

</script>

And inside test.js like this :

var mp = {};
    mp.init = function(vars) {
        var obj = Object.create(vars); // create obj
        console.log(obj); // all
        alert(obj);
        //return obj;
    };

But the mp.init function () it is not recognized when i load test.js using createElement like code below:

<script language="javascript">
    // Load the JS asynchronously       
    (function() {
        var s = document.createElement('script');
        s.type = 'text/javascript'; s.src = 'mpsdk.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    })();


    // We have a simple cars object     
    mp.init({
    app_id  : 'hd32y4328r3meh2423em',
    version : '1.0'
    });

</script>

Anyone can help?

DOM element insertion is not blocking. The rest of your script will run and then mpsdk.js will be loaded. — Quentin
– Quentin, Commented Sep 9, 2014 at 8:31
You need to wait until the js file is loaded.mp.init is called before mpsdk.js is loaded/evaluated. — t.niese
– t.niese, Commented Sep 9, 2014 at 8:31

Fredy · Accepted Answer · 2014-09-09 10:03:07Z

1

Call function after script loading

Try this-

function() {
        var s = document.createElement('script');
        s.type = 'text/javascript'; s.src = 'mpsdk.js';
        s.addEventListener('load', function(){
        //script loaded do stuff here
         // We have a simple cars object     
         mp.init({
         app_id  : 'hd32y4328r3meh2423em',
         version : '1.0'
         });
        });
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    })();

Or Using callback function on load.

     var onLoadScript = function(callback) {
        var s = document.createElement('script');
        s.type = 'text/javascript'; s.src = 'mpsdk.js';
        s.addEventListener('load',callback);//callback on load

        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
     };
onLoadScript(function(e){
        //script loaded do stuff here
         // We have a simple cars object     
         mp.init({
         app_id  : 'hd32y4328r3meh2423em',
         version : '1.0'
         });
};

edited Sep 9, 2014 at 10:03

Fredy

2,9086 gold badges31 silver badges40 bronze badges

answered Sep 9, 2014 at 8:33

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

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

1 Comment

t.niese Over a year ago

When recommending to write a loader instead of using an existing one, you should probably mention that there are various problems e.g. with older IE (below 10)

MaxArt · Accepted Answer · 2014-09-09 08:32:07Z

0

That's because you're executing the code synchronously, while the script is loaded asynchronously. So, when you call mp.init the script hasn't been loaded yet.

You have to either listen for the load event (for IE9+ and standard browsers) or readystatechange event (for IE8-) checking for readyState === "complete" and then call mp.init.

But I suggest you to save all the hassle by using one of the many AMD loaders around (RequireJS, curl, ...), or even jQuery's $.getScript.

answered Sep 9, 2014 at 8:32

MaxArt

22.8k10 gold badges85 silver badges82 bronze badges

Collectives™ on Stack Overflow

Javascript - Function not recognized when js file is called using createElement stuff

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related