protected
Goto Top

Javascript und Ajax Problem

Hallo,

der User colinardo hat mir seinen AJAX Code zur Verfügung gestellt, damit ich per Ajax Kategorien und die jeweiligen Produkte anzeigen kann.

Leider funktioniert mein Code nicht, wenn ich Ihn zusammen füge mit AJAX. Wenn ich zwei einzelene Dateien daraus mache funktioniert es.

Ich habe nicht so viel Ahnung von JS und Ajax, deswegen denke ich, dass hier die beste Anlaufstelle ist.

Nun es soll folgendes passieren. Wenn ich auf die Kategorie klicke Links dann sollen die Produkte dazu angezeigt werden. Dies funktioniert. Wenn ich nun auf das Produkt klicke soll dies rechts ins Input feld mit dem Preis eingetragen werden (dies funktioniert nicht). Wenn wieder ein Produkt ausgewählt wird, soll ein neues Input feld erstellt werden und es dort eintragen.

Hier wie es aussehen soll:
8a81dea2b56ce899b6f39dea86ec1be8

Das hier ist die index.html
<?php


function mwst($num) {
	global $cfg;
	
	$mwst = $cfg->mwst / 100 + 1;
	
	return preis(str_replace(',', '.', $num) * $mwst);  
}
function preis($number) {
	$number = str_replace(',', '.', $number);  
	
	return number_format($number, 2, ',', '');  
}

