search

DataZombies / jQTouch

jQT extensions jqt.activityIndicator, jqt.bars (with numeric badges), jqt.checkGroup & jqt.segmentedControl.Get updates via Twitter http://twitter.com/HeadDZombie. If you find this fork useful please make a donation via PayPal (http://tinyurl.com/2fpmx27). See below for demo links.
MIT License
159 stars 34 forks source link

Scrolling in Dynamically Created Pages #55

Closed NETvide closed 12 years ago

NETvide commented 12 years ago

In $(document).ready() we create 4 empty pages and fire off an AJAX request to collect the data to populate these pages and create further new pages containing more detailed information. What we're finding is that the <ul> contents of the initial 4 pages scrolls as expected but the contents of the new pages created from the AJAX data is fixed and doesn't scroll. Can you advise on a solution?

DataZombies commented 12 years ago

Are the divs set-up correctly on the new AJAX pages? Any AJAX page, if it has the right structure, will automatically get the iScroll object. See the documentation on the top of jqt.bars.js

NETvide commented 12 years ago

The DIVs are correctly formatted but they are added to the current document, they display correctly except for the scrolling, However jqt.bars doesn't know about them because they were added after document.ready by the AJAX asynchronous return. Is there a call I can make to make jqt.bars initialise them correctly And add the scroll object or would you recommend a different technique of loading the arbitrary list of products and their details via AJAX.

DataZombies commented 12 years ago

As of 2011-03-20 jqt.bars.js uses the pageInserted event to add the iscroll object to new pages. See the doc on top of jqt.bars.js & lines 687 - 694. See the main_tabbar demo. Click on the AJAX tabbar icon and then on the Long GET Example. Also check in Safari's Web Inspector console to see if $('#dynamicPage').data('iscroll') exists.

NETvide commented 12 years ago

Thanks for the suggestion above it enabled me to get a working, though may be not optimal solution using
for (var i = 0; i < Products.length; i++) {     $("#jqt").trigger("pageInserted", { page: $("#Product" + Products[i].Id) }); }

The exact scenario is

  1. Make an AJAX request which returns a JSON object containing a list of about 200 products.
  2. Use the jQuery Templates extension to append the 200 plus Product "pages" to #jqt
  3. trigger "pageInserted" for each new page generated

However I discovered that the environment failed if the pageInserted was triggered for each of the 200 plus pages but did work if I limited the call to the < 10 long pages which required scrolling to be enabled.

DataZombies commented 12 years ago

200 pages? two HUNDRED pages? TWO HUNDRED PAGES?!

You just ran out of memory.