New ultility: Fetch Links

[toddparker]

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.

<a href="https://github.com/dialog.html">Link</a>
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.

<a href="https://github.com/dialog.html" data-rel="dialog">Link</a>
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?).

<a href="https://github.com/dialog.html" data-target=".quote">
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.

<a href="https://github.com/dialog.html" data-target=".quote" data-method="append">
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 href="https://github.com/dialog.html" data-target=".quote" data-fragment="#content">
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.

<a href="https://github.com/dialog.html" data-target=".quote" data-breakpoint="500">
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.

[vener]

Hi Todd,

Is Fetch Links already functional in the current version of Jquery Mobile? We've been trying to implement this in our app but keeps on failing. We basically want to add a LOAD MORE button at the end of the app list elements. Doing it this way will minimized server requests which in theory makes the app a bit more faster.

[toddparker]

No, this isn't going into master until 1.2. There is a fetchlinks branch with the rough code if you want to refine this for yourself earlier.

[toddparker]

We're moving fetchlinks out to help us get 1.3 out faster.

[toddparker]

Current work on this to date:
http://jquerymobile.com/branches/fetchlink/docs/pages/fetchlinks/fetch-tabs.html
https://github.com/filamentgroup/Ajax-Include-Pattern
http://filamentgroup.github.com/Ajax-Include-Pattern/test/functional/

API summary sketch (in flux)

• fetch/load: local (#foo) content or external (bar.html)
• trigger: click event, visible (when popup shown, infinite scroll, layout change)
• media: any media query
• target: ID to indicate where the content should go
• method: replace, before, after, append, prepend
• fragment: selector within response to grab (ex. #page)
  *filter: response hook - could use to enhance for jQM

Demos to build

• load more/refresh listview demo
• tab view - switching between panels
• popup - opens and shows loader, content pops in

[Anthropic]

Is there any chance this will be moved up to 1.4? I need to implement something like this ASAP but would prefer to use part of the framework than a 3rd party plugin.

[Panman82]

I agree with Anthropic, this and multi-panel tracking on the Roadmap needs to be in the next release, 1.4. Of all things on the roadmap, this is tops for me. Of course there are others too, like anchor links and scrollable regions. Just wish it was Q3 2013! ;)

[jaspermdegroot]

Closing as feature request. We are going to update the roadmap. This is probably going to be a demo instead of a new feature. We re-open when we start on working on that.