Functie uitbreiden met parameter

woensdag 3 maart 2010 12:58

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig om de beginselen van Ajax onder mijn knie te krijgen en stuit op een relatief simpel probleem volgens mij. Ik heb een stukje code die het volgende doet:

1. men klikt op een link en een _GET wordt aangeroepen
2. de output van de _GET pagina moet verschijnen in een span

Het lukt wel, zolang ik een statische span meegeef, in het voorbeeld hieronder 'regel1' of 'regel2'. Echter als ik de functie uit wil breiden om het zaakje dynamisch te maken, dan gaat het mis. De code die wel werkt is als volgt:

HTML:

<html>
 <head>
  <title>Ajax test</title>

 <script type="text/javascript" language="javascript">
   var http_request = false;

   function makeRequest(url, parameters, targetSpan) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      //alert(targetSpan);
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      targetSpan = 'regel2';
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            result = http_request.responseText;
            document.getElementById(targetSpan).innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
 </script>
 </head>

<body>
 <table border="1">
 <tr>
    <td>link</td><td>span1</td><td>span2</td>
 </tr>
 <tr>
    <td><a onclick="javascript:makeRequest('input.html', '?','regel2');" href='#'>klik!</a></td>
    <td><span name="regel1" id="regel1"></span></td>
    <td><span name="regel2" id="regel2"></span></td>
 </tr>
</table>
</body>

</html>

Als ik nu alertContents() uitbreid met een parameter, bijvoorbeeld alertContents(targetSpan), dan werkt de functie niet. Wie kan mij een zetje in de goede richting geven? Mijn uiteindelijke doel is om voor elke link een eigen unieke target-span mee te geven. Hoe bereik ik dit?

woensdag 3 maart 2010 13:01

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Dit is pas een stuk of 1000 keer besproken. Zoek eens een beetje in WEB of op Google.

[ Voor 8% gewijzigd door RobIII op 03-03-2010 13:04 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 3 maart 2010 13:39

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Je zou ook eens kunnen kijken naar bijvoorbeeld jQuery, die heeft standaard AJAX functies waarmee het een stuk makkelijker wordt.

Verder zou ik willen afraden om de onClick hard in de code te zetten, zulke dingen kan je beter later dynamisch toevoegen, wat met o.a. jQuery.bind() ook eenvoudig kan.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 3 maart 2010 13:48

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

OkkE schreef op woensdag 03 maart 2010 @ 13:39:
Verder zou ik willen afraden om de onClick hard in de code te zetten

Iig zonder de "javascript:"-pseudoprotocol toevoeging. Een onclick attribuut verwacht een JS functie en dus hoef (en moet) je geen javascript: specificeren.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Onderwerpen