element ids nach ajax request ansprechen für weitere actions?

litterauspirna · 17.01.2012, 10:23

Hallo Leute,

ich habe in einem Adminbereich eine User Suche die per Ajax gesteuert wird, dass klappt auch super wie es soll.

Ich bekomme nun in einer Tabelle meine Ergebnisse ausgeliefert. Diese wird aber eben erst ausgeliefert wenn ein Ajax REquest gefeuert wurde.

In der Tabelle habe ich nun Icons von denen weitere Aktionen ausgehen sollen.

Hier mal ein Auszug der Tabelle nach dem Ajax Request.

PHP-Code:

 
<td>
            <?php if($value['free'] == 1): ?>
                <img id="unlock_<?php echo intval($key); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/unlock.png" alt="unlock" title="frei" />
            <?php else: ?>
                <img id="lock_<?php echo intval($key); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/lock.png" alt="lock" title="frei" />
            <?php endif; ?>
                <img id="profile_<?php echo intval($value['id_user']); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/account.png" alt="profile" title="Profil" style="margin-left: 5px;" />
                <img id="stat_<?php echo intval($value['id_user']); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/statistics.png" alt="statistics" title="statistics" style="margin-left: 5px;" />
            </td>

Das ist die letzte Spalte einer Zeile.

Die Id der Tabelle ist erst nach dem Ajax Request bekannt, nun will ich von da aus einen Event feuern was natürlich nicht klappt weil die ID der Tabelle noch null ist, auch nach dem Event feuern.

Wie kann ich es erreichen das die ID der Tabelle nach dem Ajax Request im Dokument bekannt ist, so das ich diese für weitere Aktionen verwenden kann?

Mein Javascript Testcode.

Code:

var profileIds = function()
{
    var profiles = new Array();
    var ids = document.getElementById('user_list_table').getElementsByTagName('img');
    
    for(var i = 0; i < ids.length; i++) {
        
        if(ids[i].getAttribute('id').split('_')[0] == 'profile') {
            profiles[i] = ids[i];
        }
    }
    
    return profiles;
}

var showProfile = function(pEvent)
{
    var conf = eventValues(pEvent);
    var target = conf.currentElem.t;
    var prof = profileIds();
    
    alert(prof.length);
}

function showUserDetails(pEvent)
{
//    var prof = profileIds();
    
    if(document.addEventListener) {
        document.getElementById('user_list_table').addEventListener('click', showProfile, false);
//        for(var i = 0; i < prof.length; i++) {
//            document.getElementById(prof[i].getAttribute('id')).addEventListener('click', showProfile, false);
//        }
    } else {
        
    }
}

Das auskommentierte bitte ignorieren.

Danke für eure Antworten und Hilfe.

Gruß der Litter

Dark Guardian · 17.01.2012, 11:33

Zitat:

Wie kann ich es erreichen das die ID der Tabelle nach dem Ajax Request im Dokument bekannt ist, so das ich diese für weitere Aktionen verwenden kann?

Wenn du den HTML Code ins Dokument eingefügt hast sind die Ids "bekannt".

Hast du ggf. vergessen das Ajax-Requests asynchron laufen? D.h. die JavaScript Ausführung geht weiter während der Request gemacht wird.

litterauspirna · 17.01.2012, 11:46

Zitat:

Zitat von Dark Guardian

Wenn du den HTML Code ins Dokument eingefügt hast sind die Ids "bekannt".

Hast du ggf. vergessen das Ajax-Requests asynchron laufen? D.h. die JavaScript Ausführung geht weiter während der Request gemacht wird.

Aber warum wirft mir die Fehlerkonsole dann die Meldung das die ID der Tabelle null ist? Nach und vor dem absenden des Requests.

Code:

