Passing Information from Virtual Pagination to New Page

[davidz]

1) Script Title: Virtual Pagination

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.htm

3) Describe problem:

The script works great, but I can't figure out how to get information out of it. To be more clear I have a page that has two Virtual Pagination boxes that each have their own set of images. What I need is to be able to hit a button at the bottom that will then pass to the next page (POST,GET,Whatever) some type of identifier that will tell the next page which image I was on. So for example if my two image boxes each have 10 images (slide show type format). And I click on the "next" button on the first up to image number 5, then do the same on the second box and go to number 7. Then click "submit" essentially at the bottom and the next page will know that I had selected image number 5 and 7.

Please help!!

Thanks,
David

[ddadmin]

Are each of your 10 images contained inside its own "page" within the virtual box? In other words, are you basically asking how to cause a virtual box to jump to a particular "page" automatically when the page loads based on some value passed in from a previous (actual) page?

[davidz]

Thanks for the reply!! Let me clarify and I'll post some sample code as well. We are using PHP to get data from a database. One part of this is two groups of images. The first group is exterior pics of houses, the second set is a drawing of the floor plan of the houses. Both sets are retrieved from the database separately. Here is the finished HTML:

First I start of form for submitting to the next page:

<form name=Profile method=POST action=profile.php>

Then after some basic HTML layout we get to the Virtual Pagination:

<div style="width: 284px; height: 192px;">
		<p class=virtualpage2>
			<input type=hidden name=IID value=4696>
			<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442061.jpg width=284 height=192>
		</p>
		<p class=virtualpage2>
			<input type=hidden name=IID value=4695>
			<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442051.JPG width=284 height=192>
		</p>
		<p class=virtualpage2>
			<input type=hidden name=IID value=4697>
			<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442071.jpg width=284 height=192>
		</p>
		<p class=virtualpage2>
			<input type=hidden name=IID value=4694>
			<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442041.jpg width=284 height=192>
		</p>
		<p class=virtualpage2>
			<input type=hidden name=IID value=4693>
			<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442031.JPG width=284 height=192>
		</p>
<div id=scriptspaginate class=paginationstyle style="width: 284px">
<a href="#" rel=previous>Prev</a>
<span class=paginateinfo style="margin: 0 30px; font-weight: bold"></span>
<a href="#" rel=next>Next</a>
</div>

<script type="text/javascript">
var newscripts=new virtualpaginate("virtualpage2", 1, "p")
newscripts.buildpagination("scriptspaginate")
</script>

And the Second set of images:

<div style="width: 284px; height: 192px;">
		<p class=sketchbrowser>
			<input type=hidden name=SID value=81479>
			<img src=images/AccountImages/AssessorNew/Sketch/Sketch2/0066442041.JPG width=284 height=192>
		</p>
		<p class=sketchbrowser>
			<input type=hidden name=SID value=70067>
			<img src=images/AccountImages/AssessorNew/Sketch/Sketch1/006644202-1.jpg width=284 height=192>
		</p>
		<p class=sketchbrowser>
			<input type=hidden name=SID value=70068>
			<img src=images/AccountImages/AssessorNew/Sketch/Sketch1/006644203-1.jpg width=284 height=192>
		</p>
<div id=scriptspaginate2 class=paginationstyle style="width: 284px">
<a href="#" rel=previous>Prev</a>
<span class=paginateinfo style="margin: 0 30px; font-weight: bold"></span>
<a href="#" rel=next>Next</a>
</div>

<script type="text/javascript">
var newscripts2=new virtualpaginate("sketchbrowser", 1, "p")
newscripts2.buildpagination("scriptspaginate2")
</script>

Then close out the form with submit button:

<input type=submit name=ProfileSubmit value='Property Profile'>
</form>

So what I need to happen is when I click Submit it takes me to profile.php. I need to know what images the user had selected. You can see that I put in <input type=hidden> to try and get this to work but all it does when I "GET" the data from the next page I just get the last values. I need javascript to find out which image I am on and then pass those two "ID's" to the next page.

I hope this makes more sense. Just to be sure as to your question, I don't need to load the page going to a certain "page". I searched the forum for virtual pagination and say your other posts on this subject.

Just as an after thought to my problem, mabey there is some way that when I click the "next" or "prev" button it can assign the current image as "selected"?? Sorry I'm not very fluent at javascript. I'm much better at PHP.

Thanks again for the help!!!

David

[ddadmin]

If all you need to do is find out which two images are selected inside profile.php, you can do away with having a hidden form field for each image. Remove them first:

