Page 1 of 2

Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 10:16 am
by GodSpeed JP1

I have a Popup.There are a text input field and a Youtube component(hide) on the Popup.
when I open the Popup and input a youtube link in the text field, I set the link to the Youtube components and it will show(fadeIn).
It works well.But
The problem is when I click a button try to close the Popup,I can't close at the first time.I need to close it again.like bellow:
This my popup.
Image

I input youtube Id into the text field ,then the youtube component show.
Image

Then I click the "Close" button, The Popup doesnot close and video lost the link.
Image

Then I click "Close" button again, It really closed.
Anything wrong?

*I use the javascript to show the youtube component like:
Appery('youtube').attr("src", "https://www.youtube.com/embed/" + videoid + "?wmode=transparent");
Appery('youtube').fadeIn(300);

*I use the standard event "close popup" to close the popup.


Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 10:29 am
by Alena Prykhodko

Hello,

Please check browser console http://docs.appery.io/documentation/d..., are there any errors?

Did you try to test it as native?


Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 10:39 am
by GodSpeed JP1

Hello Alena,
There is JS error in browser console at the first time to click close button.
It says "ReferenceError: event is not defined --- jquery-1.9.1.js:979
"
the seconde time to click the close button.There is no error.
I also test it on IOS tester,the same problem happened.


Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 11:09 am
by GodSpeed JP1

P.S
If I remove the youtube component there is no problem.
And If the youtube component never show,there is no prolem.
When youtube component show,the close popup event cannot work correctly.


Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 2:18 pm
by Alena Prykhodko

Ok, I was able to reproduce the issue, let us test more. We'll update.


Youtube component on Popup makes Popup close problem.

Posted: Sun Mar 09, 2014 2:36 pm
by GodSpeed JP1

OK,take it easy.It's not a rush.


Youtube component on Popup makes Popup close problem.

Posted: Tue Mar 11, 2014 11:13 am
by Maryna Brodina

Hello!

The problem is that to close popup window $.mobile.back is used (navigation back on history). Also using code you change youtube src component (which is iframe in fact). This event is saved in history and when you navigate one step back, you are returned to the same moment when youtube video is not loaded yet, not to the previous screen. As a workaround do not use action of popup closing, instead use navigation to another screen action.


Youtube component on Popup makes Popup close problem.

Posted: Mon Nov 16, 2015 1:53 am
by RobertJay

Maryna, I am having what may be a related problem: my popups in my html5 app sometimes close by themselves immediately upon being opened in iPhone Safari. I suspect it may be cache related. There are no debugger errors. Do you think always closing the popups and navigating to another screen, rather than invoking a close popup, is a good workaround here too?


Youtube component on Popup makes Popup close problem.

Posted: Mon Nov 16, 2015 3:11 pm
by RobertJay

UPDATE: After experimenting, I believe my problem has to do with how I'm activating the event which opens the pop-up. I'm now using virtual click which, as indicated above, intermittently results in the pop-up immediately closing. But if I intentionally keep my finger on the link longer than normal, the pop-up will frequently stay open. So my question is: what is the best event to use to open a pop-up on the iPhone - click, virtual click or tap (or something else).


Youtube component on Popup makes Popup close problem.

Posted: Sat Nov 21, 2015 10:22 pm
by Alena Prykhodko

It's better to try on real device, please note the following:
HTML event:
Click – fires when the user clicks on an element.
jQuery Mobile events:
Tap – fires after a quick, complete touch.
Taphold – fires after a held, complete touch.
Virtual click – can be used instead of touch or click events, and will choose the right one depending on the platform you are running.