jQuery.html() not working in android application, made with cordova

Question

Solution

This was not the real issue. The issue was that one of the javascript didn't load.

I asked a new question about it here: Can't call functions from first included javascript file from the second included js file

My original question

When I view my application in a browser (before I build/compile it with Cordova), everything works fine. But after i build it with Cordova, $("#content").html("test"); doesn't work anymore on android 4.2.2. however, it does work on android 6.0.0. alert("test");.

First I though that jQuery isn't working... But then I tried this:

$("body").click(function() {
    alert("test");
});

and it worked.

Any ideas why the .html() method is not working?

UPDATE

This is how the element with the id "content" looks like:

<div id="content">
</div>

I tried to add some content like this:

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

On all android versions i use Google Chrome as my browser.

UPDATE #2

I tried the html() method inside and outside of

$(document).ready(function(){});

Answer 1

Start with: Make sure the <div id="content"> is loaded to DOM before you 'set text' script executes, could utilize onload() to ensure. Probably checked this, but a heads up for others.

Next, I wonder if the issue is with the .html() method of JQuery. Documentation states "This method uses the browser's innerHTML property."

Check innerHTML() alone via:

document.getElementById("content").innerHTML = "test";

I know there are certain limitation when utilizing innerHTML() in vanilla JS, for instance issues with <script>, so if JQuery's .html() utilizes it, it may be an issue somehow.

If you can, try using vanilla JS to set the #content <div> via:

document.getElementById("content").textContent = "test";

This will allow you eliminate .html() and it's use of .innerHTML() truly isn't to blame.

Edit: Here is JQuery's .html() method, the true issue may lie with how it handles the setting. It attempts to use innerHTML(), if that fails somehow, it then defaults to append().

See below:

function (value) {
    return access(this, function (value) {
        var elem = this[0] || {},
            i = 0,
            l = this.length;

        if (value === undefined && elem.nodeType === 1) {
            return elem.innerHTML;
        }

        // See if we can take a shortcut and just use innerHTML
        if (typeof value === "string" && !rnoInnerhtml.test(value) && !wrapMap[(rtagName.exec(value) || ["", ""])[1].toLowerCase()]) {
            value = value.replace(rxhtmlTag, "<$1></$2>");
            try {
                for (; i < l; i++) {
                    elem = this[i] || {};
                    // Remove element nodes and prevent memory leaks
                    if (elem.nodeType === 1) {
                        jQuery.cleanData(getAll(elem, false));
                        elem.innerHTML = value;
                    }
                }
                elem = 0;
                // If using innerHTML throws an exception, use the fallback method
            } catch(e) {}
        }
        if (elem) {
            this.empty().append(value);
        }
    },
    null, value, arguments.length);
}

Furthermore, here is the source for the fallback default called, append(), if the innerHTML() in the html() method fails:

function () {
    return this.domManip(arguments, function (elem) {
        if (this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9) {
            var target = manipulationTarget(this, elem);
            target.appendChild(elem);
        }
    });
}

You can find the methods in JQuery by searching with Ctrl + F and searching when viewing the source... for instance html:, with the colon. See picture below:

Notice the search bar on the bottom.

Answer 2

I think the reason why your .html() is not working is because it might not be binded to an action/element whereas alert() in itself is a message box or way of conveying information to the user. Let us see using example:

1. Alert():

   $("body").click(function() {
       alert("test");
   });
   

2. html():

   $("body").click(function(){
        $("h1").html("test");
     });
   

here as you can see clearly, button triggers an action of click which would then change the content of "h1" but alert does not requires any such biding to an element or so.......

Hope this is helpful :)