function bs($what) {
	$filename = basename($_SERVER['PHP_SELF']);  

	$data = (!empty($_SESSION[$what . '#' . $filename])) ? $_SESSION[$what . '#' . $filename] : '';  
	
	if (!empty($data)) {
		echo stripslashes($data);
	}
	
	unset($_SESSION[$what . '#' . $filename]);  
}
function hex2rgb($color){
    $color = str_replace('#', '', $color);  
	
    if (strlen($color) != 6) { 
		return array(0, 0, 0);
	}

    $rgb = array();
	
    for ($x = 0; $x < 3; $x++){
        $rgb[$x] = hexdec(substr($color, (2 * $x), 2));
    }
	
    return $rgb;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Speisen</title>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script type="text/javascript">  



var data_provider = "data.php";  
// Wenn DOM geladen wurde
$(document).ready(function(e) {
	$('#categories').html("<p>Lade Kategorien ...</p>");  
	// Hole Kategorien via Ajax Get-Request
	$.get(data_provider,{catlist : ''}).done(function(data){  
		// erstelle Buttons mit den zurückgelieferten Daten
		var cat_buttons = "";  
		for(i = 0;i < data.length;i++){
			cat_buttons += '<button class="btn" cat_id="' + data[i].id + '">' + data[i].name + '</button>';  
		}
		//Füge Buttons ins DOM ein
		$('#categories').html(cat_buttons);  
		// registriere für jeden Kategorie-Button einen OnClick-Handler
		$('#categories button').click(function(){  
			$('#products').html("<p>Lade Produkte ...</p>");  
			// Rufe Produkte der jeweiligen Kategorie ab (die ID der Kategorie haben wir in einem Attribut 'cat_id' des Buttons gespeichert) 
			$.get(data_provider,{cat:$(this).attr('cat_id')}).done(function(data){  
				// erstelle Buttons für jedes Product
				var cat_products = "";  
				for(var i = 0;i < data.length;i++){
					cat_products += '<button class="btn" prod_id="' + data[i].id + '">' + data[i].name + '</button>';  
				}
				//Füge Buttons ins DOM ein
				$('#products').html(cat_products);  
				// registriere für jeden Produkt-Button einen OnClick-Handler und mache drin etwas
				$('#products button').click(function(){  
	$(hi).val($(this).text());
 });
			}).fail(function(data){alert('Error:' + data.responseText)});  
		});
	}).fail(function(data){alert('Error:' + data.responseText)});  
});
</script>
</head>
<style type="text/css">  
.btn { padding: 10px; margin: 5px}
</style>
<body>
<div style="float: left; width: 400px;">  
<h2>Kategorie wählen</h2>
<div id="categories"></div>  
<h2>Produkte</h2>
<div id="products"></div>  
<input name="hi" type="text" id="hi">  
</div>
<?php include('hi.php'); ?>  

</body>
</html>

Die hi.php:

<script language="javascript" type="text/javascript">  
function number_format (number, decimals, dec_point, thousands_sep) {
    var n = number, prec = decimals;
 
    var toFixedFix = function (n,prec) {
        var k = Math.pow(10,prec);
        return (Math.round(n*k)/k).toString();
    };
 
    n = !isFinite(+n) ? 0 : +n;
    prec = !isFinite(+prec) ? 0 : Math.abs(prec);
    var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;  
    var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;  
 
    var s = (prec > 0) ? toFixedFix(n, prec) : toFixedFix(Math.round(n), prec); //fix for IE parseFloat(0.55).toFixed(0) = 0;
 
    var abs = toFixedFix(Math.abs(n), prec);
    var _, i;
 
    if (abs >= 1000) {
        _ = abs.split(/\D/);
        i = _.length % 3 || 3;
 
        _ = s.slice(0,i + (n < 0)) +
              _.slice(i).replace(/(\d{3})/g, sep+'$1');  
        s = _.join(dec);
    } else {
        s = s.replace('.', dec);  
    }
 
    var decPos = s.indexOf(dec);
    if (prec >= 1 && decPos !== -1 && (s.length-decPos-1) < prec) {
        s += new Array(prec-(s.length-decPos-1)).join(0)+'0';  
    }
    else if (prec >= 1 && decPos === -1) {
        s += dec+new Array(prec).join(0)+'0';  
    }
    return s;
}
function new_position() {
	$('new_positions').innerHTML += '<span style="display: none;" id="pos' + position + '_value"></span><span style="display: none;" id="pos' + position + '_betrag_value"></span><span style="display: none;" id="pos' + position + '_menge_value"></span><dl class="line" style="width: 100%; margin-top: 2px;"><dd class="field" style="margin-left: 0px;"><input onkeyup="javascript:$(\'pos' + position + '_value\').innerHTML = this.value;" type="text" name="pos' + position + '" id="pos' + position + '" /> <input onkeyup="javascript:$(\'pos' + position + '_menge_value\').innerHTML = this.value; calc();" onclick="javascript:calc();" type="text" name="pos' + position + '_menge" style="margin-left: 10px; width: 40px; text-align: right;" id="pos' + position + '_menge" /> <input onkeyup="javascript:$(\'pos' + position + '_betrag_value\').innerHTML = this.value; calc();" class="betrag" style="width: 80px;" type="text" name="pos' + position + '_betrag" onclick="javascript:calc();" id="pos' + position + '_betrag" /> &euro; <input class="betrag" disabled="disabled" style="width: 80px;" type="text" name="pos' + position + '_gesamt" id="pos' + position + '_gesamt" /> &euro;</dd></dl>';  
	$('amount_positions').value = position;  
	
	for (var i = 2; i <= position; i++) {
		$('pos' + i).value = $('pos' + i + '_value').innerHTML;  
		$('pos' + i + '_betrag').value = $('pos' + i + '_betrag_value').innerHTML;  
		$('pos' + i + '_menge').value = ($('pos' + i + '_menge_value').innerHTML != '') ? $('pos' + i + '_menge_value').innerHTML : 1;  
	}
	
	// For new position in bill form
	position++;
}
function calc() {
	
	var amount = 0;
	var mwst = parseFloat($('cfg_mwst').value) / 100 + 1;  
	
	for (var i = 1; i < position; i++) {
		$('pos' + i + '_gesamt').value = number_format(str_replace(',', '.', $('pos' + i + '_betrag').value) * $('pos' + i + '_menge').value, 2, ',', '.');  
	
		if ($('pos' + i + '_gesamt').value == '') {  
			amount = parseFloat(amount);
		} else {
			amount = parseFloat(amount) + parseFloat(str_replace(',', '.', str_replace('.', '', $('pos' + i + '_gesamt').value)));  
		}
	
		//amount = parseInt(amount) + parseInt($('pos' + i + '_betrag').value); 
	}
	
	$('gesamt_brutto').innerHTML = number_format(amount * mwst, 2, ',', '.');  
	$('gesamt_netto').innerHTML = number_format(amount, 2, ',', '.');  
	$('nur_mwst').innerHTML = number_format(amount * mwst - amount, 2, ',', '.');  
	
}

</script>
	<fieldset>

	
		<p style="margin-top: 30px; font-size: 11px; margin-bottom: 1px;">  
			<span style="margin-left: 70px;">Bezeichnung</span>  
			<span style="margin-left: 82px;">Menge</span>   
			<span style="margin-left: 41px;">Einzelpreis</span>  
			<span style="margin-left: 58px;">Gesamtpreis</span>  
		</p>
	
		<dl class="line" style="width: 100%; margin-top: 2px;">  
			<dd class="field" style="margin-left: 0px;">  
				<input type="text" name="pos1" id="pos1" value="<?php bs('pos1'); ?>" />  
				<input type="text" name="pos1_menge" onclick="javascript:calc();" onkeyup="javascript:calc();" style="margin-left: 10px; width: 40px; text-align: right;" id="pos1_menge" value="1" />  
				<input class="betrag" style="width: 80px;" type="text" name="pos1_betrag" onclick="javascript:calc();" onkeyup="javascript:calc();" id="pos1_betrag" value="<?php bs('pos1_betrag'); ?>" /> &euro;  
				<input class="betrag" disabled="disabled" style="width: 80px;" type="text" name="pos1_gesamt" id="pos1_gesamt" /> &euro;  
			</dd>
		</dl>
		
		<div id="new_positions">  
		
		</div>
		
		<hr class="hr1" style="margin-top: 30px; margin-bottom: 20px;" />  
		
		<a href="restaurant.php#" onclick="javascript:new_position();" style="border-bottom: 0px;" /><img src="../style/imageset/add.png" style="padding-left: 10px; border: 0px;" alt="Hinzufügen" title="Weitere Position anfügen." /></a>  
		
		<input type="hidden" id="cfg_mwst" value="19" />  
		
		<div style="margin-left: 300px; width: 230px; text-align: right;">  
		
			<dl class="line" style="margin-bottom: 0px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title"><strong>Gesamt-Brutto:</strong></label></dt>  
				<dd class="field"><span id="gesamt_brutto">0</span> €</dd>  
			</dl>
			
			<dl class="line" style="margin-top: 2px; margin-bottom: 0px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title">Gesamt ohne MwSt.:</label></dt>  
				<dd class="field"><span id="gesamt_netto">0</span> €</dd>  
			</dl>
			
			<dl class="line" style="margin-top: 2px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title">MwSt. 19%:</label></dt>  
				<dd class="field"><span id="nur_mwst">0</span> €</dd>  
			</dl>
		
		</div>
		
		<input type="hidden" name="amount_positions" id="amount_positions" value="2" />  
		
		<hr class="hr1" style="margin-top: 30px; margin-bottom: 20px;" />  
		
		
		
		<h4 style="margin-top: 30px;">Interner Kommentar</h4>  
		
		<hr class="hr1" />  
		
		
		<p style="margin-top: 0px;"><textarea class="r_data" id="text" style="width: 480px; margin-top: 10px; height: 60px;" name="beschreibung"></textarea></p>	  

	</fieldset>

	<input type="submit" value="Ausstellen" />  
	
</form>

Die data.php

<?php
error_reporting(E_ALL);
//Ausgabe soll im JSON-Format erfolgen
header('Content-Type: application/json');  
/* 
	wenn der GET-Parameter 'cat' übergeben wurde wollen wir alle Produkte der angegebenen 
	Kategorie ID erhalten zb. cat=2
*/
if (isset($_GET['cat']) && $_GET['cat'] != ''){  
	try{
		//Verbinde mit der Datenbank
		$db = connect_db();
		// Alle Produkte einer Kategorie holen
		$query = $db->prepare("SELECT * FROM produkte WHERE kategorie = :cat;");  
		$query->execute(array(':cat' => $_GET['cat']));  
		$result = $query->fetchAll(PDO::FETCH_ASSOC);
		//Ergebnis in JSON encodieren und zurückgeben
		echo json_encode($result);
	}catch (PDOException $ex) {
		echo "Es ist ein Fehler beim Datenbankabruf aufgetreten: " . $ex;  
	}
}
//wenn stattdessen der GET-Parameter 'catlist' übergeben wurde wollen wir eine Liste aller Kategorien zurückgeben 
elseif(isset($_GET['catlist'])){  
	try{
		//Verbinde mit der Datenbank
		$db = connect_db();
		// Alle Kategorien aus der Datenbank holen
		$query = $db->prepare("SELECT * FROM kategorien;");  
		$query->execute();
		$result = $query->fetchAll(PDO::FETCH_ASSOC);
		//Ergebnis in JSON encodieren und zurückgeben
		echo json_encode($result);
	}catch (PDOException $ex) {
		echo "Es ist ein Fehler beim Datenbankabruf aufgetreten: " . $ex;  
	}
}
//Funktion zum connecten mit der Datenbank
function connect_db(){
	$DB_HOST = 'localhost';  
	$DB_NAME = 'gyros';  
	$DB_USER = 'root';  
	$DB_PASSWORD = '';   
	$db = new PDO('mysql:host='.$DB_HOST .';dbname='.$DB_NAME.';charset=utf8', $DB_USER, $DB_PASSWORD,array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));  
	return $db;
}
?>

Content-ID: 295612

Url: https://administrator.de/forum/javascript-und-ajax-problem-295612.html

Ausgedruckt am: 27.12.2024 um 19:12 Uhr

masterG
masterG 08.02.2016 um 23:55:10 Uhr
Goto Top
Ich glaube, dass was du zu realisieren versuchst, mit der Masse an Code, schießt etwas am Ziel vorbei.
Weiters, da ich glaube, dass du diese Applikation in Zukunft selber warten möchtest, würde ich dir Grundlagen von PHP gepaart mit JavaScript bzw. auch jQuery(welches du hier verwendest) empfehlen. Macht das Leben um einiges einfacher.
Protected
Protected 09.02.2016 um 00:19:52 Uhr
Goto Top
Hi,
Eventuell findet sich ja doch einer... wäre mir eine große Hilfe ggf. Daraus auch zu lernen.
114757
114757 09.02.2016 aktualisiert um 09:24:18 Uhr
Goto Top
Moin.
Ist ja klar das das nicht funktioniert wenn du die Files oben alle zusammen klöppelst. Die data.php gibt ja nur Daten im JSON Format aus, sieht man doch an der Header-Zeile der data.php

Ich glaube du hast das Konzept dahinter noch nicht so ganz gecheckt...

Wie schon gesagt wurde, besser du liest dich erst noch viel intensiver in die Materie ein, sonst ist das zum Scheitern verurteilt, die Skriptsicherheit dabei noch gar nicht angesprochen!

Gruss jodel32
Protected
Protected 11.02.2016 aktualisiert um 01:32:42 Uhr
Goto Top
Hallo,

ich habe jetzt mal was gebastelt, was leider nicht funktioniert. Eventuell kann mir jemand helfen. Er erstellt kein neues Feld und berechnet diese Felder auch nicht face-sad


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script type="text/javascript">  

function new_position() {
	$('new_positions').innerHTML += '<span style="display: none;" id="pos' + position + '_value"></span><span style="display: none;" id="pos' + position + '_betrag_value"></span><span style="display: none;" id="pos' + position + '_menge_value"></span><dl class="line" style="width: 100%; margin-top: 2px;"><dd class="field" style="margin-left: 0px;"><input onkeyup="javascript:$(\'pos' + position + '_value\').innerHTML = this.value;" type="text" name="pos' + position + '" id="pos' + position + '" /> <input onkeyup="javascript:$(\'pos' + position + '_menge_value\').innerHTML = this.value; calc();" onclick="javascript:calc();" type="text" name="pos' + position + '_menge" style="margin-left: 10px; width: 40px; text-align: right;" id="pos' + position + '_menge" /> <input onkeyup="javascript:$(\'pos' + position + '_betrag_value\').innerHTML = this.value; calc();" class="betrag" style="width: 80px;" type="text" name="pos' + position + '_betrag" onclick="javascript:calc();" id="pos' + position + '_betrag" /> &euro; <input class="betrag" disabled="disabled" style="width: 80px;" type="text" name="pos' + position + '_gesamt" id="pos' + position + '_gesamt" /> &euro;</dd></dl>';  
	$('amount_positions').value = position;  
	
	for (var i = 2; i <= position; i++) {
		$('pos' + i).value = $('pos' + i + '_value').innerHTML;  
		$('pos' + i + '_betrag').value = $('pos' + i + '_betrag_value').innerHTML;  
		$('pos' + i + '_menge').value = ($('pos' + i + '_menge_value').innerHTML != '') ? $('pos' + i + '_menge_value').innerHTML : 1;  
	}
	
	// For new position in bill form
	position++;
}

