GodSpeed JP1
Posts: 0
Joined: Thu Feb 27, 2014 1:23 pm

Youtube component on Popup makes Popup close problem.

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.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Youtube component on Popup makes Popup close problem.

Hello,

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

Did you try to test it as native?

GodSpeed JP1
Posts: 0
Joined: Thu Feb 27, 2014 1:23 pm

Youtube component on Popup makes Popup close problem.

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.

GodSpeed JP1
Posts: 0
Joined: Thu Feb 27, 2014 1:23 pm

Youtube component on Popup makes Popup close problem.

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.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Youtube component on Popup makes Popup close problem.

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

GodSpeed JP1
Posts: 0
Joined: Thu Feb 27, 2014 1:23 pm

Youtube component on Popup makes Popup close problem.

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

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Youtube component on Popup makes Popup close problem.

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.

RobertJay
Posts: 0
Joined: Fri Jun 15, 2012 1:32 pm

Youtube component on Popup makes Popup close problem.

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?

RobertJay
Posts: 0
Joined: Fri Jun 15, 2012 1:32 pm

Youtube component on Popup makes Popup close problem.

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).

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Youtube component on Popup makes Popup close problem.

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.

Return to “Issues”