2

I have created a web app with jQuery Mobile and included a map using Cloudmade Leaflet. The map has markers generated from coordinates in a database. With each marker is a description of the item and a link that is displayed in a popup when the marker is clicked. All that is working fine. The link accesses a php file that requests more information from the database about the item.

The problem I have is when the link within the popup is clicked, instead of using the jQuery transition to display the page with more information the link forces the browser to open and displays the content in there.

I presume there is some problem with jQuery Mobile seeing the link and applying the ajax loading and transition when it is clicked.

Does anyone know if this is possible and what needs to be done to make it work properly?

Barry
  • 43
  • 1
  • 5

2 Answers2

1

Barry,

what you need to do is to include a '#' link to the destination jQuery mobile link. For example if you have a JQM page called infoPage like this:

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

Then you can create the marker like this:

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

Notice the href='#infoPage' - thats the standard JQM way of switching pages. Hope that solves it for you (I just tried it here and it works)

...and just in case you are running your 'app' as a PhoneGap app rather than as a pure webapp, a click on a link may cause PhoneGap to launch content in the browser rather than stay in its own web view. This is answered somewhere else:

Links in remote JQueryMobile sites in a PhoneGap app open safari

What controls whether PhoneGap opens an external browser / Safari?

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

open link inside the phonegap program

Community
  • 1
  • 1
user456613
  • 11
  • 1
0

I develop in jQuery Mobile, and by default a jQuery mobile form makes the call to server via ajax, you should add data-ajax="false" like this:

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

Full example:

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

Peter O.
  • 32,158
  • 14
  • 82
  • 96
ALEX ORTIZ
  • 1
  • Thanks for the response Alex. I'm not using a form from the bubble, I'm using an HTML A tag. The idea is that each bubble has a text link to a php file that gets the details of a property from the server and displays the details within Jquery Mobile but instead breaks out of the mobile app and opens the Safari browser and displays the details in there. – Barry Jan 17 '12 at 08:23