Meerdere input voor 1 ajax functie

[Trancilian]

Hoi ik ben vandaag voor het eerst begonnen met Ajax en heb verder alleen wat ervaring met HTML en CSS. Ik heb geprobeerd met google een oplossing te vinden, maar ik weet eigenlijk niet waar ik het moet zoeken.

Mijn code is nu als volgt:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("Featured").innerHTML=xmlhttp.responseText;
 *  }
  }
  xmlhttp.open("GET","avonduren.html", true);
  xmlhttp.send();

   </script>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="Project1"></div> 
<h2>AJAX2</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
}

Wat ik wil is dat als ik button 1 klik hij pagina 1 laadt in div id="Featured" en als ik button 2 klik hij pagina 2 laadt in div id="Featured" en button 3 etc etc

een oplossing die ik had was de gehele functie loadXMLDoc kopiëren en loadXMLDoc2 noemen, maar dat zorgt voor heel veel code. Is er een manier om dit misschien variabeler te doen? Dat de button een naam doorgeeft welke voor de .html in de xmlhttp.open() word geplaatst? Zodat ik maar 1 functie hoef te plaatsen en bij nieuwe content alleen nieuwe buttons hoef te maken.

is er iemand die mij hier verder mee kan helpen?

De code gebruik ik in mijn portfolio. Iedere button word een thumbnail van een project die, wanneer aangeklikt word, het gefeaturede project vervangt. http://www.wilbertschuurmanhess.nl/tutz/

 

[Tha Devil]

Dit kun je oplossen door een parameter te gebruiken voor de functie

[js]
function loadXMLDoc(page)
{
var xmlhttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Featured").innerHTML=xmlhttp.responseText;
}
}
if(page == 1)
{
xmlhttp.open("GET","avonduren.html", true);
}
else if(page == 2)
{
xmlhttp.open("GET","anderepagina.html", true);
}
xmlhttp.send();
}
[/js]
Vervolgens geef je die parameter mee bij het aanroepen:

<button type="button" onclick="loadXMLDoc(1)">Request data 1</button>
<button type="button" onclick="loadXMLDoc(2)">Request data 2</button>

 

[Trancilian]

het was even een zoektocht naar haakjes die ik per ongeluk dubbel had neergezet, maar uiteindelijk werkte het perfect. Heel erg veel dank!

 

[Trancilian]

toen ik uw oplossing aan een vriend liet zien bedacht hij dit(hij is bekend met programmeren, maar niet met ajax) wat nog net iets korter is:

function loadXMLDoc(portfolio)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("Featured").innerHTML=xmlhttp.responseText;
 �  	}
	}

        xmlhttp.open("GET",portfolio, true);
  xmlhttp.send();

  
}
  </script>
<h2>Newton Faulkner Poster Competitie</h2>
<button type="button" onclick="loadXMLDoc('avonduren.html')">Newton Faulkner Poster Competitie</button>
<h2>Ik Doe Het Straks Wel</h2>
<button type="button" onclick="loadXMLDoc('avonduren2.html')">Ik Doe Het Straks Wel</button>
<div id="Featured"></div>

alsnog heel erg bedankt voor uw hulp