Scripts

Vorige/Volgende oplossing Javascript

Door Jacco Engel -03-10-2007 00:00 -7.616 views

Ik verveelde me dood ongeveer en heb dit toen maar geproduceerd. Ik hoor veel mensen over het feit dat je je menu niet met Ajax requests moet doen omdatje dan geen vorige volgende kunt doen. Wel guess what, dit is hier een oplossing voor. Het idee is simpel. Bij elke pagina waar je een ajaxrequest voor doet zet de request pagina in een hidden select multiple. De nieuwe pagina word automatisch geselecteerd in deze box. Als je op vorige klikt ga je in de select 1 selected index omhoog waarna je een nieuwe request uitvoerd met de selected index. Zelfde idee voor volgende. O ja voor de echte dumbasses ("Deze doet het niet als JS uit staat") : DAN DOET DE REST VAN JE SITE HET OOK NIET Anders had je dit niet nodig (of je hebt het goed geprogrameerd en dan kan alsnog gewoon de vorige knop in de browser gebruikt worden) Vragen mogen hier en in pm maar denk dat het een vrij recht toe rechtaan script is. Ps: Ps: Deze code is gewoon copy pastebaar als je iets concreets wilt zien :P

Download alle bestanden als ZIP

vorigevolgende-oplossing-javascript

[code]
<html>
	<head>
	</head>
	<script>
	
	function addHistoryPage(pagina)
	{
		var opt = document.createElement("option");
		opt.text = pagina ;
        document.getElementById("pages").options.add(opt);
		document.getElementById("pages").selectedIndex = document.getElementById("pages").length - 1 ;
		document.getElementById("volgende").disabled = true ;
	}
	
	function Vorige(knop)
	{
		document.getElementById("pages").selectedIndex = document.getElementById("pages").selectedIndex - 1;
		if (document.getElementById("pages").selectedIndex == 0)
		{
			document.getElementById("vorige").disabled = true 
		}

		if (document.getElementById("pages").selectedIndex != document.getElementById("pages").length -1)
		{
			document.getElementById("volgende").disabled = false
		}
		requestPage(document.getElementById("pages").value,true);
	}
	
	function Volgende(knop)
	{
		document.getElementById("pages").selectedIndex = document.getElementById("pages").selectedIndex + 1;
		if (document.getElementById("pages").selectedIndex == document.getElementById("pages").length -1)
		{
			document.getElementById("volgende").disabled = true 
		}
		
		if (document.getElementById("pages").selectedIndex != 0)
		{
			document.getElementById("vorige").disabled = false
		}
		requestPage(document.getElementById("pages").value,true);
	}
	
	function requestPage(pagina,history)
	{
                if (history != true)
                {
                    addHistoryPage(pagina)
                }
		//Hier zet je vanzelfsprekend je eigen pagina request in.
		document.getElementById("test").innerHTML  = pagina ;
	}
	
	</script>
	<body>
		<table>
			<tr>
				<td colspan="2"><input type="button" onclick="addHistoryPage('pagina.php')" value="set pagina in lijst"></td>
			</tr>
			<tr>
				<td colspan="2">
				<select multiple id="pages" disabled>
				</select>
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" value="Vorige" onClick="Vorige()" id="vorige">
				</td>
				<td>
					<input id="volgende" type="button" value="Volgende" onClick="Volgende()">
				</td>
			</tr>
		</table>
		<div id="test"></div>
	</body>
</html>
[/code]