var searchByKey = function(pEvent)
{
    var ajaxRequest = new createXMLHttpRequest();
    var conf = eventValues(pEvent);
    var target = conf.currentElem.t;
    var searchString = '&name=' + target.value;

    ajaxRequest.onreadystatechange = function () {
        
        if ( this.readyState == 4 && this.status == 200 ) {
            document.getElementById( "user_result_list" ).innerHTML = ajaxRequest.responseText;
        }
    }
    
    ajaxRequest.open("GET", "http://localhost/WendtNeu/index.php?user/Ajax/usersearch/" + searchString);
    ajaxRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
    ajaxRequest.send( null );
}

Das ist der JS Code der den Request sendet. Danach wird die Tabelle auch korrekt ins Html Dokument eingefügt, dass konnte ich mit Firebug nachprüfen.
Nur wenn ich ein Event von der ID der Tabelle ausführen will, dann bekomme ich die Meldung das diese null ist.

Dark Guardian · 17.01.2012, 17:37

Code:

    ajaxRequest.onreadystatechange = function () {
        
        if ( this.readyState == 4 && this.status == 200 ) {
            document.getElementById( "user_result_list" ).innerHTML = ajaxRequest.responseText;
        }
    }

Erst nachdem das Event eingetreten ist sind die Ids bekannt.

Code:

    ajaxRequest.send( null );

Die JavaScript Ausführung geht aber nach diesem Befehl weiter. D.h.

Code:

searchByKey();
profileIds();

sorgt dafür das profileIds(); ausgeführt wird bevor der Request beendet ist und die Tabelle eingefügt wurde.

Code:

        if ( this.readyState == 4 && this.status == 200 ) {
            document.getElementById( "user_result_list" ).innerHTML = ajaxRequest.responseText;
            profileIds();
        }

sollte also funktionieren.

litterauspirna · 17.01.2012, 18:35

Ok, dass werde ich so probieren.

Ich glaube ich weiß auch jetzt durch deine kurze Erklärung wo mein Fehler liegt. Ich habe das profileIds(); versucht dann im window.onload aufzurufen und da kann die ID natürlich nicht bekannt sein.

Vielen Dank.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit MVC und Ajax Request, responseText kommt als gesamtes Layout zurück	litterauspirna	PHP Einsteiger	39	30.12.2011 20:12
Läuft der Ajax Request weiter auch wenn der Browser geschlossen wird?	<Hotte>	JavaScript, Ajax und mehr	2	15.11.2011 08:25
[Erledigt] Mit Prototype Select Element ansprechen	eisenhans	JavaScript, Ajax und mehr	6	10.11.2011 17:48
[Erledigt] jquery ajax request ist immer null	taurus	JavaScript, Ajax und mehr	3	29.08.2011 00:00
[Erledigt] Einzelnes Element ansprechen	berti	JavaScript, Ajax und mehr	14	14.06.2011 23:37
[Erledigt] Ajax Request an Script schicken, Zend FW	Cronkalonca	PHP Einsteiger	10	17.05.2011 19:44
Fusszeile verschwindet, Leerzeile fehlt	ariane	PHP Einsteiger	4	17.04.2011 18:21
SEDO Ajax Post Request mit PHP curl	Lightware	PHP Einsteiger	2	31.03.2011 12:34
[Erledigt] Jquery AJAX request wird erst am Ende ausgeführt	PiXeL1337	JavaScript, Ajax und mehr	10	24.02.2011 09:02
[Erledigt] AJAX Request funktioniert nicht	Nickstar	JavaScript, Ajax und mehr	6	10.11.2010 20:21
[Erledigt] Ajax Request mit PHP Registry?	tarian	JavaScript, Ajax und mehr	12	16.09.2010 13:17
[Erledigt] leeres request trotz übergebenen Daten AJAX	mupilz	JavaScript, Ajax und mehr	6	06.04.2010 06:55
[Erledigt] AJAX interpretRequest läuft nur mit alert()	Buschdieb	JavaScript, Ajax und mehr	14	26.08.2009 14:04
[Erledigt] Ajax Request Datei nicht direkt öffnen	Heinerlutscher	JavaScript, Ajax und mehr	5	02.03.2009 18:10
innerHTML funktioniert nicht bei AJAX request	Plague	HTML, Usability und Barrierefreiheit	1	21.12.2006 14:30

