Hello,
I have a Popover with a ListView of links. I would like someone to be able to click on a link, have it close and it navigates to the page. Here is the code that I have so far, I have it opening in the parent, but it doesn't close.
The current code is not closing the link for me. Using the Developer Tools when I debug the JS, the closeParentPopover is not being called when a link is clicked inside the Popover. Can someone help me out here? I would have thought that this would have been more simple.
I have a Popover with a ListView of links. I would like someone to be able to click on a link, have it close and it navigates to the page. Here is the code that I have so far, I have it opening in the parent, but it doesn't close.
<%@ Master Language="C#" AutoEventWireup="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>[[code removed]]</head><body> <a href="../index.html">Back</a> <div data-role="view" data-layout="overview-layout" id="overview-content" data-title="Title"> <form id="form1" runat="server"> <ul data-role="listview" data-style="inset" data-type="group"> <li> <ul> <li> <asp:ContentPlaceHolder ID="mainContent" runat="server"> </asp:ContentPlaceHolder> </li> </ul> </li> </ul> </form> <div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'> <div data-role="view" data-title="People"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-click="closeParentPopover">Close</a> </div> </div> <ul data-role="listview"> <li><a data-target="_top" href="default1.aspx" data-click="closeParentPopover">Link 1</a></li> <li><a data-target="_top" href="default2.aspx" data-click="closeParentPopover">Link 2</a></li> <li><a data-target="_top" href="default3.aspx" data-click="closeParentPopover">Link 3</a></li> <li><a data-target="_top" href="default4.aspx" data-click="closeParentPopover">Link 4</a></li> <li><a data-target="_top" href="default5.aspx" data-click="closeParentPopover">Link 5</a></li> <li><a data-target="_top" href="default6.aspx" data-click="closeParentPopover">Link 6</a></li> </ul> </div> </div> </div> <div data-role="layout" data-id="overview-layout"> <header data-role="header"> <div data-role="navbar"> <!--a class="nav-button" data-align="left" data-role="backbutton">Back</a--> <span data-role="view-title">Title</span> <a data-align="right" data-rel="popover" data-role="button" class="nav-button" href="#popover-people">Login</a> </div> </header> </div> <script> function closeParentPopover(e) { var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver'); popover.close(); } </script> <script> window.kendoMobileApplication = new kendo.mobile.Application(document.body); </script></body></html>The current code is not closing the link for me. Using the Developer Tools when I debug the JS, the closeParentPopover is not being called when a link is clicked inside the Popover. Can someone help me out here? I would have thought that this would have been more simple.
3 Answers, 1 is accepted
0
Hi Jon,
closeParentPopover function does not get called because standard <a> tags does not have a mobile click event. The solution is to set this function as a click event handler of the ListView widget itself.
I hope this helps.
Regards,
Alexander Valchev
the Telerik team
closeParentPopover function does not get called because standard <a> tags does not have a mobile click event. The solution is to set this function as a click event handler of the ListView widget itself.
<ul data-role="listview" data-click="closeParentPopover"> <li><a data-target="_top" href="foo.html">Link 1</a></li> <li><a data-target="_top" href="foo.html">Link 2</a></li></ul>I hope this helps.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
Rank 1
answered on 30 Jan 2013, 01:49 PM
Yes, that works. Thank you very much!
I have found one issue that I am encountering with this PopOver Menu.
Here is my current html code for the PopOver.
Whenever I went to "About Us", the page would load. Then I would go to "Staff" and that page would load. However, when I attempted to go to "About Us" again, it stayed on the "Staff" page, but the URL showed domain.com/#/mobile/about-us in the URL. I believed this to be loading the view via AJAX and each time I loaded a page, it loaded on top of the other.
Now, I do not want it to use AJAX. I removed the data-target="_top" and added data-rel="external" as I was having some issues. This only happens on the mobile device, not Chrome or Safari on the desktop. On my iPhone, when I click a link the link, the address bar pops down real quick like it wants to go to that URL, but nothing happens. The Safari browser does not even go to the URL. When I click a link in the PopOver Menu, I want it to just to go directly to the URL, without using AJAX. If I click on "About Us" I want the URL to go to domain.com/mobile/about-us and if I click on the "Staff" I want it to go to domain.com/mobile/staff. Not /#/mobile/staff.
Thank you very much for your support and help!
I have found one issue that I am encountering with this PopOver Menu.
Here is my current html code for the PopOver.
<div data-role="popover" id="menu" data-popup='{"height": 230, "width": 250}'> <div data-role="view" data-title="Menu"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-click="closeParentPopover">Close</a> </div> </div> <ul data-role="listview" data-click="closeParentPopover"> <li><a data-rel="external" href="/">Home</a></li> <li><a data-rel="external" href="/mobile/about-us">About Us</a></li> <li><a data-rel="external" href="/mobile/staff">Staff</a></li> </ul> </div></div>Whenever I went to "About Us", the page would load. Then I would go to "Staff" and that page would load. However, when I attempted to go to "About Us" again, it stayed on the "Staff" page, but the URL showed domain.com/#/mobile/about-us in the URL. I believed this to be loading the view via AJAX and each time I loaded a page, it loaded on top of the other.
Now, I do not want it to use AJAX. I removed the data-target="_top" and added data-rel="external" as I was having some issues. This only happens on the mobile device, not Chrome or Safari on the desktop. On my iPhone, when I click a link the link, the address bar pops down real quick like it wants to go to that URL, but nothing happens. The Safari browser does not even go to the URL. When I click a link in the PopOver Menu, I want it to just to go directly to the URL, without using AJAX. If I click on "About Us" I want the URL to go to domain.com/mobile/about-us and if I click on the "Staff" I want it to go to domain.com/mobile/staff. Not /#/mobile/staff.
Thank you very much for your support and help!
0
Hi Jon,
The behaviour you described is caused by a bug connected with external links which is already fixed in the latest internal build. Please log-in with your account at www.kendoui.com to download it and test your project with it. Do not hesitate to contact me in case you observe any troubles.
Best regards,
Alexander Valchev
the Telerik team
The behaviour you described is caused by a bug connected with external links which is already fixed in the latest internal build. Please log-in with your account at www.kendoui.com to download it and test your project with it. Do not hesitate to contact me in case you observe any troubles.
Best regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!