Ajax.Updater und Ladetext/Grafik Problem

  • Ajax.Updater und Ladetext/Grafik Problem

    Hallo allerseits,

    ich hab ein kleines nerviges Problem. Undzwar hab ich mir zu Übungszwecken eine kleine Datenbank gebastelt und das ganze mit PHP + Prototype AJAX programmiert.

    Das Hauptscript (.php):

    Quellcode

    1. CatEdit = function(cid) {
    2. var element = 'cat';
    3. var page = 'cat';
    4. $('CatEdit').innerHTML = 'laden...';
    5. Element.show( $('CatEditLoad') );
    6. new Ajax.Updater(element, page + '.php',
    7. {
    8. method:'get',
    9. parameters: { edit: cid },
    10. asynchronous:true,
    11. onComplete: function(){ Element.hide( $('CatEditLoad') ); }
    12. }
    13. );
    14. }
    Alles anzeigen


    Hier wird der Content reingeladen:

    Quellcode

    1. <div id="cat"></div>


    Hier die cat.php mit dem Content:
    Die MySQL-Queries ect lass ich mal weg... da liegt nicht das Prob..

    Quellcode

    1. <?php
    2. //Daten per For-Schelife für jeden Eintrag auslesen...
    3. for($i=0;$i<$num;$i++)
    4. {
    5. $cat_id = mysql_result($result, $i, "CID");
    6. $cat_name = mysql_result($result, $i, "Cat");
    7. ?>
    8. <!--AUSGABE: Hier werden nun die aus der Datenbank ausgelesenen Daten in eine HTML-Tabelle eingefügt.. -->
    9. <div class="reihe">
    10. <div class="spalte1"><?php echo $cat_id;?></div>
    11. <div class="spalte2"><?php echo $cat_name;?></div>
    12. <div class="spalte3">
    13. <span id="CatEdit"><a href="#" title="Editieren von Cat=<?php echo $cat_id;?>" onclick="CatEdit(<?php echo $cat_id;?>);">edit</a>
    14. <img id="CatEditLoad" src="load.gif" style="display:none;"></span>
    15. </div>
    16. <div class="spalte4"><span><a href="?delete=<?php echo $cat_id;?>">delete</a></span></div>
    17. </div>
    18. <?php
    19. // Ende der FOR-Schleife
    20. }
    22. if(isset($_GET['edit'])) {
    23. ?>
    24. <br>
    25. <p>Editieren von <? while($row = mysql_fetch_object($result2)) { echo $row->cat; } ?> mit der CID = <? echo $edit_id; ?></p>
    26. <?
    27. }
    28. ?>
    Alles anzeigen


    Bei klick auf "edit" in Spalte3 wird also unterhalt der Tabelle ein Test-Satz ausgeben. Funktioniert auch alles soweit. Hab das mal als Screenshot angehängt:


    Das Problem ist der Ladetext sowie die Ladegrafik, die anstelle des Textes "edit" dann erscheint, wenn der Testsatz unten geladen wird.
    Wie auf dem Screenshot zu sehen ist, wird..
    a) Der Ladetext "laden.." in der 1. Reihe ausgegeben.
    b) Die Ladegrafik allerdings in der 2. Reihe..

    Obwohl ich z.B. auf den Eintrag in der 3. Reihe geklickt habe! Und da blick ich grade nicht durch. Das scheint irgendwie willkürlich jedesmal an anderer Position angezeigt zu werden.
    Nur nie zusammen in der selben Reihe.. und schon garnicht dort, wo ich auch draufgeklickt habe.

    Wo liegt hier der Fehler? ?(

    Bin für jeden Tipp dankbar.

    Beste Grüße
    Pat
    Bilder

    • ajaxprob.jpg

      11,98 kB, 456×203, 396 mal angesehen

  • validier deinen HTML Quelltext mal mit validator.w3.org
    Du kannst eine ID nur einmal vergeben.


    musst dir schon was anderes überlegen...
    Entweder du nummerierst die ids durch CatEdit1, CatEdit2, CatEdit3, ... oder du übergibst eine Referenz auf das Elternelement.

    Quellcode

    1. <div style="background-color:green"><div style="background-color:green" onclick="this.parentNode.innerHTML = '';"></div></div>