Can't call functions from first included javascript file from the second included js file

Question

Can't call functions from first included javascript file from the second included js file

600 views Asked by ttt At 18 September 2024 at 21:34

I'm making an Android application with Apache Cordova. Everything works on Android 6.0, which is using Chrome by default, the problem is on Android 4.2.2 (Samsung Galaxy S4 mini) which is using the default Android browser.

If i'm not mistaken, then the application is "started" in the default Android browser after it's compiled with cordova and installed on the Android operating system.

In the default Android browser the page is empty on load. But in Chrome everything works fine.

The problem is in the default Android 4.2.2 browser. It's not working in the default browser for Nokia 1520 (which is using the Windows Phone OS).

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script src="2.js" type="text/javascript"></script>
        <script src="1.js" type="text/javascript"></script> 
    </head>
    <body>
        <div id="content">
        </div>
    </body>
</html>

1.js:

$(document).ready(function() {
    $('#content').html("<span>test3</span>"); // Works fine (i can see test3 on the page).
    showLogin();
});

2.js (nothing inside this file works, i can't see test1 nor test2 on the page):

$('#content').html("<span>test1</span>");

function showLogin() {
    $('#content').html(`<span>
                        test2
                        </span>`);
}

WHAT I TRIED #1

I also tried to call the showLogin() inside setTimeout():

setTimeout(function() {
    showLogin();
}, 1000);

WHAT I TRIED #2

1.js:

$(document).ready(function() {
    $('#content').html("<span>test3</span>"); // Works fine.
    showLogin();
});

2.js (nothing inside this file works):

$(document).ready(function() {
 $('#content').html("<span>test1</span>");

    function showLogin() {
        $('#content').html(`<span>
                    test2
                    </span>`);
    }
});

Original Q&A

There are 5 answers

Akshay Tilekar On 21 December 2016 at 09:11

give a try this, you can load script dynamically on deviceready of 1.JS or on your event triggered call:

var script = document.createElement('script');
script.src = //path of 2.JS file;
script.type = "text/javascript";
script.onload = function () {
     showLogin();//
};

Flummox - don't be evil SE On 20 December 2016 at 16:07

So there is something wrong with Android 4.2.2 stock browser. And debug output is not working. How long do you want to keep hitting your head on this one?

Here is one way around it: write your files in multiple files and merge them before pushing them out to the .apk, so you will end up with only 1 file. Downside is that you might have a harder time debugging with the merged file. But, as you say, with Android 6.0 it works, so use that to debug. A bit of Google-fu showed these options: Grunt and Gulp.js

Other option would be to see if using requirejs works or not. See this post for more info.

Lombard On 13 December 2016 at 08:41

Maybe im wrong, but i think "$('#content').html("test1");" its crahsing 2.js and showLogin its never called.

i would try something like this:

$(document).ready(function() {
    $('#content').html("<span>test1</span>");
});
function showLogin() {
    $('#content').html("<span>test2</span>");
}

or at least put alone the showlogin function to try it.

Hope it helps

vinod rajput On 13 December 2016 at 09:24

the problem is in 2.js file

$('#content').html("<span>test1</span>");

function showLogin() {
    $('#content').html("<span>test2</span>");
});

at the last line you used small bracket that is braking the function so it is undefined. remove the small bracket after the curly bracket. working example See here

**ttt** · Accepted Answer · 2016-12-21 10:49:45

The problem was caused by the quotes for the multiline JavaScript string "`".

After i changed this:

function showLogin() {
    $('#content').html(`<span>
                        test2
                        </span>`);
}

To this:

function showLogin() {
    $('#content').html("<span>test2</span>");
}

everything worked just fine.

It looks like that these quotes are not supported in the stock Android browser. I guess that this triggered an exception in the 2.js file and that was the reason that the other code in 2.js didn't execute.

I ended up using the backslashes for the multiline strings like this:

function showLogin() {
        $('#content').html("<span>\
                            test2\
                            </span>");
}

The backslash also works inside single quotes, like this:

function showLogin() {
        $('#content').html('<span>\
                            test2\
                            </span>');
}

TechQA.

Can't call functions from first included javascript file from the second included js file

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in ANDROID

Related Questions in JQUERY

Related Questions in CORDOVA

Related Questions in ANDROID-BROWSER

Popular Questions

Popular Tags

Trending Questions