phonegap - dynamically adding javascript

Question

Developing phonegap application which loads google map. Using below two javascript for google map. One javascript is loaded from locally while other javascript loaded from server.

var script = document.createElement('script');
script.src = 'http://maps.google.com/maps/api/js?sensor=true';
script.type = 'text/javascript';
document.head.appendChild(script);
script.onload = function () {
    var script1 = document.createElement('script');
    script1.src = 'js/jquery.ui.map.js';
    script1.type = 'text/javascript';
    document.head.appendChild(script1);
    script1.onload = function () {
        alert(google.maps.LatLng);
    }
};

Both javascripts should be loaded after html page is loaded. Tried below code and referred various blogs, but its not working.

If same scripts written in header tag of html page, then it working perfectly. but in my application i need it to be loaded dynamically.

Please help....

Solved: var doc_write = document.write; // Remember original method; document.write = function(s) {$(s).appendTo('body')}; $.getScript('http://maps.google.com/maps/api/js?sensor=true').done(function() { $.getScript('js/jquery.ui.map.js').done(function() { document.write = doc_write; // Restore method setTimeout(function() { alert(google.maps.LatLng); },1000); }) .fail(function(jqxhr, settings, exception) { alert(exception); // this gets shown document.write = doc_write; // Restore method }); }).fail(function() { alert('failed to load google maps'); });

Problem: It takes some time to initialise.

As you have tagged jQuery, You can use [$.getScript()](https://api.jquery.com/jQuery.getScript/) — Satpal, Mar 19 '14 at 07:14
similar kind of issue i am facing.i need to implement recaptcha in phonegap.but phonegap passes request in 'file://' causing error — Kamlesh Arya, Mar 19 '14 at 07:18
Solved with these answer : http://stackoverflow.com/a/9353610/248889. But still one problem is there, it takes some time to initialise so it require to put timeout to call any function. — Hiren Gujarati, Mar 19 '14 at 09:52

score 0 · Answer 1 · answered Mar 19 '14 at 07:39

0

Call your javascript function after device get ready function. Because if you are using phone gap through Xcode, the device get ready function take some time to load and your script is called before it.

answered Mar 19 '14 at 07:39

Chomu

214
1
10

score -1 · Answer 2 · answered Mar 19 '14 at 07:20

-1

Don't do it in this way

Load it in footer section of your application

answered Mar 19 '14 at 07:20

prady00

721
1
6
17

2

How can it be achieved on tap of button event in footer section? Please provide more info – Hiren Gujarati Mar 19 '14 at 07:38
Load it before tap of button, later you can modify map – prady00 Mar 19 '14 at 08:46

phonegap - dynamically adding javascript

2 Answers2