Ajax Warenkorb ohne Formular updaten

litterauspirna · 14.01.2011, 15:45

Hallo,

so richtig weis ich grad nicht wie ich da ran gehen soll.

Ich bin dabei einen kleinen Warenkorb zu programmieren und das mit Ajax. Der Warenkorb sieht so aus.

Code:

<div id="wk">
    <div id="artId_1">
        <p class="wkArtName">testartikel_1</p>
        <p class="wkArtAnz">3</p>
        <p class="wkArtPreis">345.00</p>
        <p class="up">-</p>
        <p class="down">+</p>
        <p class="edit">edit</p>
        <p style="clear: left;"></p>
    </div>
    <div id="artId_2">
        <p class="wkArtName">testartikel_2</p>
        <p class="wkArtAnz">1</p>
        <p class="wkArtPreis">35.00</p>
        <p class="up">-</p>
        <p class="down">+</p>
        <p class="edit">edit</p>
        <p style="clear: left;"></p>
    </div>
    <div id="artId_3">
        <p class="wkArtName">testartikel_3</p>
        <p class="wkArtAnz">14</p>
        <p class="wkArtPreis">5.00</p>
        <p class="up">-</p>
        <p class="down">+</p>
        <p class="edit">edit</p>
        <p style="clear: left;"></p>
    </div>
    <div id="artId_4">
        <p class="wkArtName">testartikel_4</p>
        <p class="wkArtAnz">6</p>
        <p class="wkArtPreis">12.00</p>
        <p class="up">-</p>
        <p class="down">+</p>
        <p class="edit">edit</p>
        <p style="clear: left;"></p>
    </div>
</div>

So meine Frage ist wie müsste ich nun die Elemente ansprechen über DOM Methoden um die Werte entsprechend eine Artikel ID an die DB zu senden und dann ein Update auf den Artikel im Warenkorb zu machen.

Die Ids artId_... entsteht dynamisch. Die Zahl in der ID mir raus picken ist nicht das Problem, aber ich weis nicht wirklich wie ich beim drücken auf das + oder - oder Edit den richtigen Artikel ansprechen kann.

Ich will es vermeiden Events als HTML Attribute in einem HTML Tag zu verwenden.

Über ein paar Tipps zum vorgehen wäre ich dankbar.

Vielen Dank Gruß Litter

EDIT

Ich habe das mal so zum testen versucht, aber da bekomme ich den Wert eines jeden P Elements, weil jedes P Element ist ja Knotenelement.

Code:

var testFunc = function ( pEvent ) {
    pEvent = pEvent || window.event;
    var target = pEvent.target || pEvent.srcElement;
    
    var testAusg = target.lastChild.nodeValue;
    
    alert( testAusg );
}

Das ist aber nicht mein Ziel so wirklich.

litterauspirna · 14.01.2011, 16:28

So also ich habe erst einmal einen Ansatz gefunden. Wenn noch Probleme aufkommen sollten melde ich mich wieder, ansonsten sende ich den Ergebniscode und markiere den Thread als erledigt.

da.eXecutoR · 14.01.2011, 17:04

Ich würde dir da zu jquery raten. Damit kannst du ganz leicht im DOM navigieren und entsprechend manipulieren.

Da könntest du dann zum Beispiel wie folgt vorgehen:

Code:

