document.addEventListener("show" is not working in cordova with onsen

Abiraman Ramanathan

document.addEventListener("init", function(event) {
  if (event.target.id == "my-page") {
    document.getElementById("my-content").innerHTML = "I am fine!";
  }
}, false);

and

document.addEventListener("show", function(event) {
  if (event.target.id == "my-page") {
    document.getElementById("my-content").innerHTML = "I am fine!";
  }
}, false);

is not working in onsen-ui

munsterlander

@Abiraman-Ramanathan I believe @Fran-Diox answered your question here:

https://community.onsen.io/topic/247/cordova-google-map-plugin-not-shown-map

I also posted code there to help clarify. It would appear you are using Onsen 1.x and so the event you need to listen for is pageinit.

Omar Hassan

I have the same issue, Show event is not fired, i am using onsen 1.x,
Here is my code,

  document.addEventListener("show", function (event) {
                if (event.target.id == "service_requests-page") {
                   alert("init service_requests-page");
                }
            }, false);

Any one can help ?

munsterlander

@Omar-Hassan Try:

document.addEventListener("pageinit", function (event) {
                console.log(event.target.id);
            }, false);

Please report back if that records the page you want.

Omar Hassan

@Omar-Hassan said:

show

initpage works well but i need show not init.

munsterlander

@Omar-Hassan I don’t think show exists for Onsen 1.x. What did event.target.id dump out?

Fran Diox

@munsterlander It does not exist in Onsen 1. And also, show event has been changed slightly in master branch. Perhaps you cannot use it in that way anymore
Now it’s fired when you can actually see the page, i.e. after navigator pushPage.

munsterlander

@Fran-Diox Ah! I remember I had read that in the Github comments when you guys implemented that change. I don’t think it will affect my logic too much, but I will do some testing on it.

munsterlander

@Omar-Hassan Since there is not a show event, try this:

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

To use this, do:

is_visible(elem) // boolean

You will have to either run a timer or an eventlistener for whatever your use case is.

What exactly are you trying to do though as maybe there is a better way?

isacfernando

Hi, peoples.

I used the code below:

document.addEventListener("init", function (event) {
            if (event.target.id === "consultarReservas") {
                $("#reservas").datepicker();
            }
});

And works with no problems.

document.addEventListener("show" is not working in cordova with onsen browsing