[jQuery]Update Koszyka Opcje

[pa-jong]

Witam,

Od dłuższego czasu próbuje przerobić poniższy skrypt tak aby działał bez przeładowania strony..
do tej pory udało mi się zrobić dodawanie oraz usuwanie poległem niestety przy update..

czy znajdzie się ktoś kto pomoże mi rozwiązać tą kwestię ?




Formularz.

[PHP] pobierz, plaintext 
		<form action="admin.php?tab=koszyk&action=update" method="post" id="cart" >
 
(...)
 
		<input name="qty'.$id.'" title="Enter = zapisz" class="editores" style="width:20px;" type="text" value="'.$qty.'" onkeypress="handleKeyPress(event,this.form)">
[PHP] pobierz, plaintext 

Skrypt odpowiedzialny za update..

[PHP] pobierz, plaintext 
(...)
 
	case 'update':
	if ($cart) {
		$newcart = '';
		foreach ($_POST as $key=>$value) {
			if (stristr($key,'qty')) {
				$id = str_replace('qty','',$key);
				$items = ($newcart != '') ? explode(',',$newcart) : explode(',',$cart);
				$newcart = '';
				foreach ($items as $item) {
					if ($id != $item) {
						if ($newcart != '') {
							$newcart .= ','.$item;
						} else {
							$newcart = $item;
						}
					}
				}
				for ($i=1;$i<=$value;$i++) {
					if ($newcart != '') {
						$newcart .= ','.$id;
					} else {
						$newcart = $id;
					}
				}
			}
		}
	}
	$cart = $newcart;
	break;
}
 
 
//// zdublowany update z $_GET używany obecnie.. 
if ($_GET['action'] == 'update') {
	if ($cart) {
		$newcart = '';
		foreach ($_POST as $key=>$value) {
			if (stristr($key,'qty')) {
				$id = str_replace('qty','',$key);
				$items = ($newcart != '') ? explode(',',$newcart) : explode(',',$cart);
				$newcart = '';
				foreach ($items as $item) {
					if ($id != $item) {
						if ($newcart != '') {
							$newcart .= ','.$item;
						} else {
							$newcart = $item;
						}
					}
				}
				for ($i=1;$i<=$value;$i++) {
					if ($newcart != '') {
						$newcart .= ','.$id;
					} else {
						$newcart = $id;
					}
				}
			}
		}
	}
	$cart = $newcart;
}
[PHP] pobierz, plaintext 

[Kostek.88]

Co dokładnie nie działa?

[pa-jong]

działać działa, tylko przy aktualizacji w przypadku kiedy mam 100+ rekordów męczące jest odświerzanie strony..
po naciśnieciu entera formularz wraca na górę i trzeba znowu leciec na doł do kolejnej pozycji... co jest conajmniej bez sensu (IMG:style_emoticons/default/wink.gif)
owszem mam możliwość edytowania kilku pozycji naraz ale nie tylko ja będę tego używał więc w założeniu ma być jak najbardziej przyjazne.
Dlatego chciałem zrobić to poprzez jquery.. i poległem

troszkę zmieniłem formularz
w tym momencie $action przesyłana jest za pomocą input hidden w związku z czym już nie muszę korzystać z zamiennika z $_GET['action']

zauważyłem też inną kwestie... o ile dobrze myślę to jeśli już uda mi się to wysłać bez przeładowania to na ekranie zostaną nie aktualne dane co de facto i tak wymusza przeładowanie strony grrr :/

Ten post edytował pa-jong 11.05.2012, 09:55:13

[Kostek.88]

Pokaż strukturę HTML. Gdzie masz te rekordy? Update bez przeładowania wcale nie wymusza przeładowania strony (IMG:style_emoticons/default/tongue.gif) Po prostu za pomocą jQuery podmieniasz fragment HTML i musisz mi go pokazać (IMG:style_emoticons/default/smile.gif)

[pa-jong]

HTML wygląda mniej więcej tak..