function calc() {
	
	var amount = 0;
	var mwst = parseFloat($('19').value) / 100 + 1;  
	
	for (var i = 1; i < position; i++) {
		$('pos' + i + '_gesamt').value = number_format(str_replace(',', '.', $('pos' + i + '_betrag').value) * $('pos' + i + '_menge').value, 2, ',', '.');  
	
		if ($('pos' + i + '_gesamt').value == '') {  
			amount = parseFloat(amount);
		} else {
			amount = parseFloat(amount) + parseFloat(str_replace(',', '.', str_replace('.', '', $('pos' + i + '_gesamt').value)));  
		}
	
		//amount = parseInt(amount) + parseInt($('pos' + i + '_betrag').value);  
	}
	
	$('gesamt_brutto').innerHTML = number_format(amount * mwst, 2, ',', '.');  
	$('gesamt_netto').innerHTML = number_format(amount, 2, ',', '.');  
	$('nur_mwst').innerHTML = number_format(amount * mwst - amount, 2, ',', '.');  
	
}

var data_provider = "data.php";  
// Wenn DOM geladen wurde
$(document).ready(function(e) {
	$('#categories').html("<p>Lade Kategorien ...</p>");  
	// Hole Kategorien via Ajax Get-Request
	$.get(data_provider,{catlist : ''}).done(function(data){  
		// erstelle Buttons mit den zurückgelieferten Daten
		var cat_buttons = "";  
		for(i = 0;i < data.length;i++){
			cat_buttons += '<button class="btn" cat_id="' + data[i].id + '">' + data[i].name + '</button>';  
		}
		//Füge Buttons ins DOM ein
		$('#categories').html(cat_buttons);  
		// registriere für jeden Kategorie-Button einen OnClick-Handler
		$('#categories button').click(function(){  
			$('#products').html("<p>Lade Produkte ...</p>");  
			// Rufe Produkte der jeweiligen Kategorie ab (die ID der Kategorie haben wir in einem Attribut 'cat_id' des Buttons gespeichert)  
			$.get(data_provider,{cat:$(this).attr('cat_id')}).done(function(data){  
				// erstelle Buttons für jedes Product
				var cat_products = "";  
				for(var i = 0;i < data.length;i++){
					cat_products += '<button class="btn" prod_id="' + data[i].id + '">' + data[i].name + '</button>';  
				}
				//Füge Buttons ins DOM ein
				$('#products').html(cat_products);  
				// registriere für jeden Produkt-Button einen OnClick-Handler und mache drin etwas
				$('#products button').click(function(){  
       new_position();
         	$(hi).val($(this).text());

 });
       // alert("Hmm, lecker diese " + $(this).text())});  
			}).fail(function(data){alert('Error:' + data.responseText)});  
		});
	}).fail(function(data){alert('Error:' + data.responseText)});  
});
</script>
</head>
<style type="text/css">  
.btn { padding: 10px; margin: 5px}
</style>
<body>
<div style="float: left; width: 400px;">  
<h2>Kategorie wählen</h2>
<div id="categories"></div>  
<h2>Produkte</h2>
<div id="products"></div>  
<input name="hi" type="text" id="hi">  
<div id="felder"></div>  
		<div id="new_positions">  
		
		</div>
<input type="hidden" name="amount_positions" id="amount_positions" value="2" />  

		<div style="margin-left: 300px; width: 230px; text-align: right;">  
		
			<dl class="line" style="margin-bottom: 0px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title"><strong>Gesamt-Brutto:</strong></label></dt>  
				<dd class="field"><span id="gesamt_brutto">0</span> €</dd>  
			</dl>
			
			<dl class="line" style="margin-top: 2px; margin-bottom: 0px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title">Gesamt ohne MwSt.:</label></dt>  
				<dd class="field"><span id="gesamt_netto">0</span> €</dd>  
			</dl>
			
			<dl class="line" style="margin-top: 2px;">  
				<dt class="label" style="padding: 0px; width: 120px;"><label for="title">MwSt. 19%:</label></dt>  
				<dd class="field"><span id="nur_mwst">0</span> €</dd>  
			</dl>
		
		</div>
</div>

data.php
<?php
error_reporting(E_ALL);
//Ausgabe soll im JSON-Format erfolgen
header('Content-Type: application/json');  
/* 
	wenn der GET-Parameter 'cat' übergeben wurde wollen wir alle Produkte der angegebenen 
	Kategorie ID erhalten zb. cat=2
*/
if (isset($_GET['cat']) && $_GET['cat'] != ''){  
	try{
		//Verbinde mit der Datenbank
		$db = connect_db();
		// Alle Produkte einer Kategorie holen
		$query = $db->prepare("SELECT * FROM produkte WHERE kategorie = :cat;");  
		$query->execute(array(':cat' => $_GET['cat']));  
		$result = $query->fetchAll(PDO::FETCH_ASSOC);
		//Ergebnis in JSON encodieren und zurückgeben
		echo json_encode($result);
	}catch (PDOException $ex) {
		echo "Es ist ein Fehler beim Datenbankabruf aufgetreten: " . $ex;  
	}
}
//wenn stattdessen der GET-Parameter 'catlist' übergeben wurde wollen wir eine Liste aller Kategorien zurückgeben 
elseif(isset($_GET['catlist'])){  
	try{
		//Verbinde mit der Datenbank
		$db = connect_db();
		// Alle Kategorien aus der Datenbank holen
		$query = $db->prepare("SELECT * FROM kategorien;");  
		$query->execute();
		$result = $query->fetchAll(PDO::FETCH_ASSOC);
		//Ergebnis in JSON encodieren und zurückgeben
		echo json_encode($result);
	}catch (PDOException $ex) {
		echo "Es ist ein Fehler beim Datenbankabruf aufgetreten: " . $ex;  
	}
}
//Funktion zum connecten mit der Datenbank
function connect_db(){
	$DB_HOST = 'localhost';  
	$DB_NAME = 'gyros';  
	$DB_USER = 'root';  
	$DB_PASSWORD = '';   
	$db = new PDO('mysql:host='.$DB_HOST .';dbname='.$DB_NAME.';charset=utf8', $DB_USER, $DB_PASSWORD,array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));  
	return $db;
}
?>