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

Question

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>`);
    }
});

I think it can help you : https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.2olgmyq3q — jean-max, Dec 13 '16 at 08:21
Is `test3` added correctly in the content? And what's the visible value of `#content` when loading the page? — maxime_039, Dec 13 '16 at 08:23
@maxime_039 when the page is loaded, the #content div is empty. I then fill it with a HTML login form. — tedi, Dec 13 '16 at 08:35
@Tadej in 2;js are you using `$(document).ready(function() { ... } );` ? Please try to put all your code in the same js file under the .ready function. And tell is if this is working. — maxime_039, Dec 13 '16 at 08:38
@maxime_039 no, i don't have `.ready` in 2.js. If i put everything in 1.js file, then it's working... But i have too much code to put everything in 1 file. Can't do it. I tried to add `.ready` to the 2.js file, but it doesn't work. But i call `showLogin()` inside the `.ready`. — tedi, Dec 13 '16 at 09:03
@Tadej based on your explanations, the issue is linked to `$('#content').html("test1");` that is called without using `$(document).ready(...);` I'm curious to see that adding it to `2.js` is not solving your issue. Can you update your question to show how you are adding it? — maxime_039, Dec 13 '16 at 09:06
@maxime_039 i have added it to my question. I also tried everything without the `.ready`. — tedi, Dec 13 '16 at 09:10
@Tadej and in 2.js are you using other jquery attributes or operations such as `$('#content')` ? If it's the case it should be in the `$(document).ready(...);` — maxime_039, Dec 13 '16 at 09:13
@StephanBijzitter i've added this to my question: "the page is empty when it's loaded". — tedi, Dec 13 '16 at 09:14
@maxime_039 no. I made a new project, with just this code, exactly the one which is in this question right now. Nothing less, nothing more. And it's not working. :( — tedi, Dec 13 '16 at 09:15
@Tadej https://en.wikipedia.org/wiki/Stack_trace perhaps this will help — Stephan Bijzitter, Dec 13 '16 at 09:16
Thanks @StephanBijzitter for pointing out the stacktrace, i will google how to do this in Chrome, but how can i look at the stacktrace in the default Android browser? — tedi, Dec 13 '16 at 12:12
@Tadej problems like these reminds me of the time before we use `crosswalk`. You can find it here https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview, please dedicate some time and have a try with it, it will be a problem solver for similar issues in the future. — Sarantis Tofas, Dec 13 '16 at 18:31
@Tadej also i am confused, are you trying this on a phone with windows phone or android?? — Sarantis Tofas, Dec 13 '16 at 18:34
@Akis First i tried it on Android 4.2.2, then i tried also on Windows Phone, i just provided this in case it might help, i don't need it to work on Windows Phone, just on Android 4.2.2 default browser (not Chrome). Will take a look at crosswalk. Thanks. — tedi, Dec 14 '16 at 06:33
I have installed the application on Android 4.2.2 with cordova-plugin-crosswalk-webview, like you suggested @Akis but it's still the same. :( — tedi, Dec 14 '16 at 08:49
Did you try putting `console.log` statements in the scripts to follow the order of processing? (see http://stackoverflow.com/a/7750683/1009922 to activate the Javascript console) — ConnorsFan, Dec 17 '16 at 19:59
Other suggestions: (1) move the `` lines for your two code files to the bottom of the `body` section and remove `$(document).ready` from the code, (2) clear the browser cache and test again. — ConnorsFan, Dec 17 '16 at 20:11
@Tadej try to simplify the example to the minimum code required to see the issue. for example replace the code in 1&2 js files with just `alert(1)` & `alert(2)`. If it works, add `$(document).ready` then alert, and so on. try this and reply with the results — gafi, Dec 18 '16 at 09:07
may be this helps for debugging http://stackoverflow.com/q/2314886/2592042 — Rajshekar Reddy, Dec 19 '16 at 10:31
@Tadej Is this issue still valid? Is it specific only to Android 4.4.2 or also to cordova specific. Please throw some light on this so that i can dig deep accordingly. Cheers — Gandhi, Dec 19 '16 at 15:02
i have edited my answer, using setInterval was not the right approach on this. — , Dec 19 '16 at 15:09
@ConnorsFan i can't access the `about:debug` on Android 4.2.2. Can it be that there is no console on such old Android versions? — tedi, Dec 19 '16 at 15:34
@Gandhi the issue is only with Android 4.2.2, on Android 6.0.0 everything works as it should. — tedi, Dec 19 '16 at 15:35
@Tadej - I don't know if there is something special with the console for version 4.2.2. By the way, is Javascript enabled in the browser? (see http://www.wikihow.com/Enable-JavaScript-on-an-Android-Phone#Using_the_Stock_Browser_sub) — ConnorsFan, Dec 19 '16 at 17:46
@ConnorsFan i tried both these: "(1) move the lines for your two code files to the bottom of the body section and remove $(document).ready from the code, (2) clear the browser cache and test again." but the results was the same. And yes. JavaScript is enabled. — tedi, Dec 20 '16 at 06:41
@Gaafar i tried "replace the code in 1&2 js files with just `alert(1)` & `alert(2)`". The `alert(1)` was triggered, but the `alert(2)` was not. — tedi, Dec 20 '16 at 06:44
@Tadej good, so this means that the second script is not loading at all for some reason. try a few other checks: 1. change the order of scripts so that 1.js comes before 2.js and see what happens. 2. remove 1.js from html and see if `alert(2)` works. 3. rename 2.js to something else and see if it loads. — gafi, Dec 20 '16 at 08:11
@Tadej you can also add an `onload` listener to see if the scripts are actually loaded like this `` — gafi, Dec 20 '16 at 08:25
@Gaafar i have removed everything from 2.js and just added and alert() inside the .ready() method and one alert() outside it. None gets called. I think that the 2.js file doesn't get "included" into the index.html. It has to be something really stupid which is not working here. That's really weird. But the weird part is, that if i add `onload="alert('2.js loaded')"` i can see this alert. No idea what the hell is going on... — tedi, Dec 21 '16 at 10:06

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

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.

edited May 23 '17 at 12:33

Community

1
1

answered Dec 20 '16 at 16:07

Flummox - don't be evil SE

2,109
6
24
46

I will checkout Grunt and Gulp.js. Because we have too many files to manually merge them each time. Looks promising. Thanks. – tedi Dec 21 '16 at 07:16

tedi · Accepted Answer · 2016-12-21T11:15:14.237

1

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>');
}