$(".up").click(function(){
  alert($(this).parent().attr("id");
})

http://jquery.com/

Gruss

eXe

litterauspirna · 15.01.2011, 10:55

Guten Morgen Leute,

also durch meine Nodes kann ich mich durchnavigieren und bekomme auch die korrekten Werte geliefert, dass konnt ich in Testausgaben nachvollziehen.

Nun aber funtioniert mein Ajax Request scheinbar nicht. Aus dem Debugger im FF bin ich nicht wirklich schlaue geworden. Und die Fehlerkonsole wirft keinen Fehler oder sonstiges.

Hier mein Js Code für das Ajax und updaten des Warenkorbes.

Code:

function createXMLHttpRequest () {
    var req;
                
    if ( window.XMLHttpRequest ) {
        try {
            req = new XMLHttpRequest();
        } catch ( e ) {
            req = false;
        }
    } else if ( window.ActiveXObject ) {
        try {
            req = new ActiveXObject( "Microsoft.XMLHTTP" );
        } catch ( e ) {
            req = false;
        }
    }
            
    return req;
}

function postWkRequest ( pEvent ) {
    pEvent = pEvent || window.event;
    var target = pEvent.target || pEvent.srcElement;
    var ajaxRequest = new createXMLHttpRequest();
    var editArtElement = target.lastChild.nodeValue;
    var ajaxString = '';
    
    if ( editArtElement == "-" ) {
        var artPreis = target.previousSibling.lastChild.nodeValue;
        var artAnz = target.previousSibling.previousSibling.lastChild.nodeValue;
        var artId = target.parentNode.getAttribute( "id" ).split( "_" )[1];
        
        ajaxRequest.onreadystatechange = function () {
            
            if ( this.readyState == 4 && this.status == 200 ) {
                ajaxString = 'artANZ=' + artAnz + 'artPreis=' + artPreis + 'idArt=' + artId + 'updatePart=' + editArtElement;
            }
        }
        
        ajaxRequest.open( "POST", "warenkorb_anz.php", true );
        ajaxRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
        ajaxRequest.send( ajaxString );
    }
    
    if ( editArtElement == "+" ) {
        var artPreis = target.previousSibling.previousSibling.lastChild.nodeValue;
        var artAnz = target.previousSibling.previousSibling.previousSibling.lastChild.nodeValue;
        var artId = target.parentNode.getAttribute( "id" ).split( "_" )[1];
        
        ajaxRequest.onreadystatechange = function () {
            
            if ( this.readyState == 4 && this.status == 200 ) {
                ajaxString = 'artANZ=' + artAnz + 'artPreis=' + artPreis + 'idArt=' + artId + 'updatePart=' + editArtElement;
            }
        }
        
        ajaxRequest.open( "POST", "warenkorb_anz.php", true );
        ajaxRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
        ajaxRequest.send( ajaxString );
    }
}

Und hier meine PHP Datei.

PHP-Code:

  <?php
/*
*
*    wenn - dann artikelnmenge und preis im warenkorb minimieren
*    wenn + dann artikelnmenge und preis im warenkorb erhöhen
*
*/
if ( isset( $_POST['updatePart'] ) && $_POST['updatePart'] == "-" ) {
    $qustr_WkUpdate = "
                        UPDATE
                            `warenkorb`
                        SET
                            art_anz = art_anz - ':artAnz',
                            art_preis = art_preis - ':artPreis'
                        WHERE
                            id_wk_art = ':idArt'
                        ";
    $qu_WkUpdate = $pdo->prepare( $qustr_WkUpdate );
    $qu_WkUpdate->bindParam( ":artAnz", $_POST['art_anz'] );
    $qu_WkUpdate->bindParam( ":artPreis", $_POST['art_preis'] );
    $qu_WkUpdate->bindParam( ":idArt", $_POST['id_art'] );
    $qu_WkUpdate->execute();
} else if ( isset( $_POST['updatePart'] ) && $_POST['updatePart'] == "+" ) {
    $qustr_WkUpdate = "
                        UPDATE
                            `warenkorb`
                        SET
                            art_anz = art_anz + ':artAnz',
                            art_preis = art_preis + ':artPreis'
                        WHERE
                            id_wk_art = ':idArt'
                        ";
    $qu_WkUpdate = $pdo->prepare( $qustr_WkUpdate );
    $qu_WkUpdate->bindParam( ":artAnz", $_POST['art_anz'] );
    $qu_WkUpdate->bindParam( ":artPreis", $_POST['art_preis'] );
    $qu_WkUpdate->bindParam( ":idArt", $_POST['id_art'] );
    $qu_WkUpdate->execute();
}

$arr_WkData = array();

//warenkorbdaten auslesen und in array schreiben
$qustr_Wk = "
        SELECT
            id_wk_art,
            sid_id,
            art_name,
            art_anz,
            art_preis,
            art_dell
        FROM
            `warenkorb`
        WHERE
            art_dell = 0
        ";
$qu_Wk = $pdo->query( $qustr_Wk );

while ( $res_WkData = $qu_Wk->fetch( PDO::FETCH_ASSOC ) ) {
    $arr_WkData[] = array(
                            'wk_artId' => $res_WkData['id_wk_art'],
                            'wk_artikel' => $res_WkData['art_name'],
                            'wk_artAnz' => $res_WkData['art_anz'],
                            'wk_artPreis' => $res_WkData['art_preis']
                        );
}

//warenkorbausgabe
foreach ( $arr_WkData as $wkKey => $wkValue ) {
    echo '<div id="artId_'.$arr_WkData[$wkKey]['wk_artId'].'">';
        echo '<p class="wkArtName">';
            echo $arr_WkData[$wkKey]['wk_artikel'];
        echo '</p>';
        
        echo '<p class="wkArtAnz">';
            echo $arr_WkData[$wkKey]['wk_artAnz'];
        echo '</p>';
        
        echo '<p class="wkArtPreis">';
            echo $arr_WkData[$wkKey]['wk_artPreis'];
        echo '</p>';
        
        echo '<p class="up">';
            echo '-';
        echo '</p>';
        
        echo '<p class="down">';
            echo '+';
        echo '</p>';
        
        echo '<p class="edit">';
            echo 'edit';
        echo '</p>';
        
        echo '<p style="clear: left;"></p>';
    echo '</div>';
}
?>

Und hier meine index.php

PHP-Code:

  <?php
error_reporting( E_ALL | E_STRICT );
ini_set( "display_errors", TRUE );

$pdo = new PDO( "mysql:host=localhost;dbname=ajax_wk_test", "root" );
$pdo->exec( "SET CHARACTER SET utf8" );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <script type="text/javascript" src="ajax.js"></script>
        <script type="text/javascript" src="ajax_wk.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById( "wk" ).onclick = postWkRequest;
            }
        </script>
        <link href="ajax_wk.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wk">
            <?php include_once( 'warenkorb_anz.php' ); ?>
        </div>
    </body>
