protected
Feb 08, 2016
view1938
view4
0
Goto Top

Javascript und Ajax Problem

GermansolvedQuestionJavaScriptDevelopment
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;
}
?>
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 295612

Url: https://administrator.de/contentid/295612

Printed on: April 19, 2024 at 21:04 o'clock

4 Comments
Latest comment
Goto Top
Member: masterG
masterG Feb 08, 2016 at 22:55:10 (UTC)
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.
Member: Protected
Protected Feb 08, 2016 at 23:19:52 (UTC)
Goto Top
Hi,
Eventuell findet sich ja doch einer... wäre mir eine große Hilfe ggf. Daraus auch zu lernen.
Mitglied: 114757
114757 Feb 09, 2016 updated at 08:24:18 (UTC)
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
Member: Protected
Protected Feb 11, 2016 updated at 00:32:42 (UTC)
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;
}
?>
GermansolvedQuestionJavaScriptDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment