Digicted

Nieuwe rij toevoegen in tabel met prototype

Van de week kwamen we ineens een probleem tegen in de interface van Silverware. Helaas kan ik op dit moment nog niet ingaan op details (maar het zal niet erg lang meer duren voor we live gaan, beloofd! ;)), maar we moesten een mogelijkheid hebben om onbeperkt rijen toe te voegen aan een tabel.
Laten we aannemen dat de basis van de tabel ongeveer als volgt is:

<table>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
    </tr>
  </tbody>
</table>

Nu willen we dus onbeperkt rijen toe kunnen voegen aan deze tabel en dan het liefst zonder de pagina te verversen. Omdat ik toch al gebruik maak van Prototype heb ik besloten dat gewoon te gebruiken.
Waarschijnlijk zijn er ook andere methoden om dit op te lossen en misschien is mijn methode niet de beste (waarschijnlijk niet, ik ben niet zo’n Javascript-held eigenlijk), maar deze methode werkte goed voor mij. Eerst had ik wat problemen in Safari, maar dit is getest (en werkend bevonden) in IE6, IE7, Firefox 2, Safari 2 en Opera 9.

Om te beginnen is het natuurlijk belangrijk dat je Prototype download, zelf heb ik gebruik gemaakt van versie 1.5.0 en dat werkte prima.

De volgende stap is onze eigen javascript, wat er zo uit kwam te zien:

function addField()
{
  url = 'addrow.php';
  $( 'add-new-row' ).onclick = function()
  {
    rows = $( 'mybody' ).getElementsByTagName( 'tr' );
    id = rows.length + 1;
    doRequest( url, id, 'mybody' );
  }
}

function doRequest( url, id, type )
{
  pars = 'id=' + id +  '&type=' + type;
  addTo = type;
  var myAjax = new Ajax.Request(
                            			url,
                            			{
                            				method: 'get',
                                    parameters: pars,
                            				onComplete: showResponse
                            			});
}

function showResponse(originalRequest)
{
  new Insertion.Bottom(addTo, originalRequest.responseText );
}

Event.observe(window, 'load', addField, false);

De functie addField() wordt aangeroepen als er geklikt wordt op de link die we straks in de HTML zullen zien. Hij telt alle rijen in de tabel, telt er één bij op en je hebt een nieuw id. Misschien niet altijd wat je wilt, maar voor het voorbeeld goed denk ik.

De functie doRequest accepteert 3 parameters: url (dit is het path naar ons PHPscript), id (dit is het nieuwe id) en type (het id van ons tbody). Vervolgens bouwt het een URL op die er uiteindelijk ongeveer zo uit zou zien: phpscript.php?id=onsid&type=onstype.

Als het PHPscript de output heeft teruggestuurd, wordt showResponse() aangeroepen die een nieuwe rij toevoegt aan het einde van de tbody.

Eigenlijk is de echte versie iets uitgebreider, maar dit is denk ik het stukje wat er toe doet voor dit artikel.
Nu de HTML (uiteraard ook aardig gestripped):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Dynamisch rijen toevoegen</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="addrow.js"></script>
  </head>
  <body>
    <table>
      <tbody id="mybody">
        <tr>
          <td>1.1</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>2.1</td>
          <td>2.2</td>
        </tr>
        <tr>
          <td>3.1</td>
          <td>3.2</td>
        </tr>
      </tbody>
    </table>
    <p><a href="#" id="add-new-row">Nog een rij</a></p>
  </body>
</html>

En dan ten slotte het PHP-script:

  <?if( ctype_digit( $_GET[ 'id' ] ) ):?>
    <tr>
      <td><?=$_GET[ 'id' ]?>.1</td>
      <td><?=$_GET[ 'id' ]?>.2</td>
    </tr>
  <?endif?>

Heel kort, maar effectief. Eerst checken we even of het ID wel een nummer is (in de praktijk wil je misschien nog meer security checks doen) en vervolgens voegen we een rij toe met 2 cellen. Uiteraard heb ik even een demo online gezet om te zien dat het ook werkt in de praktijk.

Voor geïnteresseerden is de volledige code ook te downloaden.

Nog één belangrijke tip: het is heel belangrijk dat je de rij toevoegt aan je <tbody /> en niet aan je <table />. Het heeft mij behoorlijk wat tijd gekost om dat te ontdekken…

« Het gebruik van Swift Mailer
Besturingssystemen het raam uit, Firefox het nieuwe platform? »

01-04-2007 15:36 | PHP, Programmeren, Werk, web | Reacties (RSS 2.0) | Trackback

Eén reactie to “Nieuwe rij toevoegen in tabel met prototype”

  1. Takenlijst met “toevoegen” en “verwijderen” maken met prototype | Digicted:
    07-04-2007 13:54

    [...] Eerder deze week schreef ik al over het toevoegen van een nieuwe rij met prototype waar ik uitlegde hoe je een tabel gemakkelijk dynamisch kunt uitbreiden met behulp van wat Javascript. Dit keer gaan we weer aan de slag met prototype, maar maken we een dynamische todolist. We willen gebruikers items laten toevoegen en verwijderen en vervolgens opslaan. Voor het gemak heb ik hier een plat tekstbestand voor gebruikt, maar het is natuurlijk ook mogelijk om het naar een database te schrijven. Laten we maar weer beginnen de HTML te schrijven: [...]

Reageer