If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Display random list items from another page

There are 25 list items on the other page (reports.htm) and I would like 3 to be displayed on the homepage (index.htm) randomly. The list items only have to change on page refresh (F5).

I've tried the following code, BUT this meant copying the 25 list items from reports.htm into index.htm. This only displays 1 list item, and hides the others from the screen (not good for our screen reading audience):

Users who have thanked sunfighter for this post:

I don't understand, in the least, Sunfighter. Your code still depends on having all 25 <li> items on the *current* page. You need to, instead, fetch *only* the requisite number of items from the other page. On top of that, although you try to "show" 3 items, there is no guarantee that you won't end up picking the same random item all 3 times! (Granted, that's unlikely, but it's certainly possible. And picking the same one twice will happen more often than you'd want to see.)

Snarf: There is no way to make this work as you wanted *UNLESS* both pages are present in the browser AT THE SAME TIME. Or unless you are willing to "send" the random item(s) from the one page to the other.

You need to give us more details: Is one of these pages in, for example, an <iframe> on the other of the pages? How do you expect to transfer the data from one page to the next?

@Old Pedant This was just a fast code to show how to display three items from a group. Two questions were asked, i answered one; sort of. As I said I didn't check this and didn't think of displaying an item two or three times. If I played with it that scenario might have showed up and been dealt with.

As for getting items from another page. I could do it but it would be complicated and as I said "I didn't check this" cause I had other things to do that day. One would have hoped that snarf1974 would have seen what I did and that it only answered one of his questions.

Anyway I don't want to steal this thread and it looks like rnd me is helping him so I'll just back out of here, hat in hand, eyes downcast, bowing low, smile on my face.

Users who have thanked sunfighter for this post:

But how will you be *SURE* that a user will have *BOTH PAGES* open in their browser at the same time???

Since both come from the same domain, there is no cross-site scripting issue, but still the one page can only read items from the other page if both are open in the same browser on the same computer at the same time.

Now...

One solution would be to *force* the page you want to grab data from to be in an <iframe> on the page grabbing the data! The <iframe> can be completely invisible, so the user won't even know you are doing this.

But how will you be *SURE* that a user will have *BOTH PAGES* open in their browser at the same time???

Since both come from the same domain, there is no cross-site scripting issue, but still the one page can only read items from the other page if both are open in the same browser on the same computer at the same time.

no, you can usajax to get a page from anywhere on the site or the world w/cors.

@snarf: i'll take a look later, i'm mobile right now.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

i didn't see a ul#tips anywhere, so i did the best i could. kinda just threw it into a container at the bottom...

but now that it's operational, you should be able to adjust the css selectors to match the actual markup in use without much fuss. remember that the paths and css selectors have to match up, and that you can't pull the live page from your test rig, you have to pull the local copy, which i observed to be on a different url path than indicated.

the gun is firing. as long as it's pointing in the right place, it will hit the target.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

Users who have thanked rnd me for this post:

I guess you guys got this all sorted, but it seems to me that putting those 25 things into and array and doing an array.sort on it and just picking the first three would be a whole lot easier and less code (and maybe faster ??) without trying to get them from the other page.

Users who have thanked sunfighter for this post:

Sunfighter: You are, of course, correct. But it was my impression that the 25 items on that other page changed from time to time, presumably because of other external actions. So I assumed that the goal was to pick 3 of the *current* <li>s, from the live page.

RndMe's method is, as usual with his code, quite clever and correct. But I don't know, for example, how many browser support createDocumentFragment().

My own method would be a lot simpler and would work with browsers as far back as MSIE 5.

But I'm not going to bother to show it unless the OP says he wants it.

I guess you guys got this all sorted, but it seems to me that putting those 25 things into and array and doing an array.sort on it and just picking the first three would be a whole lot easier and less code (and maybe faster ??) without trying to get them from the other page.

how is having to publish each content update twice faster than publishing it once?

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

RndMe's method is, as usual with his code, quite clever and correct. But I don't know, for example, how many browser support createDocumentFragment().

My own method would be a lot simpler and would work with browsers as far back as MSIE 5.

createDocumentFragment is dom1 thing, been around forever...
it's the ajax2 you should be complaining about

xhr.onload(), querySelectorAll(), and createDocumentFragment() should work in all known browsers to at least a couple versions back.

if you are feeling code-happy, please code an IE6/7 compatible version of the function from the POST A JAVASCRIPT section so that many coders can pickup that extra percent of old user agents with no effort.

as far as making this particular code simpler, i don't really see how that could be done. 6 lines of custom code is not very much for an ajax call, unique (non-repeating) result picking, and cross-browser dom handling. if you know a simpler way of doing all that, please, share your feelings with the group. I'd like to see that code. i don't imagine that mine is the only way or the end-all be-all right way of doing anything. furthermore, it's easier for me to find faults with other's code than my own, so it would be nice if that applied universally, and you can spot some issues i can't...

Last edited by rnd me; 01-30-2013 at 11:26 PM.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com