Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
document.addEventListener("show" is not working in cordova with onsen
-
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
-
@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.
-
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 ?
-
@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 I don’t think show exists for Onsen 1.x. What did event.target.id dump out?
-
@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.
-
@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.
-
@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?
-
Hi, peoples.
I used the code below:
document.addEventListener("init", function (event) { if (event.target.id === "consultarReservas") { $("#reservas").datepicker(); } });
And works with no problems.