diff --git a/docs/pages/index.html b/docs/pages/index.html index da94a38d..80302f50 100755 --- a/docs/pages/index.html +++ b/docs/pages/index.html @@ -37,6 +37,7 @@
  • Ajax, hashes & history
  • Scripting pages
  • Theming pages
  • +
  • Serving pages from a data response
  • diff --git a/docs/pages/pages-dynamic-data-example.php b/docs/pages/pages-dynamic-data-example.php new file mode 100644 index 00000000..a351ef97 --- /dev/null +++ b/docs/pages/pages-dynamic-data-example.php @@ -0,0 +1,36 @@ + + +{ "title" : "Data-driven Page Response", "content" : "

    This page was served as JSON via Ajax. When requested via HTTP, it returns HTML markup.

    " } + + + + + + + + + + Page Title + + + + + + + +
    + +
    +

    HTML-driven Page Response

    +
    + +
    +

    This page was served as HTML via HTTP. When requested via Ajax, it returns JSON data.

    +
    + + +
    + + + + \ No newline at end of file diff --git a/docs/pages/pages-dynamic-data.html b/docs/pages/pages-dynamic-data.html new file mode 100644 index 00000000..01c1391d --- /dev/null +++ b/docs/pages/pages-dynamic-data.html @@ -0,0 +1,129 @@ + + + + + + jQuery Mobile Docs - Scripting pages + + + + + + + + + + + + +
    + +
    +

    Generating pages from a data source

    + Home +
    + +
    +
    + +

    jQuery Mobile's loadPage method includes a filterResponseText option for filtering the data that is returned from the server after an page is loaded, before it is injected into the DOM. You can use this method to transform the server response in a variety of ways, whether it's replacing image paths, or implementing client-side templating system.

    + +

    To use the filterResponseText option, simply define it as a function that has a single argument representing the raw Ajax response text, and that returns a string (presumably, that same data, modified in some way)

    + +
    
    +$.mobile.loadPage.defaults.filterResponseText = function( data ){
    +	return data.replace( "e", "EEEOOO" );
    +};
    +
    + +

    The following linked page is configured to return HTML or JSON, depending on whether it is requested through regular HTTP or Ajax.

    + +

    View Dynamic Page

    + +

    In the head of this page, the following script handles the templating for that page's JSON response

    + +
    
    +function myFakeTemplater( data, type ){
    +	
    +	// Dumb check to see if response is JSON
    +	if( data.indexOf( "{" === 0) ){
    +	
    +		//convert server JSON response to data
    +		var obj = $.parseJSON( data );
    +
    +		//return string markup
    +		return '
    ' + + '

    ' + obj.title + '

    ' + + '
    ' + obj.content + '
    ' + + '
    '; + } else { + // Otherwise, return it, as it's probably HTML + return data; + } +}; + +//set the loadPage default filter to run through myFakeTemplater +$.mobile.loadPage.defaults.filterResponseText = myFakeTemplater; +
    + + + +
    + + + +
    + + + +
    + + + \ No newline at end of file diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 6431ba64..457502cf 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -643,6 +643,10 @@ data: settings.data, dataType: "html", success: function( html ) { + + // Use the filterResponseText method to filter the server response + var html = settings.filterResponseText( html ); + //pre-parse html to check for a data-url, //use it as the new fileUrl, base path, etc var all = $( "
    " ), @@ -774,7 +778,10 @@ role: undefined, // By default we rely on the role defined by the @data-role attribute. showLoadMsg: false, pageContainer: undefined, - loadMsgDelay: 50 // This delay allows loads that pull from browser cache to occur without showing the loading message. + loadMsgDelay: 50, // This delay allows loads that pull from browser cache to occur without showing the loading message. + filterResponseText: function( data ){ + return data; + } }; // Show a specific page in the page container.