Ссылки на jQuery Mobile и Cloudmade Leaflet не работают

Я создал веб-приложение с помощью jQuery Mobile и включил карту с помощью Cloudmade Leaflet. На карте есть маркеры, сгенерированные из координат в базе данных. С каждым маркером есть описание элемента и ссылка, которая отображается во всплывающем окне при нажатии на маркер. Все это работает нормально. Ссылка обращается к файлу php, который запрашивает дополнительную информацию из базы данных об элементе.

У меня проблема, когда щелкают ссылку во всплывающем окне, вместо использования перехода jQuery для отображения страницы с дополнительной информацией, ссылка заставляет браузер открываться и отображает содержимое там.

Я предполагаю, что есть некоторая проблема с jQuery Mobile, который видит ссылку и применяет загрузку и переход ajax при нажатии.

Кто-нибудь знает, возможно ли это и что нужно сделать, чтобы он работал правильно?

2 ответа

Барри,

Вам нужно добавить ссылку "#" на мобильную ссылку jQuery. Например, если у вас есть страница JQM с именем infoPage, например:

<div data-role="page" id="infoPage" data-add-back-btn="true">
  <header data-role="header" data-theme="c">
    <h1>Video tests</h1>
  </header> 
  <div data-role="content">
     This is where more info would appear...
  </div>
</div>

Затем вы можете создать маркер так:

var popup = new L.Popup();
popup.setLatLng( e.latlng );
popup.setContent( "More <a href='#infoPage'>info</a> here." );
map.openPopup( popup );

Обратите внимание на href='#infoPage' - это стандартный способ переключения страниц в JQM. Надеюсь, что это решит за вас (я только что попробовал здесь, и это работает)

... и только в том случае, если вы запускаете свое "приложение" как приложение PhoneGap, а не как чистое веб-приложение, нажатие на ссылку может привести к тому, что PhoneGap будет запускать контент в браузере, а не оставаться в своем собственном веб-представлении. Это ответ где-то еще:

Ссылки на удаленных сайтах JQueryMobile в приложении PhoneGap открывают Safari

Что контролирует, открывает ли PhoneGap внешний браузер / Safari?

http://forum.jquery.com/topic/phonegap-jquerymobile-ajax-links-opening-in-browser-window

открыть ссылку внутри программы phonegap

Я разрабатываю в jQuery Mobile, и по умолчанию мобильная форма jQuery выполняет вызов на сервер через ajax, вы должны добавить data-ajax="false" как это:

<form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">

Полный пример:

http://jquerymobile.com/demos/1.0/docs/forms/forms-sample.html

Другие вопросы по тегам