</html>

Meine Frage und Problem ist kurz und knapp, warum werden die Werte nicht mit dem Ajax Request an die PHP DAtei gesendet und somit auch das Update nicht gemacht?

Vielen Dank für eure Zeit und Hilfe mfg Litter

[EDIT]
Ich habe noch mal einen Versuch gemacht das Problem im Debugger nachzuvollziehen und bekomme folgende Fehlermeldung von PHP Seite aber.

Zitat:

" Fatal error: Call to a member function query() on a non-object in C:\WebProjekte\Parkatikum_Sedna_Soft\ajax_uebun gen\warenkorb\warenkorb_anz.php on line 56

Diese kommt aber nur wenn ich einen Ajax Request absenden will. Wenn ich nur die Tabelle auslese ohne etwas zu machen bekomme ich diese Fehlermeldung nicht.

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
[Erledigt] Ajax POST Formular Fehlersuche	moerkel	JavaScript, Ajax und mehr	1	03.01.2011 11:25
[Erledigt] Javascript / Ajax Formular ist immer ($num_rows==0)	moerkel	JavaScript, Ajax und mehr	2	05.12.2010 10:36
[Erledigt] Array aus Formular mit Ajax an PHP übergeben	Paul.Schramenko	JavaScript, Ajax und mehr	3	24.06.2010 14:56
Ajax Anwendung, reines Ajax oder Ajax und Html	jackie1983	JavaScript, Ajax und mehr	5	09.02.2010 16:50
[Erledigt] mehrere SQL DATEN per Formular updaten	ctacont	PHP Tipps 2009	10	03.12.2009 15:02
formular mit ajax einblenden und sql-abfrage ausführen!	wisler	JavaScript, Ajax und mehr	3	10.11.2009 10:12
Ajax warenkorb mit Session	Destruction	PHP Tipps 2009	20	15.09.2009 23:29
[Erledigt] Warenkorb - Artikel hinzufügen über Ajax	Destruction	JavaScript, Ajax und mehr	2	06.09.2009 13:23
Ueber ein Formular die Datenbank updaten	Dant3r	PHP Tipps 2009	30	30.04.2009 16:23
click auf <td> mit anschließendem Ajax Formular	amigo	JavaScript, Ajax und mehr	1	20.04.2009 01:26
Formular mit ajax erweitern	obi	JavaScript, Ajax und mehr	7	31.03.2009 23:58
Ajax Formular problem mit eingabe	themonk	JavaScript, Ajax und mehr	2	01.11.2008 20:25
[Erledigt] Formular mit vielen Feldern mit Ajax weitergeben	themonk	JavaScript, Ajax und mehr	11	18.10.2008 19:59
Ajax Formular	Chrischnian	HTML, Usability und Barrierefreiheit	8	29.05.2006 17:58
Datensatz mit formular Updaten	CityHubter	PHP Tipps 2007	4	30.12.2005 10:12

