jquery/jquery-mobile — Issue #3219: New ultility: Fetch Links
Author: toddparker
Created: 2011-12-05 03:36:27+00:00
State: open

AJAX Fetch Links are a new utility we have planned that will make it easy to build complex multi-pane layouts and other interactions with simple links. The general gist is that by adding a ```target``` to a link, we no longer do a full page transition and instead AJAX load, enhance and replace the contents of the target with the href's source when the link is clicked. During load, an animated AJAX loader will replace the target, then the new content will fade in when ready. This makes a left panel with list of links and a detail panel on the right possible simply by targeting each link to the right panel.

To make this more powerful, the fetch link properties should inherited so you can have a simple list of links and add the fetch link attributes (target, fragment, breakpoint, etc.) to the parent container to affect all children to be more concise in the markup. The breakpoint attribute allows a min width to trigger the link instead of waiting for a click to happen on the link.

Here is a walkthrough of all the link behavior:

A standard link with a href pointing to a local anchor (#foo) or external page (foo.html) will trigger a full animated page change via the AJAX nav system with the default transition.

```Link```
A dialog is made by adding data-rel="dialog" to a link to display the page with an inset appearance and the default dialog transition.

```Link```
Note: The below example temporary contains a data-fragment attribute.

A fetch link is created by adding the data-target attribute to a link. This tells the framework to not change pages and instead load the href into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?).

``````
The target method for a link can be specified by adding the data-method attribute to a link. This specifies whether to replace, append, prepend, or insert the content before or after the target element. By default, an external href will replace the target.

``````
The content fragment from the loaded page can be specified. By default, the framework will load in the contents of the data-role="page" container, but it's possible to specify content from the page to pull into the target by adding a data-fragment attribute to the link with any jQuery selector.

``````
A breakpoint option will automatically load the fetch link if the screen width is larger than the specified value instead of waiting for the link to be clicked. The data-breakpoint attribute on the link specifies the min-width pixel value to load the link.

``````
Local Fetch Links
Similar to above but examples use local hrefs (#foo) and there isn't a need for a data-fragment attribute since we're already specifying that in the href.