edited Dec 21 '16 at 11:15

answered Dec 21 '16 at 10:49

tedi

6,350
5
52
67

1

Of course! that's ES6 syntax that won't run in old browsers. You didn't include this code in the question. – gafi Dec 21 '16 at 10:56
@Gaafar i know. My bad. Sorry. :/ I would never have though that this could be causing the problem. Thank you for all the help. Much appreciated! – tedi Dec 21 '16 at 11:08
2

never mind now. Just next time include the exact code. Glad it's solved anyway. – gafi Dec 21 '16 at 11:16
1

@Tadej Glad its resolved. But unfortunately i guess it would have killed most of our time as the question was not complete – Gandhi Dec 21 '16 at 11:36
I guess that it wasn't a complete waste of time, you helped me a lot to find the problem. Thanks. Stackoverflow needs to award reputation for comments as well, right now i can upvote, but you don't get any reputation for it. Only for answers. :( – tedi Dec 21 '16 at 14:22

Akshay Tilekar · Answer 3 · 2016-12-21T09:19:41.340

0

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();//
};

edited Dec 21 '16 at 09:19

answered Dec 21 '16 at 09:11

Akshay Tilekar

1,910
2
12
22

score -1 · Answer 4 · answered Dec 13 '16 at 09:24

-1

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

answered Dec 13 '16 at 09:24

vinod rajput

62
4

1

And like I said, had @Tadej bothered to look at the stacktrace, he would not have needed to ask this question in the first place. – Stephan Bijzitter Dec 13 '16 at 09:29
Agree with @StephanBijzitter – Kirankumar Dafda Dec 13 '16 at 09:30
1

It was a typo, but even with this fix, it's still not working. – tedi Dec 13 '16 at 12:11

Lombard · Answer 5 · 2016-12-14T00:17:51.943

-3

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

edited Dec 14 '16 at 00:17

answered Dec 13 '16 at 08:41

Lombard

12
3

I tried and removed `$('#content').html("test1");`, but it's still not working. – tedi Dec 13 '16 at 09:16
Why are you closing `showLogin()` function with curly and round both braces ? – Kirankumar Dafda Dec 13 '16 at 09:27
was a mistake, i was really tired. Thesecond try of the OP was mistaken although. You cant put a function iside document.ready @Tadej im going to correct the example, please try it again. – Lombard Dec 14 '16 at 00:17

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

5 Answers5

Linked