How can I add "load next 10 items" buttons on my iPhone webapp?
I have a webapp that is a gallery of pictures as well, but its starting to take a bit too long to load all of them in the initial loading of the webapp page. I have seen some webapps that have a button on the bottom of the page that says “load next 10 posts/pics/etc”. This would solve my problem, but I am not sure how this is accomplished, is there a tutorial or page that helps with this?
Observing members:
0
Composing members:
0
51 Answers
I’ll be happy to help! How is your web app built? Is it PHP/Ruby/Python based? Do you use a database? If so, what software?
Its mainly HTML, and CSS based actually, with a bit of javascript.
Ahh okay, so it’s not really an interactive app in that sense? Okay, well you could get some use out of http://prototypejs.org/ .
To get you started, you could have the index.html file, with the first ten images, linking to the prototype library in the <head>. Then have an empty <div> at the bottom of those images with an ID of “next10”. Then have a link somewhere on the page, with an onclick=“new Ajax.Updater(‘next10’, ‘nexttenimages.html’); return false;”.
This will cause the contents of nexttenimages.html to appear in the next10 div. Once you get to grips with prototype a bit more, you can create things like loaders, and use bottom insertion to load the next ten images, and the next ten images, and the next ten images.
If you don’t understand this, let me know and I’ll give explaining what I mean another go. I could probably build an example for you if I finish my work today. :)
Oh, and this might interest you for building even more interactive websites. For $10 used, it’s probably worth buying to have a flick through and decide if you’re interested.
Thank you richardhenry! That should point me in the right direction for getting started. I might just take you up on your help if I run into problems later, how can I contact you if I need? :)
Just let me know here… might aswell share the assistance to anyone else who stumbles on this in the future. I’ll be happy to help out. Good luck!
Hey there, calling out to richardhenry, (or anyone who would like to chime in),
I was reading up on some introductions and FAQs on AJAX and JSON stuff since this is really my first time touching the stuff. Now that I know what it does and can do, I started to hop back to my webapp and see what damage can be done. I did download the prototype javascript as you suggested and have skimmed through it. Although exactly how I would link that from the header within my index Im not quite sure. Would you be able to give a break down of each step, that would greatly be appriciated!
I’ll put together a demo for you, no problem.
thanks! Im eager to learn this stuff, it sure does have lots of potential.
Here you go: http://sandbox.s2021.gridserver.com/showmore/
—
Take a look in the head of that document. You’ll see
<script src=“prototype.js” type=“text/javascript” charset=“utf-8”></script>
This calls the prototype library, and includes it in our document.
—
Then take a look at the “Show more” link. You’ll see:
onclick=“showMore(); return false;”
This calls the showMore() function when the link is clicked, and “return false” stops the link from working normally… ie. taking us to ”#”.
—
You can see the showMore() function in the head, and everything it does. I’ve added comments, which look like this:
// Comment
The two forward slashes stop that line from being interpreted as JavaScript, so where ever you see that, I’ve added some extra information for you.
Feel free to ask questions, good luck!
—
I’ll leave this up indefinitely. You can download all the files at:
http://sandbox.s2021.gridserver.com/showmore/Archive.zip
Thanks! Im going to go over this and Ill let you know the results…
Okay cool. Try out the demo at the first link and let me know if this is what you’re after.
yes, that first link is exactly what I’m after. although instead of listed items like that I have thumbnails, would that make a difference? here is a link of my webapp,
http://sketchstudios.net/iphone you can click under
photos > places >
for an example of what Im going for. Eventually there will be 3×9 thumbnail pics, and Im hoping to have the LoadNext10 button below them, to do what your link
( http://sandbox.s2021.gridserver.com/showmore/ ) does.
Sure. You would just swap out the contents of the list items with image tags.
<ul id=“list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
becomes:
<ul id=“list”>
<li><img src=”......</li>
<li><img src=”......</li>
<li><img src=”......</li>
</ul>
doesn’t even have to be a list:
<div id=“list”>
<p><img src=”......</p>
<p><img src=”......</p>
<p><img src=”......</p>
</div>
and in the 11,20.html .etc files:
<p><img src=”......</p>
<p><img src=”......</p>
sweet! that looks like it should totally work, I cant wait to put this to test. thank you so very much, and Ill most likely have one or two more questions if I get stuck, but this should work, Ill let you know!
Hey there, (richardhenry)
thanks for getting me this far! Although I seemed to have hit a snag. Specifically when Im testing the show more link. my webapp page scrolls to a new blank slate that has the next10 thumbnails, instead of listing it on the same page. could you view the source and see what I might be doing wrong?
I renamed the 10,20.html pages to a name I would be using—photos-places-1.html, photos-places-2.html, & photos-places-3.html
I’m scratching my head on this, lil help?
Hmm, seems to be something to do with the IUI framework…
If you switch:
<a href=“photos-places-1.html” id=“control” onclick=“showMore(); return false;”>Show more</a>
to:
<div id=“control” onclick=“showMore(); return false;”>Show more</div>
It will fix it. You’ll need to style that to look like a link in CSS, changing the pointer: attribute so that the hand appears.
I’m sure there is a way to prevent links from launching a new pane in IUI, but Joe Hewitt’s IUI website has been down for about a month now so I can’t read the documentation!
Good luck.
Oh, and I noticed a bit of a mistake there… Take the <ul id=“list”> out of the paragraph at the bottom, and change the table tag so that it is:
<table width=“100%” id=“list” border=“0” cellspacing=“1” cellpadding=“1”>
and then change the contents of photos-places-1.html so that it contains:
<tr>
<td><div align=“center”><a href=“photos/photoplaces/iphonesize/10a-full.jpg” title=“Santa Monica Beach” target=“_blank”><img src=“photos/photoplaces/thumbnails/10a.gif” alt=”” width=“100” height=“100” /></a></div></td>
<td><div align=“center”><a href=“photos/photoplaces/iphonesize/2a-full.png” title=“Los Angeles Skyline” target=“_blank”><img src=“photos/photoplaces/thumbnails/2a.gif” alt=”” width=“100” height=“100” /></a></div></td>
<td><div align=“center”><a href=“photos/photoplaces/iphonesize/3a-full.png” title=“Glendale Americana Walkpath” target=“_blank”><img src=“photos/photoplaces/thumbnails/3a.gif” alt=”” width=“100” height=“100” /></a></div></td>
</tr>
Hey thanks for the tip! I went ahead and made those changes to both the index and loadnext10 pages, after upload I tested it out and it seems the “Show more” link when pressed isn’t working. So although its not opening up in a new pane anymore, its not doing anything now lol. I went through and skimmed through any of my source that might give me clues to why that’s happening but I couldn’t see anything. Any suggestions?
It should do. Do you have a live version I can look at?
yes, the version Im working on now is here
thats the most recent work.
Ah! Because you copied the code straight from Fluther, the quotes aren’t “dumb quotes”, they are formatted curly quotes which HTML parsers ignore.
Just highlight the quotes in <div id=“control” onclick=“showMore(); return false;”>Show more</div>, in things like the ick=”” and delete them then retype them.
Should fix it.
oh man!!! I knew it was something simple like that, I was racking my brains to figure out what was going on, let me test that out….
Great! I changed the “dumb quotes” to real quotes and that fixed it so it loads when the Next10 button is pushed. Now, I just need to fix the dead links in the follow up pages. Ill let you know when everything is up and operational!
Alright, so you might hate me before this thread is over, but I’ve hit another snag with when the Next10 page loads. It seems to not load the images from the source even though Ive checked and double checked the correct url for the pictures. Ive also double-checked if there were any “dumb quotes” anywhere and that wasnt the problem either. The pages in question are as follows:
Set 1
Set 2
Set 3
Any ideas what might be causing the disruption of loading the images correctly from the index ?
Nevermind, I got it to work, for some reason I had to close out safari on the iphone and re-enter the address, perhaps it was too many reloads in that one browser than it could handle, especially with all those errors!
Anyway, everything does seem to be working and operational!
I do have one last follow up question on how to add the LoadNext10 button for different areas of my website and not just in the photo-places section of my webapp, would there be any confliction/problem if I wanted to do the same thing (on the same index page) for different sections & lists? (or would I just have to make sure that the followup pages that have the additional thumbnails be named differently than the original followup pages?) or—would I have to add a whole ‘nother set of LoadPaths (from line 19–64 here) for that particular section?
Probably the easiest way would be to repeat the code in the head for each section, and rename the variables and functions. So you could have loadMorePlaces(); and the variables could be nextSetPlaces… you get the idea. You would need to change the ID of the table too, so that it’s “listPlaces”... so you don’t have duplicate IDs. Do you see what I mean?
Thanks for the email too, wow!! :)
cool, Ill keep that in mind for when that problem comes around and I have more thumbnails I would need to display in more than one category. Thank you again!
Hi again, hate to resurrect a dead question but you think you could help out one more time? I happen to run into a snag with adding a repeat in the code for a 2nd area that needs “loadMore” functions. I followed your suggestion as closely as I could by simply repeating the code in the head for each section, renaming the variables and functions, and changing the ID so it knows its different. However after many tries I don’t think its going to well. I got to the point of having a “show more” button, and when pushed something seems to load, but nothing loads. I have a source to look at here. Any help is greatly appriciated! (This will be the final question on this thread – promise!)
Away at the moment, on my phone (really shouldn’t be, hah) but if you post here again at the weekend I’ll remember to come help. And it’s no problem, really. :)
ok! Thanks! I’ll be sure to post again this weekend!
ok, now that its the weekend I thought I would post again :)
I happen to run into a snag with adding a repeat in the code for a 2nd area that needs “loadMore” functions. I followed your suggestion as closely as I could by simply repeating the code in the head for each section, renaming the variables and functions, and changing the ID so it knows its different. However after many tries I don’t think its going to well. I got to the point of having a “show more” button, and when pushed something seems to load, but nothing loads. I have a source to look at here. Thanks again!
Could you update the copy on the server so that you’re using a loadmore in every category for the photos? I’ll be able to take a look at what’s happening in the code then. Let me know when it’s up :)
The link I have there in my last post is an updated copy, it doesnt have any “load mores” in the photo category but it does have it in the “Digital” > “Logo Design” category. (Thats the one Im having problem with.) I was curious how to solve that issue of it not “loading more” thumbnails when I click on it, the one under the “Photo” category works though…
Ahhh, I see exactly what’s going on.
The line in the second block of Javascript code:
new Ajax.Updater(‘list’, loadPathLogoDesign, {
The ‘list’ there tells Prototype where to load in the next set of logo pages, and it’s currently doing it on the “Places” photography section! Try it, click the load more in logo design, and then go into places on the photos and you’ll see a bunch of logos there.
Where you have:
—
<ul id=“Logo-Design” class=“plain” title=“Logo Design”>
<center>
<table width=“100%” border=“0” cellspacing=“1” cellpadding=“1”>
—
You need to add in an ID to identify it:
—
<ul id=“Logo-Design” class=“plain” title=“Logo Design”>
<center>
<table width=“100%” id=“listLogoDesign” border=“0” cellspacing=“1” cellpadding=“1”>
—
And to update the second block of Javascript in the head, so that the line:
new Ajax.Updater(‘list’, loadPathLogoDesign, {
Becomes:
new Ajax.Updater(‘listLogoDesign’, loadPathLogoDesign, {
—
This will fix the problem. Hope this has been helpful, let me know.
Also, you need to change the reference to the indicator and it’s ID if you want that to work. In the logo design section, change:
<img src=“indicator.gif” width=“16” height=“16” style=“display:none;” id=“indicator” alt=“Loading…”>
To:
<img src=“indicator.gif” width=“16” height=“16” style=“display:none;” id=“indicatorLogoDesign” alt=“Loading…”>
—
In the head, in the second block of JS code, you need to change both:
$(‘indicator’).show();
and
$(‘indicator’).hide();
To:
$(‘indicatorLogoDesign’).show();
and
$(‘indicatorLogoDesign’).hide();
Oh, and for speed purposes, you only need to include the line:
<script src=“prototype.js” type=“text/javascript” charset=“utf-8”></script>
once in the document. It’s in there twice, above each block of JS. Once you’ve included Prototype, it’s available forever and you can re-use it throughout the document without reincluding it. :)
Let me know if this all works!
Ah! I knew it was something not matching up, I just didn’t know what line of code it was! Thank you, I’m going to make those changes now and upload it after. Ill let you know the results! I assume I would do the same changes to those lines of code if I were to add another “loadmore” section somewhere else under a different category?
Yep! Just be sure to change all of the ID references, variable names and the names of the HTML files you’re loading in each time you do. It should basically be a breeze once you’ve got the hang of it. Let me know :)
right! Ill post my final working version after its done so you can take a look at it one last time, (crosses fingers) thanks teacher!
Looking forward to it! My suggestion for future learning is to make a really simple HTML document, and try going through some of the stuff in the prototype library and getting to grips with it. Once you get into the beat of the whole thing, you can pick it up pretty easily.
http://www.prototypejs.org/learn
Feel free to fire me an email if you have a little problem or are confused about the syntax of something, I’m happy to help.
Enjoy, and let me know if that works!
great, thanks! I went ahead and made those changes and uploaded the new page (same link) but I think I crossed my wires somewhere – when I click on the load more button under “Photos” > “Places” it loads the next set of photos in the Logo Design section. But when I refresh the page to push the load more button under the Logo Design section, it loads the logo design thumbnails in the Photo section! LOL, man.
Im re-looking at every line again I think I might have the ID’s mixed? I’ll post again when I find what it could be…
In the first block of JS, this:
new Ajax.Updater(‘listLogoDesign’, loadPath, {
should be:
new Ajax.Updater(‘list’, loadPath, {
In the second block of JS, this:
new Ajax.Updater(‘list’, loadPath, {
should be:
new Ajax.Updater(‘listLogoDesign’, loadPath, {
Everything else looks fine. :) Minor error there.
Alright, I went ahead and made those fixes, uploaded them and it works except for when I click on the load more button in the Logo Design section, it retrieves & shows the thumbnails for the PHOTOS instead of the logos.
could it have something do to with these lines in the Logo Design section?
<div id=“controlLogoDesign” onclick=“showMoreLogoDesign(); return false;”>
<img src=“showmorebutton.gif” alt=“Show more logos” /></div>
Oh no, sorry, this line is messed up in the second block of JS:
new Ajax.Updater(‘listLogoDesign’, loadPath, {
That’s my fault, I gave you the wrong one :P
The correct code is:
new Ajax.Updater(‘listLogoDesign’, loadPathLogoDesign, {
I think Im going to cry, ....
OUT OF HAPPINESS. That did the trick, and BOTH sections are loading the correct sets, you sir are the reason I tip my hat in my avatar. Thank YOU.
I assume If I need to add more sections in other areas I would do the same thing just copy the 2nd “blog paragraph” of the JS parts and paste it in after it and change the IDs, variables and HTML links and it should work. I do believe I got the hang of it though.
Thank you again, you rock. =D
Great stuff :D Send me an email if you need anything. Good luck!
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