<p class=virtualpage2>
<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442061.jpg width=284 height=192>
</p>

<p class=virtualpage2>
<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442051.JPG width=284 height=192>
</p>
"
"

Then, just add a single "master" hidden field for each virtual box that will reflect the value of the selected image when it's clicked on:

<p class=virtualpage2>
<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442061.jpg width=284 height=192 onClick="document.getElementById('master').value=this.src" >
</p>

<p class=virtualpage2>
<img src=images/AccountImages/AssessorNew/Photo/Photo1/0066442051.JPG width=284 height=192 onClick="document.getElementById('master').value=this.src">
</p>
"
"
"
<input type="hidden" name="master" id="master" value="" />

Each time the user clicks on one of the images, it's file name is saved into the hidden form field. For the other Virtual box, you would have the same master hidden field, but with a different name/ID (ie: "master2").

Then, inside profile.php, you would get the name of the two selected images with something like:

$selectedimage1=$_SERVER['master'];
$selectedimage2=$_SERVER['master2'];

That's the basic logic, fine details not withstanding.

[davidz]

That is so close to working perfectly!! Is there some way that I can assign that hidden "master" box by clicking on "next" or "prev". With your extremely helpful code it works but I have to click on a photo for it to assign that hidden "master" box. Can I some how make it so when the user is browsing back and forth with the next and prev buttons have it also assign it? Mabey on an "onFocus"?

I also added an "id" to the img tag and this is what I assign to the hidden field.

<img id=56 src=images/AccountImages/AssessorNew/Photo/Photo1/0000698051.JPG width=284 height=192 onClick="document.getElementById('IID').value=this.id">

<input type="text" name="IID" id="IID" value="">

PS. I use the "ID" because that is the ID from my Database. Makes the query much faster on the next page. Either way it works great!

Thanks!!
David

[ddadmin]

There are many ways to approach this as far as getting the pagination links to also trigger the population of the hiden form field with the shown image's value. One way is this:

1) Inside virtualpagination.js, add to the very bottom the following:

// -------------------------------------------------------------------
// Public: sethiddenfield(name, values)- Sets a hidden form field with the designated id to a list of values (array)
// -------------------------------------------------------------------

virtualpaginate.prototype.sethiddenfield=function(fieldname, fieldvalues){
this.hiddenfield=document.getElementById(fieldname)
this.fieldvalues=fieldvalues
}

Then find the following line, and add to it the part in red:

this.currentpage=parseInt(pagenumber)
if (typeof this.fieldvalues!="undefined")
this.hiddenfield.value=this.fieldvalues[this.currentpage]

2) Then, on your HTML page when invoking a virtual page instance, call the new sethiddenfield() method like so:

<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage", 1)
gallery.sethiddenfield("test", ["dog.gif", "cat.gif", "monkey.gif", "4.gif"])
gallery.buildpagination("gallerypaginate")
</script>

Where "test" should correspond to the ID of the master hidden form field you wish to populate, and "dog.gif", "cat.gif" etc being the list of image values you wish to populate based on the page number. In other words, "dog.gif" is the image presumed to be on page 1 and so on.

[jscheuer1]

How about:

document.forms.instanceName_form_name.instanceName_hidden_field_name.value=instanceName.pieces[instanceName.currentpage].getElementsByTagName('img')[0].id

?

[jscheuer1]

I worked this out in a demo:

http://home.comcast.net/~jscheuer1/s...e/v_page_g.htm

The only thing I added to the page was this:

<script type="text/javascript">
function gather_data(){
var g=[gallery, gallery2]
for (var i = 0; i < g.length; i++)
document.forms['dat'][i].value=g[i].pieces[g[i].currentpage].getElementsByTagName('img')[0].id.replace(/\D/g,'');
}
</script>
<form name="dat" action="test.htm" onsubmit="gather_data();">
<input type="hidden" name="gallery_dat">
<input type="hidden" name="gallery2_dat">
<input type="submit" value="Submit">
</form>

at the end of the page. Oh, and the id's for the images. Since it is technically invalid to give anything an id that starts with a number, I used the prefix 'pic' (though any letters could be used) and stripped them down to their bare numbers in the gather_data() function.

[ddadmin]

Interesting approach John, I guess as direct as it gets by accessing the "currentpage" property from the outside. I like how you defined the hidden form fields in a form of its own- come to think of it, it's cleaner than defining them inside the Virtual page boxes.

[jscheuer1]

Thanks DD! Good of you to see all that without the link to the demo (since corrected).