17.01.2012, 10:23
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	element ids nach ajax request ansprechen für weitere actions? Hallo Leute, ich habe in einem Adminbereich eine User Suche die per Ajax gesteuert wird, dass klappt auch super wie es soll. Ich bekomme nun in einer Tabelle meine Ergebnisse ausgeliefert. Diese wird aber eben erst ausgeliefert wenn ein Ajax REquest gefeuert wurde. In der Tabelle habe ich nun Icons von denen weitere Aktionen ausgehen sollen. Hier mal ein Auszug der Tabelle nach dem Ajax Request. PHP-Code: <td> <?php if($value['free'] == 1): ?> <img id="unlock_<?php echo intval($key); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/unlock.png" alt="unlock" title="frei" /> <?php else: ?> <img id="lock_<?php echo intval($key); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/lock.png" alt="lock" title="frei" /> <?php endif; ?> <img id="profile_<?php echo intval($value['id_user']); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/account.png" alt="profile" title="Profil" style="margin-left: 5px;" /> <img id="stat_<?php echo intval($value['id_user']); ?>" src="http://<?php echo $_SERVER['SERVER_NAME']; ?>/WendtNeu/public/images/statistics.png" alt="statistics" title="statistics" style="margin-left: 5px;" /> </td> Das ist die letzte Spalte einer Zeile. Die Id der Tabelle ist erst nach dem Ajax Request bekannt, nun will ich von da aus einen Event feuern was natürlich nicht klappt weil die ID der Tabelle noch null ist, auch nach dem Event feuern. Wie kann ich es erreichen das die ID der Tabelle nach dem Ajax Request im Dokument bekannt ist, so das ich diese für weitere Aktionen verwenden kann? Mein Javascript Testcode. Code: var profileIds = function() { var profiles = new Array(); var ids = document.getElementById('user_list_table').getElementsByTagName('img'); for(var i = 0; i < ids.length; i++) { if(ids[i].getAttribute('id').split('_')[0] == 'profile') { profiles[i] = ids[i]; } } return profiles; } var showProfile = function(pEvent) { var conf = eventValues(pEvent); var target = conf.currentElem.t; var prof = profileIds(); alert(prof.length); } function showUserDetails(pEvent) { // var prof = profileIds(); if(document.addEventListener) { document.getElementById('user_list_table').addEventListener('click', showProfile, false); // for(var i = 0; i < prof.length; i++) { // document.getElementById(prof[i].getAttribute('id')).addEventListener('click', showProfile, false); // } } else { } } Das auskommentierte bitte ignorieren. Danke für eure Antworten und Hilfe. Gruß der Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.01.2012, 17:37
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Code: ajaxRequest.onreadystatechange = function () { if ( this.readyState == 4 && this.status == 200 ) { document.getElementById( "user_result_list" ).innerHTML = ajaxRequest.responseText; } } Erst nachdem das Event eingetreten ist sind die Ids bekannt. Code: ajaxRequest.send( null ); Die JavaScript Ausführung geht aber nach diesem Befehl weiter. D.h. Code: searchByKey(); profileIds(); sorgt dafür das profileIds(); ausgeführt wird bevor der Request beendet ist und die Tabelle eingefügt wurde. Code: if ( this.readyState == 4 && this.status == 200 ) { document.getElementById( "user_result_list" ).innerHTML = ajaxRequest.responseText; profileIds(); } sollte also funktionieren. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

17.01.2012, 18:35
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ok, dass werde ich so probieren. Ich glaube ich weiß auch jetzt durch deine kurze Erklärung wo mein Fehler liegt. Ich habe das profileIds(); versucht dann im window.onload aufzurufen und da kann die ID natürlich nicht bekannt sein. Vielen Dank. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de