Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Adding multiple pages in one ajax request does not display requested page #549

Closed
morinel opened this issue Nov 25, 2010 · 5 comments
Closed

Comments

@morinel
Copy link

morinel commented Nov 25, 2010

I have the following use case: load a page with links to subpages and those subpages in one Ajax request to limit the number of HTTP requests and to increase the responsiveness of the application. So instead of 1+20 = 21 requests I just use one request with one large response.

1.0a2 however will then display the last <div data-role="page"> rather than the page I requested. A requirement is that all pages have a correct id which matches their fileUrl.

I have a patch against 1.0a2 which solves the issue for me by distinguishing between an Ajax response with one and multiple data-role="page" pages and transitioning to the correct page.

How do I attach a patch to this issue?

@morinel
Copy link
Author

morinel commented Nov 29, 2010

Here's the patch

Index: ROOT/src/main/webapp/jq/jquery.mobile-1.0a2.js
===================================================================
--- ROOT/src/main/webapp/jq/jquery.mobile-1.0a2.js  (revision 652)
+++ ROOT/src/main/webapp/jq/jquery.mobile-1.0a2.js  (revision )
@@ -3370,14 +3370,35 @@
                    }

                    //preserve ID on a retrieved page
+                    if (to.length == 1) {
+                        /* If only one page has been retrieved, transfer to this page */
-                   if ( to.attr('id') ) {
-                       to = wrapNewPage( to );
-                   }
+                        if ( to.attr('id') ) {
+                            to = wrapNewPage( to );
+                        }

-                   to
-                       .attr( "id", fileUrl )
-                       .appendTo( $pageContainer );
+                        to
+                            .attr( "id", fileUrl )
+                            .appendTo( $pageContainer );
+                    } else if (to.length > 1) {
+                        /* If there are more pages with data-role="page", find the page with id equal to fileUrl. If not found, use the first page in to[]. */
+                        var found = null;
+                        to.each(function() {
+                            if (found == null && $(this).attr("id") === fileUrl) {
+                                found = $(this);
+                            }
+                        });
-                       
+
+                        if (found == null) {
+                            found = $(to[0]);
+                        }
+
+                        /* Add all pages to the page container */
+                        to.appendTo($pageContainer);
+
+                        /* Now to is only one page, and transisition to the correct one next... */
+                        to = found;
+                    }
+                       
                    enhancePage();
                    transitionPages();
                },

@toddparker
Copy link
Contributor

This is on our radar but probably won't get in for 1.0.

@scottjehl
Copy link

A couple things:

  • This patch is written against the navigation JS before a pretty big refactor occurred, since we no longer use IDs, but data-url attributes instead.
  • Does this account for preserving bookmarkable URLs while allowing local-links to work as well? The problem we've faced with supporting multipage with Ajax is that these pages need identifiers that include the URL they come from, in addition to own page identifier. Essentially, their ID would start like this: id="myPageID" data-url would need to look like this: "somepage.html&ui-subpage=myPageID" AND any links to "#myPageID" would need to be rewritten with JS to direct instead to "#somepage.html&ui-subpage=myPageID".

It's possible, but we haven't gotten around to writing it yet. Any takers?

@annymsMthd
Copy link

This feature is vital to a project I'm working on right now so I will try to refactor it in to the new build. I have the pages already loaded into the dom I just need to assign the data-url attribute and make sure the links work.

@toddparker
Copy link
Contributor

This is a good idea but closing and moving to the feature requests page for post-1.0:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants