Javascript/JQ Daten auslesen und schreiben

Agosphere · 08.01.2014

Guten Tag,

ich habe quasi eine Art kleines Shopsystem zu bauen.
Vorweg: Ich bin noch recht neu im Bereich Javascript/JQ, bin entsprechend unwissend.

Es gibt die Produkte und einen Warenkorb.
Klickt man bei dem Produkt auf "dem Warenkorb hinzufügen", soll Produktname, Preis und die zuvor gewählte Anzahl ausgelesen und im Warenkorb-Reiter in eine Liste geschrieben werden.

Mit welchen Befehlen ist das umsetzbar?

Ich wäre euch riesig dankbar. :- )

Duddle · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Es gibt keinen Befehl für "füge Produktname, Preis und Anzahl in meinen Warenkorb-Reiter ein", so funktionieren Programmiersprachen nicht.

Wie immer gibt es zwei Ansätze: entweder eignest du dir Wissen an oder du kaufst es dir ein. Für ersteres gibt es unzählige Tutorials und , für letzteres andere Plattformen.

Wenn du konkrete Fragen bzgl. deines Ansatzes oder Probleme beim Umsetzen einer Funktion hast, immer her damit. Ein "macht mir mal" ist aber nicht Aufgabe dieses Unterforums.

Duddle

Agosphere · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Es gibt also keine/n Befehl/Funktion, Inhalt aus einer Div auszulesen und diesen an anderer Stelle einzufügen?
Mein erster Ansatz/Gedanke:

script im head
$('.zuwarenkorb').click(function() {
$('.warenkorb').append($('#produktname').text());
});

ODER

script in warenkorb
$('.zuwarenkorb').click(function() {
document.write('<p>' + $('#wrapper_content h1').text() + '</p>');
});

mit document.write() überschreibt er mir aber halt alles.

bei der ersten Variante macht er gar nichts.

hier z.b. funktioniert sowas: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append

...oder beim klicken die Werte in ein Array laden und dieses im Warenkorb ausgeben? Aber ändert sich auch nicht viel, mhm?

Duddle · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

$('.zuwarenkorb').click(function() {
$('.warenkorb').append($('#produktname').text());
});

Der Ansatz sieht doch gut aus.

bei der ersten Variante macht er gar nichts.

Zeig den restlichen Code/das HTML oder erstelle ein fiddle, sonst kann man nur raten.

Duddle

Agosphere · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Habe den Fehler gefunden - hatte dem .warenkorb aus Versehen eine andere Klasse zugewiesen und konnte daher natürlich keinen von JQ geschriebenen Inhalt sehen... autsch!

Also nun funktioniert es schonmal, dass er die drei Infos des Produkts ausliest und in eine Tabelle im Warenkorb einfügt.

Nun muss ich es noch hinbekommen, dass er auch immer die Daten des gerade angeklickten Produkts hinzufügt und nicht immer die selben aus dem Muster-Exemplar.

das ginge mit .parent(), oder?

Die bisherige Lage (Anzahl/Menge noch nicht mit dabei):

Mein Muster sieht so aus:

HTML:

 <div class="wrapper_product">
        <img src="">
        <div class="wrapper_text">
            <h1> Produktname </h1>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="wrapper_action">
           <div class="price"> <li> 9,99€ </li></div>
           <div class="value"> <li> in den <br> Abokorb  </li> </div>
           <div class="info"> <li> zum Produkt </li> </div>
       </div>
 </div>

der Code im Head so:

Code:

$('.value li').click(function() {
$('#abo_shop_con table').append('<tr><td>' + $('#wrapper_product h1').text() + '</td><td>' + $('#wrapper_product value li').text() + '</td><td>' + $('#wrapper_product price li').text() + '</td></tr>');
});

der Warenkorb

HTML:

<div class="abo_button content" id="abo_shop_con">
       <table>
       	<tr>
            <td> Produktname </td>
            <td> Menge </td>
            <td> Preis </td>
        </tr>
       </table>   
    </div>

Pixelaner · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Du solltest unbedingt dein Markup validieren. Warum gibts du ein Image ohne Source mit an?

Agosphere · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Wie gesagt, es ist ein Muster. In der CSS hat das div Breite/Höhe/Farbe. Einfach erstmal nur, dass man weiß, dass dort später ein Bild reinkommt.
das ganze ist in einem Register über JQ und Datacontainer usw. aufgebaut, daher ist oben manch wörtchen drin, was jetzt gerade aus dem Kontext heraus keinen sinn macht... falls du das meinst.

Pixelaner · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Ok das mit dem Bild leuchtet ein. Aber man sollte doch auch wenns ein Muster ist den Bereich schon korrekt aufbauen zum Bleistift:

HTML:

<div class="wrapper_action">
    <ul>
        <li class="price">9,99€</li>
        <li class="value">in den<br />Abokorb</li>
        <li class="info">zum Produkt</li>
    </ul>
</div>

So könnte es aussehen und der Bereich ist valide (keine HTML Fehler).

Agosphere · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

oh ok, listenelemente innerhalb eines div und ohne liste ist komisch... ich bau's um, danke für den hinweis!

)

Duddle · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Ist das Problem

Nun muss ich es noch hinbekommen, dass er auch immer die Daten des gerade angeklickten Produkts hinzufügt und nicht immer die selben aus dem Muster-Exemplar.
das ginge mit .parent(), oder?

noch aktuell? Wenn ja, wie sieht dein derzeitiger Code aus (und bitte nutze die BBCodes für HTML/Code)?
Prinzipiell kannst du das Element im dazugehörigen Event-Handler mit

Code:

$(this)

als jQuery-Objekt erhalten.

Duddle

Agosphere · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Hey Duddle,

das Problem ist noch aktuell und am Quellcode hat sich noch nichts geändert.
$(this) wählt ja dann das Element, welches ich auch angeklickt habe, aus. Die Werte liegen aber ja übergeordnet/woanders. Ich kenne jetzt nun speziell nur .next() und .parent(), aber dafür müssten die Elemente ja direkt drumrum' liegen.

Es müssen halt jeweils aus dem entsprechenden #wrapper_product die Werte gezogen werden, in dem auf den Button geklickt wurde..

Vielen Dank für die bisherige Hilfe

Edit: Habe den Quellcode oben in die HTML Tags gesetzt

Duddle · 08.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

jQuery hat mehrere Funktionen, um durch den Baum zu gehen. In deinem Fall bietet sich .siblings() für die Geschwister-Elemente an. Beispiel:

Code:

$(this).siblings(".price")

Duddle

Agosphere · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Danke dir, es will nur noch nicht richtig funktionieren... er überträgt nicht den produktnamen und den preis, bei menge gibt er 'undefined' aus..

also grade funktioniert nichts

um den produktnamen zu bekommen (welcher ja kein direkter sibling ist), benötige ich parents(), korrekt? .. aber wie bekomme ich hier auch wirklich nur den direkten .product_name parent dieses einen produkts, und nicht komplett die aller produkte?

Code:

var produkt = $(this).parents('.product_name').text();
var menge = $(this).siblings('.menge').value;
var preis = $(this).siblings('.price').text();
$('.value').click(function() {
	$('#abo_shop_con table').append('<tr><td>'+ produkt +'</td><td>'+ menge +'</td><td>'+ preis +'</td></tr>');
});

bei $(this) müsste er ja von dem angeklickten(!) objekt ausgehen, korrekt? nicht, dass er da von "#abo_shop_con table" aus sucht(!?)

HTML:

<div class="wrapper_text">
                    <h1 class="product_name"> Produktname </h1>
                    <p> kurzer Infotext </p>
</div>
<ul class="wrapper_action">
                    <li class="price"> 9,99€ </li>
                    <li class="value"> <input type="number" class="menge" value="1"> in den <br> Abokorb </li>
                    <li class="info"> zum Produkt </li>
                </ul>

:schmoll:

Duddle · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

this ist immer kontext-spezifisch. Wenn du ausserhalb des Event-Handlers auf this zugreifst, bekommst du natürlich das falsche Objekt.

Duddle

Myhar · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Duddle hat Recht, aber hier noch einmal eine etwas genauere Erklärung was er genau meint:

Agosphere schrieb:
bei $(this) müsste er ja von dem angeklickten(!) objekt ausgehen, korrekt? nicht, dass er da von "#abo_shop_con table" aus sucht(!?)

Hier ist der Code, bei dem sich $(this) auf den von dir gewünschten Bereich bezieht, bzw. anders formuliert: Hier ist der komplette Code welcher beim klicken ausgeführt wird:

Code:

$('.value').click(function() {
	$('#abo_shop_con table').append('<tr><td>'+ produkt +'</td><td>'+ menge +'</td><td>'+ preis +'</td></tr>');
});

Jetzt sollte hoffentlich klar sein, warum du undefined zurückbekommst.

Agosphere · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

okay, also keine variablen erstellen, sondern wie zuvor in den kontext einbringen.. Preis wird mir nun angezeigt, die Menge ist immer noch undefined.. etwas bei dem input tag falsch gemacht?
und den Produktnamen holt er sich irgendwie auch nicht.. :'(

HTML:

$('.value').click(function() {
  $('#abo_shop_con table').append('<tr><td>'+$(this).parents('.product_name').text() +'</td><td>'+ $(this).siblings('.menge').value +'</td><td>'+ $(this).siblings('.price').text() +'</td></tr>');
    });

Duddle · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

okay, also keine variablen erstellen, sondern wie zuvor in den kontext einbringen..

Du kannst Variablen auch im Event-Handler erstellen.

etwas bei dem input tag falsch gemacht?

Ja. Visualisiere dir den DOM-Baum und wende manuell die Suchfunktionen an, dann siehst du den Fehler.

Duddle

Agosphere · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Okay, habe die Variablen in der Funktion definiert - so ist es richtig?

HTML:

$('.value').click(function() {
		var produkt = $(this).closest('product_name', '.wrapper_text').text();
		var menge = $(this).siblings('.menge').value;
		var preis = $(this).siblings('.price').text();
		$('#abo_shop_con table').append('<tr><td>'+ produkt +'</td><td>'+ menge +'</td><td>'+ preis +'</td></tr>');
    });

und der input tag ist nun als eigener Listeneintrag drin. war es das was du meinst?

HTML:

<ul class="wrapper_action">
                    <li class="price"> 9,99€ </li>
                    <li class="menge"> <input type="number" value="1"> </li>
                    <li class="value"> in den <br> Abokorb </li>
                    <li class="info"> zum Produkt </li>
                </ul>

leider funktioniert es immer noch nicht

Duddle · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Dein Baum (vor der Änderung) sieht so aus:

Wenn du dort von li.value ausgehst, was findet er wenn du mit .siblings() nach Geschwistern suchst, was wenn du mit .parents() nach Eltern-Elementen suchst? Warum führen dich beide Ansätze nicht zum Ziel?

Edit: falls du es noch nicht benutzt, leg dir FireBug zu und benutz die Konsole plus console.log().

Duddle

Agosphere · 09.01.2014

AW: Javascript/JQ Daten auslesen und schreiben

Danke für die Veranschaulichung! :danke:

Werde mir Firebug gleich mal downloaden

also wie im vorherigen beitrag schon editiert, habe ich, um den produktnamen zu finden, nun folgendes stehen:
var produkt = $(this).closest('product_name', '.wrapper_text').text();
sodass er nach dem nächstgelegenen product_name sucht und halt auch im .wrapper_text div nachschaut... will aber immer noch nicht funktionieren. :nee:

.menge nun nicht mehr in einem li tag

HTML:

<ul class="wrapper_action">
                    <li class="price"> 9,99€ </li>
                    <input class="menge" type="number" value="1">
                    <li class="value"> in den <br> Abokorb </li>
                    <li class="info"> zum Produkt </li>
                </ul>

will ebenso noch nicht funktionieren.. guckt er bei siblings() ggf. nur nach Geschwister-Elementen des selben Typs und übersieht dabei input?