Temporarily removed fetchlink fade transition, added call to listview('refresh') if target element is a listview.

Author: Wilto

docs/pages/fetchlinks/fetch-tabs.html

@@ -17,11 +17,11 @@
 	<div data-role="page">
 		<div data-role="content">  
 			<style>
-				#quote-viewer { padding:15px; }
+				#quote-viewer { padding: 10px 20px 10px 10px; position: relative; }
 				#quote-viewer blockquote { font-size:1.8em; font-family:Georgia, Serif; margin:0.3em; line-height:125%; }
-				#quote-viewer em { float:right; margin:1.2em 10%; opacity:0.5; font-size:1.1em; text-transform:uppercase; } 
+				#quote-viewer em { display: block; text-align: right; margin:1.2em 10%; opacity:0.5; font-size:1.1em; text-transform:uppercase; } 
 				#quote-viewer p { margin:2px 6px; color:#999; }
-				#quote-viewer .quote-close { float:left; margin-top:15px; }
+				#quote-viewer .quote-close { position: absolute; top: 0; right: 0;}
 
 				.pix-wrapper p {  }
 				.pix-wrapper .pix-nav { float:left; opacity:0.85; }

docs/pages/fetchlinks/pix-1.html

@@ -6,7 +6,7 @@
 	<title>jQuery Mobile Framework - Fetch links</title> 
 	<link rel="stylesheet"  href="../../../css/themes/default/" />  
 	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="../../../js/jquery.js"></script>
 	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
 	<script src="../../_assets/js/jqm-docs.js"></script>
 	<script src="../../../js/"></script>
@@ -26,8 +26,8 @@
 				<h3>Alone at the beach</h3>
 
 				<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
-					<a href="pix-6.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
-					<a href="pix-2.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
+					<a href="pix-6.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
+					<a href="pix-2.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
 				</div>
          	</div>
 

docs/pages/fetchlinks/pix-2.html

@@ -26,8 +26,8 @@
 				<h3>Flower patch</h3>	
 
 				<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
-					<a href="pix-1.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
-					<a href="pix-3.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
+					<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
+					<a href="pix-3.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
 				</div>
          	</div>
 

js/jquery.mobile.fetchlinks.js

@@ -8,8 +8,7 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 		var self = $( this.element ),
 			target = self.attr( "href" ) ? self : self.find( "a" ).not( ":jqmData(target)" );
 
-		target
-		 .click(function() {
+		 target.bind("click", function(e) {			 
 			var el			= $( this ),
 				url		    = el.attr( "href" ),
 				target		= self.jqmData( "target" ),
@@ -60,13 +59,18 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 						normalizePath( 'img', 'src' );
 						normalizePath( 'a', 'href');
 
-						setTimeout(function() {																
+						setTimeout(function() {		
 							targetEl[ method ]( responseEl.addClass('fade in') );
 
+							targetEl.filter( ':jqmData(role="listview")' ).length && targetEl.listview( "refresh" );
+
 							targetEl
-								.listview( "refresh" ) // This should work with trigger( "refresh" ).
+								.trigger( "create" )
 								.removeClass('ui-loading-inline')
 								.height('auto');
+								
+							console.log("Plugin fired and completed");
+							
 						}, 300);
 					});
 				}
@@ -79,16 +83,17 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 
 $( document ).bind( "inlineLoader", function( e, ui ){	
 		if( ui.method === "html" ) {
-			$( e.target ).children().removeClass('fade in').addClass('fade out');
+			//$( e.target ).children().removeClass('fade in').addClass('fade out');
 
 			setTimeout(function() {
-				$( e.target ).html( "<div class='ui-loader-inline fade in'><span class='ui-icon ui-icon-loading spin'></span></div>" );
+				//$( e.target ).html( "<div class='ui-loader-inline fade in'><span class='ui-icon ui-icon-loading spin'></span></div>" );
 			}, 300);
 		}
 });
 
 //auto self-init widgets
 $( document ).bind( "pagecreate create", function( e ){
+	console.log("Create called");
 	$( $.mobile.fetchlink.prototype.options.initSelector, e.target ).fetchlink();
 });