14.01.2011, 15:45
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ajax Warenkorb ohne Formular updaten Hallo, so richtig weis ich grad nicht wie ich da ran gehen soll. Ich bin dabei einen kleinen Warenkorb zu programmieren und das mit Ajax. Der Warenkorb sieht so aus. Code: <div id="wk"> <div id="artId_1"> <p class="wkArtName">testartikel_1</p> <p class="wkArtAnz">3</p> <p class="wkArtPreis">345.00</p> <p class="up">-</p> <p class="down">+</p> <p class="edit">edit</p> <p style="clear: left;"></p> </div> <div id="artId_2"> <p class="wkArtName">testartikel_2</p> <p class="wkArtAnz">1</p> <p class="wkArtPreis">35.00</p> <p class="up">-</p> <p class="down">+</p> <p class="edit">edit</p> <p style="clear: left;"></p> </div> <div id="artId_3"> <p class="wkArtName">testartikel_3</p> <p class="wkArtAnz">14</p> <p class="wkArtPreis">5.00</p> <p class="up">-</p> <p class="down">+</p> <p class="edit">edit</p> <p style="clear: left;"></p> </div> <div id="artId_4"> <p class="wkArtName">testartikel_4</p> <p class="wkArtAnz">6</p> <p class="wkArtPreis">12.00</p> <p class="up">-</p> <p class="down">+</p> <p class="edit">edit</p> <p style="clear: left;"></p> </div> </div> So meine Frage ist wie müsste ich nun die Elemente ansprechen über DOM Methoden um die Werte entsprechend eine Artikel ID an die DB zu senden und dann ein Update auf den Artikel im Warenkorb zu machen. Die Ids artId_... entsteht dynamisch. Die Zahl in der ID mir raus picken ist nicht das Problem, aber ich weis nicht wirklich wie ich beim drücken auf das + oder - oder Edit den richtigen Artikel ansprechen kann. Ich will es vermeiden Events als HTML Attribute in einem HTML Tag zu verwenden. Über ein paar Tipps zum vorgehen wäre ich dankbar. Vielen Dank Gruß Litter EDIT Ich habe das mal so zum testen versucht, aber da bekomme ich den Wert eines jeden P Elements, weil jedes P Element ist ja Knotenelement. Code: var testFunc = function ( pEvent ) { pEvent = pEvent \|\| window.event; var target = pEvent.target \|\| pEvent.srcElement; var testAusg = target.lastChild.nodeValue; alert( testAusg ); } Das ist aber nicht mein Ziel so wirklich. __________________ 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 Geändert von litterauspirna (14.01.2011 um 16:04 Uhr).


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

14.01.2011, 16:28
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	So also ich habe erst einmal einen Ansatz gefunden. Wenn noch Probleme aufkommen sollten melde ich mich wieder, ansonsten sende ich den Ergebniscode und markiere den Thread als erledigt. __________________ 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

14.01.2011, 17:04
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Ich würde dir da zu jquery raten. Damit kannst du ganz leicht im DOM navigieren und entsprechend manipulieren. Da könntest du dann zum Beispiel wie folgt vorgehen: Code: $(".up").click(function(){ alert($(this).parent().attr("id"); }) http://jquery.com/ Gruss eXe __________________ It's not a bug. It's a feature!