[PHP] pobierz, plaintext 
function showCart() {
	global $db;
	$cart = $_SESSION['cart'];
	if ($cart) {
		$items = explode(',',$cart);
		$contents = array();
		foreach ($items as $item) {
			$contents[$item] = (isset($contents[$item])) ? $contents[$item] + 1 : 1;
		}
 
 
$output[] = '<div style="width: auto; height: auto; position: relative; " class="ui-dialog ui-widget ui-widget-content ui-corner-all" >';
$output[] = '	<div id="dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 118px; height: auto; display: block; ">';
$output[] = '		<fieldset>';
$output[] = '			<legend>Twoje zamówienie</legend>';
 
$output[] = '			<form method="post" id="cart">';
$output[] = '				<table class="content-item" border="0" cellspacing="0" cellpadding="2">';
$output[] = '					<thead>';
$output[] = '						<tr class="ui-widget-header">';
$output[] = '							<td style="width:20px;">lp.</td>';
$output[] = '							<td style="width: 80px;">Symbol</td>';
$output[] = '							<td>Nazwa</td>';
$output[] = '							<td style="width:40px;">Ilość<br>Mag.</td>';
$output[] = '							<td style="width:40px;">Ilosć<br>sklep</td>';
$output[] = '							<td style="width:55px;">Ilość</td>';
$output[] = '							<td style="width:40px;">Jedn.</td>';
$output[] = '							<td style="width:30px;">Vat</td>';
$output[] = '							<td style="width:80px;">Cena Netto</td>';	
$output[] = '							<td style="width:80px;">Cena Brutto</td>';				
$output[] = '							<td style="width:80px;">Brutto Razem</td>';
$output[] = '							<td style="width:15px;"></td>';
$output[] = '						</tr>';
$output[] = '					</thead>';		
$output[] = '					<tbody>';
 
 
		$i = 0;
		foreach ($contents as $id=>$qty) {
			$i++;
 
			$sql = "SELECT * FROM stany WHERE Symbol = '".$id."'";
			$result = $db->query($sql);
			$row = $result->fetch(); 
			extract($row);
 
 
 
$output[] = '	<tr id="item'.$id.'"class="ui-state-default">';
$output[] = '		<td valign="top"> '.$i.'. </td>';
$output[] = '		<td valign="top" style="color: #4d8214; class="username-coloured"> '.$id.' </td>';
$output[] = '		<td style="width:300px; '.$col.'" valign="top">';
$output[] = '			'.$Nazwa.'</td>';
$output[] = '		<td valign="top">'.$skl1.'</td>';
$output[] = '		<td valign="top">'.$skl11.'</td>';
$output[] = '		<td valign="top">';
$output[] = '			<div style="display:inline;" id="count'.$id.'">';
$output[] = '				<a href="java script:void(0)" class="ui-icon ui-icon-pencil" style="float: left; cursor: auto; " title="Zmień ilość produktów" onclick="$("#count'.$id.'").attr("style","display:none");$("#countUpdate'.$id.'").attr("style","display:inline");">';
$output[] = '				</a>'.$qty.'';
$output[] = '			</div>';
$output[] = '			<div style="display:none;" id="countUpdate'.$id.'">';
$output[] = '				<a href="java script:void(0)" class="ui-icon ui-icon-close" style="float: left; cursor: auto; " onclick="$("#countUpdate'.$id.'").attr("style","display:none");$("#count'.$id.'").attr("style","display:inline");">';
$output[] = '				</a>';	
$output[] = ' 			<input name="action" value="update" type="hidden">';	
$output[] = '			<input name="qty'.$id.'" id="qty'.$id.'" title="Enter = zapisz" class="editores" style="width:20px;" type="text" value="'.$qty.'" onkeypress="handleKeyPress(event,this.form)">';
$output[] = '			</div></td>';
$output[] = '		<td valign="top">egz.</td>';
$output[] = '		<td valign="top">5%</td>';
$output[] = '		<td valign="top"> 397.78 PLN</td>';
$output[] = '		<td valign="top">'.$skl1Cena.' PLN</td>';
$output[] = '		<td style="width:60px;" valign="top">'.($skl1Cena * $qty).' PLN</td>';
$output[] = '		<td valign="top">';
$output[] = "			<a href='java script:uzk(\"".$id."\",\"delete\")' onClick='$(\"#item".$id."\").fadeOut(\"slow\")' class='ui-icon ui-icon-trash' style='float: left; cursor: auto; ' title='usuń z zamówienia'>";
$output[] = '			</a></td>';
$output[] = '	</tr>';									
 
 
		}
[PHP] pobierz, plaintext 

Ten post edytował pa-jong 11.05.2012, 20:46:22

[Kostek.88]

O jaki update dokładnie Ci chodzi? Napisałeś:

do tej pory udało mi się zrobić dodawanie oraz usuwanie poległem niestety przy update..

Skoro masz dodawanie i usuwanie, to co chcesz update'ować? Ilość sztuk produktu? Przecież po wpisaniu odpowiedniej ilości w input nie musisz update'ować HTML...

[pa-jong]

nie do końca sie zrozumieliśmy (IMG:style_emoticons/default/wink.gif)
opisze od początku (IMG:style_emoticons/default/wink.gif)

jest sobie jakaś tam lista produktów,

[PHP] pobierz, plaintext 
 
echo "<td class='nazwa'><a href='java script:ddk(\"".StringToHTML($arrRow["Symbol"])."\",\"add\")'>".StringToHTML($arrRow["Nazwa"])."</a></td>".$eol;
[PHP] pobierz, plaintext 

po kliknięciu w produkt jest on wysyłany do koszyka.

[PHP] pobierz, plaintext 
<script type='text/javascript'>
function ddk(idp,akcja)
{
		$.ajax({
			url: 'cart.php',
			type: 'POST',
			data: {
				tryb : 'dodaj_do_koszyka' ,
				id_przedmiotu : idp,
				action: akcja
			},	
			success: function(odpowiedz)
			{
 
				//document.getElementById('info').style.display='block';
				$('#info').fadeIn('slow');
				setTimeout('ukryj()',2000);			
				$('#infotext').html('Produkt dodany do zamówienia.');
				// $('#koszyk').load('cart.php');
 
				// alert('odpowiedz');	
 
			},
			error: function(){
 
				document.getElementById('info').style.display='block';
 
				setTimeout('ukryj()',1500);
				$('#infotext').html('Błąd Połączenia - Spróbój jeszcze Raz.');
 
			//alert('Błąd połączenia ajax');
 
			}
 
 
		});
}
 
 
function ukryj() {
 
      $('#info').fadeOut('slow');
 
}
 
</script>
[PHP] pobierz, plaintext 

i skrypt obslugujący dodawanie

[PHP] pobierz, plaintext 
$cart = $_SESSION['cart'];
$action = $_POST['action'];
 
switch ($action) {
	case 'add':
		if ($cart) {
			$cart .= ','.$_POST['id_przedmiotu'];
		} else {
			$cart = $_POST['id_przedmiotu'];
		}
		break; 
 
(...)
 
[PHP] pobierz, plaintext 

tutaj odrazu może wspomnę że po kliknięciu dodaje się 1szt danego przedmiotu.
docelowo chciałbym aby po kliknięciu pokazywał się input gdzie można by było zdefiniować ilość.
jeszcze się nie zastanawiałem jak to zrobić ale czuje w kościach ze kolorowo nie będzie tym bardziej, ze poległem na etapie edycji..
zobaczymy (IMG:style_emoticons/default/wink.gif)

wracając do tematu..
dalej mamy listę zamawianych produktów
gdzie można zmienić ilość sztuk czyli to o co się rozchodzi..

[PHP] pobierz, plaintext 
(...)
<form action="admin.php?tab=koszyk" method="post" id="cart" >
(...)
 
$output[] = '			<div style="display:inline;" id="count'.$id.'">';
$output[] = '				<a href="java script:void(0)" class="ui-icon ui-icon-pencil" style="float: left; cursor: auto; " title="Zmień ilość produktów" onclick="$("#count'.$id.'").attr("style","display:none");$("#countUpdate'.$id.'").attr("style","display:inline");">';
$output[] = '				</a>'.$qty.'';
$output[] = '			</div>';
$output[] = '			<div style="display:none;" id="countUpdate'.$id.'">';
$output[] = '				<a href="java script:void(0)" class="ui-icon ui-icon-close" style="float: left; cursor: auto; " onclick="$("#countUpdate'.$id.'").attr("style","display:none");$("#count'.$id.'").attr("style","display:inline");">';
$output[] = '				</a>';	
$output[] = ' 			<input name="action" value="update" type="hidden">';	
$output[] = '			<input name="qty'.$id.'" id="qty'.$id.'" title="Enter = zapisz" class="editores" style="width:20px;" type="text" value="'.$qty.'" onkeypress="handleKeyPress(event,this.form)">';
$output[] = '			</div></td>';
[PHP] pobierz, plaintext 

skrypty obsługujące

[HTML] pobierz, plaintext 
<script type="text/javascript">
function handleKeyPress(e,form){
var key=e.keyCode || e.which;
if (key==13){
form.submit();
} 
 
}
 
</script>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
	case 'update':
	if ($cart) {
		$newcart = '';
		foreach ($_POST as $key=>$value) {
			if (stristr($key,'qty')) {
				$id = str_replace('qty','',$key);
				$items = ($newcart != '') ? explode(',',$newcart) : explode(',',$cart);
				$newcart = '';
				foreach ($items as $item) {
					if ($id != $item) {
						if ($newcart != '') {
							$newcart .= ','.$item;
						} else {
							$newcart = $item;
						}
					}
				}
				for ($i=1;$i<=$value;$i++) {
					if ($newcart != '') {
						$newcart .= ','.$id;
					} else {
						$newcart = $id;
					}
				}
			}
		}
	}
	$cart = $newcart;
	break; 
[PHP] pobierz, plaintext 

oraz usuwanie przedmiotu z koszyka.

[PHP] pobierz, plaintext 
$output[] = '		<td valign="top">';
$output[] = "			<a href='java script:uzk(\"".$id."\",\"delete\")' onClick='$(\"#item".$id."\").fadeOut(\"slow\")' class='ui-icon ui-icon-trash' style='float: left; cursor: auto; ' title='usuń z zamówienia'>";
$output[] = '			</a></td>';
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script type='text/javascript'>
function uzk(idp,akcja)
{
		$.ajax({
			url: 'cart.php',
			type: 'POST',
			data: {
				tryb : 'usun_z_koszyka' ,
				id_przedmiotu : idp,
				action: akcja
			},	
			success: function(odpowiedz)
			{
 
				//document.getElementById('info').style.display='block';
				$('#info').fadeIn('slow');
				setTimeout('ukryj()',2000);			
				$('#infotext').html('Produkt usunięty z zamówienia.');
				// $('#koszyk').load('cart.php');
 
				// alert('odpowiedz');	
 
			},
			error: function(){
 
				document.getElementById('info').style.display='block';
 
				setTimeout('ukryj()',1500);
				$('#infotext').html('Błąd Połączenia - Spróbój jeszcze Raz.');
 
			//alert('Błąd połączenia ajax');
 
			}
 
 
		});
}
 
 
function ukryj() {
 
      $('#info').fadeOut('slow');
 
}
 
</script>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
	case 'delete':
		if ($cart) {
			$items = explode(',',$cart);
			$newcart = '';
			foreach ($items as $item) {
				 //if ($_GET['id'] != $item) {
				if ($_POST['id_przedmiotu'] != $item) {
					if ($newcart != '') {
						$newcart .= ','.$item;
					} else {
						$newcart = $item;
					}
				}
			}
			$cart = $newcart;
		}
		break;
[PHP] pobierz, plaintext 

jak widać update odbywa się tylko za pomocą PHP
chce to zmienić na jQuery czyli bez przeładowania strony no i tak żeby zmiany były odrazu widoczne,
gdyż jak wspominałem wcześniej będą na pewno takie sytuacje kiedy ktoś przy pozycji 50, 100 i 150 wymyśli sobie zmianę ilości sztuk
i niech przy pozycji 50 wciśnie enter.. strona się przeładuje,lista wróci do początku i trzeba będzie przewijać z powrotem w dól do pozycji nr 100... nieco męczące dlatego chce to wyeliminować (IMG:style_emoticons/default/wink.gif)


mam nadzieje ze teraz jest bardziej zrozumiale (IMG:style_emoticons/default/wink.gif)


//edit
przez POST ma być wysłane:
action = update
qty.'$id.' = '.$qty.'


Próbowałem dać tak,

[PHP] pobierz, plaintext 
<input name="qty'.$id.'" id="qty'.$id.'" title="Enter = zapisz" class="editores" style="width:20px;" type="text" value="'.$qty.'" onchange="ewk(\"update\",\"'.$qty.'\")" >
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
function ewk(akcja,ilosc)
{
		$.ajax({
			url: 'cart.php',
			type: 'POST',
			data: {
				tryb : 'edytuj_w_koszyku' ,				
				action: akcja,
                                ilosc : qty
			},	
[PHP] pobierz, plaintext 

i mam 2 problemy.


1. jeżeli dobrze myślę to w powyższym skrypcie zamiast "ilość" powinienem mieć qty'.$id.'
tak aby za każda zmianą było qty1 : 5 / qty2 : 7/ itd
ale jest to niemożliwe gdyż zmienne definiowane są w zupełnie gdzie indziej wiec nie mogę użyć ich w tym miejscu..
znając życie to na pewno istnieje na to proste rozwiązanie..
2. zmieniam zawartość inputa ale firebug w ogole nie wyłapuje aby cokolwiek się wysyłało i nie wiem dlaczego..

Ten post edytował pa-jong 15.05.2012, 22:31:29