jQuery Forum

1. Start by telling us what doesn't work and how. You haven't. I'm GUESSING that something doesn't work, otherwise you wouldn't be posting.

2. Show us a complete example, not fragments.

3.

 I then have 2 separate HTML pages that consists of the same thing except for the listview ID

What about the other IDs? If they are the same, that is going to be trouble.

I then have 2 separate HTML pages that consists of the same thing except for the listview ID

As I previously stated, this will not work. You cannot re-use an ID in a different page, because the pages can be loaded in the DOM at the same time, and that's not allowed in HTML.

If you have duplicated the panel, wrapper, etc. on a different page, you have to use a different ID. Or, don't use IDs. Use classes.

As to why iscrollview doesn't work: you haven't included the JS for iscroll, nor the JS and CSS for iscrollview.

Post the files in their entirety. There is no way we can help you otherwise. You can (and should) remove unnecessary detail (such as extensive list content) to simplify.

You cannot use the same ID in multiple pages. e.g. if you have a <div id="sidepanel"> in one page, you cannot have a <div id="sidepanel"> in another page.

If you want two iscrollviews on the SAME page, it takes a bit of fiddling with options, as the (overridable) defaults assume there is only one on a page.

I'm not clear just what you are trying to accomplish, because I am just seeing bits and pieces.

I'd suggest you read through the JQM docs and begin at the beginning. I'm not sure why you are making this so complicated by loading the sidepanel and main content dynamically. (Perhaps, though, you intend to load different dynamic content later, and swap-out side-panel and main content with other content.)

Get it going first as a single page with a sidepanel and main content area. iscrollview in the sidepanel will require some options to be set, because by default it will size the first scroller to the height of the browser window, minus any header/footer, and will not/can not automatically size any additional scrollers. You have size extra ones yourself.

I haven't done any testing of iscrollview with side-panels yet. I have used multiple scrollers on the same page, though, and so can probably offer some help once you get the basics done right. Get it working with one scroller, then I will help you with the side-panel, as I'd like to be able to offer documentation on how to do that.

You are essentially duplicating the functionality that JQM already has for using AJAX to change pages. Why?

Nevertheless... you are creating an invalid document when you insert your page1 and page2 into the main page. You are nesting extra HTML and BODY tags. I wouldn't expect most browsers to be too keen on that.

You can't use changePage() like that to load content into some element within a page. It's meant for changing pages. Not exactly sure how pageContainer is meant to be used, I gather it is for internal use. Any other use is undocumented.

Normal use of JQM is to simply use normal links to change pages. JQM takes care of everything for you under the hood to do an AJAX request and page transition.

You are over-complicating things.

Yes, fixed headers/footers can be flaky on some platforms. iscroll/iscrollview is a good fix for that though. You don't have to go through all these gyrations.

You can insert CONTENT into a div. Use $.ajax(), $.load(), etc.

You cannot insert a PAGE into a div. $.mobile.changePage wasn't meant for this. It was meant for normal page changes.

You don't need to do any of this to use iscrollview. Just use iscrollview as documented. It should solve your header/footer problems to boot.

BTW, data-iscroll="scroller" is incorrect. Dunno where you got that. Just use data-iscroll.

If you want to use iscrollview in a panel, I haven't tested that. Would love to hear if it works and how you did it. :)

I don't recommend that you try to use iScroll without jquery.mobile.iscrollview.

I'd suggest you start simple. Don't add dynamic content. Don't try to implement a panel, which is a beta feature under test. Don't use JQM 1.3, which, again, is a beta release under test. 1.2 should work nicely. Don't try to put a scroller in a panel, which to my knowledge nobody else has tried yet.

Begin at the beginning, follow the documentation, and make a basic JQM page.

The docs for jquery.mobile.iscrollview will show you how to add a scroller to the page. It's very simple. You just have to link-in the assets (JS and CSS files) in the right place, and add data-iscroll to the parent of the content you want to scroll. That is all that is needed.

You should then have a page with content that scrolls nicely between header and footer, with no funny business going on with the header/footer. (You may have to set some options on the header/footer to civilize them, though.)

There's a demo packaged with jquery.mobile.iscrollview. If that works well on your device, then you should be able to reproduce those results in a short time.

Once you master that, you can get fancy. You are biting off way too much.

If you add or alter content inside the scroller, you have to refresh the scroller. Otherwise, it has no way of knowing that the content has changed. You can find how to do this in the docs.

Alternatively, you can simply trigger an updatelayout event on any element inside the scroller. (Though, technically, you should trigger it on the element that changed. iscrollview doesn't care what element - but JQM might in certain circumstances.) iscrollview will response to an updatelayout event anywhere inside the scroller by refreshing.

If there are images in your content, you either need to reserve space for the images using CSS or else you need to refresh the scroller after some time delay, because images are loaded asynchronously, and so the height of the content will change after the images are loaded.

Basically, any time you change the height of the content of the scroller, you need to refresh the scroller.

I don't advise using IDs. Use a class.

If you have multiple pages with the same ID (i.e. mainContentWrapper), you might refresh the wrong one. And which one is unpredictable, and dependent on what browser you are using. JQM loads multiples pages in the document, and multiple instances of an ID are not allowed in HTML. Browsers have to punt and try and guess what you meant.

The iscrollview demo has an example of appending content to a scroller. See the "pull and "short" examples. If you pull-up at the bottom, it will add 3 rows at the bottom, if you pull-down from the top, it will add 3 rows at the top.

Impossible to tell without seeing your code.

If you aren't doing any binding or event handlers, then when/where are you populating the listview?

Hi All,