$.ajax w jQuery Opcje

[SpiJay]

Witam serdecznie,

zrobiłem takie oto filtrowanie: http://iam4u-server.home.pl/sklep/filter.php aczkolwiek nie działa to w taki sposób w jaki sobie to założyłem...
Pokazuje mi ładnie wysortowane wyniki z bazy, ale nie pamięta wszystkich wartości filtrowania, dla przykładu:

jeżeli wybiorę kolor np czerwony oraz smak np wytrawne, to wyszukuje mi wyłącznie rekordy z wartością "wytrawne", a kolor jest pomijany.
Wiem, że jest wina w skrypcie jQuery, ponieważ ręcznie wpisane wartości w skrypcie PHP działają poprawnie.

Ad1. Macie jakieś rady ?

Ad2. Ponadto chciałbym prosić o wyjaśnienie w jaki sposób wysłać wyniki sortowania z pliku function.php do pliku index.php ?

JS:

[JAVASCRIPT] pobierz, plaintext 
			$(window).load(function() {
 
				$(".filtr").click(function() {
 
					var kolor = $(this).find('div.k').add('id');
					var smak = $(this).find('div.s').attr('id');
					var cena = $(this).find('div.c').attr('id');
					var region = $(this).find('div.r').attr('id');
					var kraj = $(this).find('div.p').attr('id');
 
					$.ajax({
						url: 'function.php',
						data: {
							funkcja: 'szukaj',
							kolor: kolor,
							smak: smak,
							cena: cena,
							region: region,
							kraj: kraj,
							},
						type: 'post',
						success: function(output) {
							$('.jo').remove();
							$("#wyniki").append(output);
							return false;
						}
					});
				});
			});
[JAVASCRIPT] pobierz, plaintext 

PHP:

[PHP] pobierz, plaintext 
	// Ajaxowe wyszukiwanie win
	if(isset($_POST['funkcja']) && !empty($_POST['funkcja'])) {
		switch($_POST['funkcja'])
		{
			case 'szukaj':
				szukaj($_POST['kolor'], $_POST['smak'], $_POST['cena'], $_POST['region'], $_POST['kraj']);
			break;
		}
	}
 
	function szukaj($kolor, $smak, $cena, $region, $kraj) {
		$qwerty = "SELECT * FROM `wina` WHERE
		kolor LIKE '%".$kolor."%'
		AND smak LIKE '%".$smak."%'
		AND cena_handlowa LIKE '%".$cena."%'
		AND region LIKE '%".$region."%'
		AND kraj LIKE '%".$kraj."%'
		ORDER by id";
		$sql = mysql_query($qwerty);
		while($id = mysql_fetch_assoc($sql)) {
			echo '
			<div class="jo" style="background: #aaa; margin-bottom: 5px;">
				'.$id['id'].' |
				'.$id['nazwa'].' |
				'.$id['region'].' |
				'.$id['kraj'].' |
				'.$id['smak'].' |
				'.$id['kolor'].' |
				'.$id['cena_handlowa'].' |
				'.$id['zdj_mini'].' |
				'.$id['zdj_duze'].'
			</div>
			';
		}
	}
[PHP] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
		<div id="filtr-body">
			<div id="filtr-kolor">
				<span class="filtr-name">Kolor</span>
				<div class="filtr"><div class="k" id="cze"><img src="images/wina-i.png" /> Czerwone</div></div>
				<div class="filtr"><div class="k" id="bia"><img src="images/wina-i.png" /> Białe</div></div>
				<div class="filtr"><div class="k" id="roz"><img src="images/wina-i.png" /> Różowe</div></div>
			</div>
			<div id="filtr-cena">
				<span class="filtr-name">Cena</span>
				<div class="filtr"><div class="c" id="1"><img src="images/wina-i.png" /> do 50zł</div></div>
				<div class="filtr"><div class="c" id="2"><img src="images/wina-i.png" /> 50zł - 100zł</div></div>
				<div class="filtr"><div class="c" id="3"><img src="images/wina-i.png" /> ponad 100zł</div></div>
			</div>
			<div id="filtr-smak">
				<span class="filtr-name">Smak</span>
				<div class="filtr"><div class="s" id="slo"><img src="images/wina-i.png" /> Słodkie</div></div>
				<div class="filtr"><div class="s" id="wyt"><img src="images/wina-i.png" /> Wytrawne</div></div>
				<div class="filtr"><div class="s" id="mus"><img src="images/wina-i.png" /> Musujące</div></div>
			</div>
			<div id="filtr-kontynent">
				<span class="filtr-name">Region</span>
				<div class="filtr ameryka"><div class="r" id="ame"><img src="images/wina-i.png" /> Ameryka</div></div>
				<div class="filtr europa"><div class="r" id="eur"><img src="images/wina-i.png" /> Europa</div></div>
			</div>
			<div id="filtr-panstwa">
				<span class="filtr-name">Kraj</span>
				<div class="filtr ameryka"><div class="p" id="arg"><img src="images/wina-i.png" /> Argentyna</div></div>
				<div class="filtr ameryka"><div class="p" id="chi"><img src="images/wina-i.png" /> Chile</div></div>
				<div class="filtr ameryka"><div class="p" id="bra"><img src="images/wina-i.png" /> Brazylia</div></div>
 
				<div class="filtr europa"><div class="p" id="fra"><img src="images/wina-i.png" /> Francja</div></div>
				<div class="filtr europa"><div class="p" id="wlo"><img src="images/wina-i.png" /> Włochy</div></div>
				<div class="filtr europa"><div class="p" id="his"><img src="images/wina-i.png" /> Hiszpania</div></div>
			</div>
			<div id="filtr-result">Znaleziono wyników: <b>4178</b></div>
 
			<div id="wyniki" style="clear: both; float: none;"></div> 
[HTML] pobierz, plaintext 

Pozdrawiam !

[PrinceOfPersia]

problem chyba jest w this:

Kod

$(".filtr").click(function() {
   var kolor = $(this).find('div.k').attr('id');

w ten sposób nie znajdzie ci tego, bo this to w tym wypadku dany .filtr.

[SpiJay]

a jakieś pomysły ? :/

[PrinceOfPersia]

noo... po prostu zamiast:

var kolor = $(this).find('div.k').attr('id');

musisz walnąć inny selektor w jQuery. Coś na zasadzie

Kod

var kolor = $("#filtr-kolor .filtr div.k"). attr('id')

(ale to ci nie zadziała do końca, ponieważ musisz jeszcze doprecyzować, żeby wybrał tylko ten element div.k, który jest zaznaczony/włączony, teraz wybierzesz pierwszy z brzegu).

poza tym tam masz literówkę w jednym miejscu - add zamiast attr.

[SpiJay]

mozesz podac przyklad na kodzie jak to zrobic ?

[mortus]

Mnie zastanawia, dlaczego używasz do tego div-ów, a nie formularza (ładne formularze można uzyskać za pomocą CSS'a lub pluginów do jQuery)? Niemniej, każdy kliknięty element powinien być w jakiś sposób "oznaczony" (np. dodatkową klasą selected, przy czym zauważ, że pola typu checkbox lub radio już taką "właściwość" posiadają (te zaznaczone)). Można by się zastanowić nad użyciem jQuery UI Selectable. W Twoim przykładzie wybrać mogę tylko jedną z opcji koloru, smaku, ceny itd., co nie jest zbyt słusznym rozwiązaniem, jeśli bierzemy pod uwagę potrzeby potencjalnego użytkownika końcowego (być może klient będzie chciał zarówno białe, jak i różowe wino za które może zapłacić od 99 - 159 zł). Elementy HTML, które posiadają id powinny być elementami "istotnymi", czyli takimi, które dokładnie określają czego dokument HTML i jego treść w tym danym miejscu dotyczy. Chyba nadużywasz id-ów, co może mieć negatywne konsekwencje choćby w kwestii pozycjonowania strony.

Jeśli chodzi o PHP to funkcja szukaj jest źle zorganizowana. Pamiętaj, że skrypt wywoływany jest wraz z każdym kliknięciem/zaznaczeniem elementu, co oznacza, że nie wszystkie parametry w każdym kolejnym wywołaniu funkcji szukaj będą dostępne (ewentualnie będą puste - NULL). Funkcja szukaj również (to o czym pisałem w kwestii zaznaczania wybranych właściwości) nie uwzględnia możliwości wyszukiwania według dwóch i większej liczby wartości parametru np. win w dwóch/trzech/itd. różnych kolorach.

Dane zwracaj w takiej formie, która Ci odpowiada. Ja użyłbym json-a i zwróciłbym tylko i wyłącznie dane pobrane z bazy w postaci tablicy, niemniej nic nie stoi na przeszkodzie, aby zwracać HTML.

[PrinceOfPersia]

mozesz podac przyklad na kodzie jak to zrobic ?

tak, za ciebie zrobię od razu. Żeby zobaczyć co jest źle, musiałem obejrzeć ten twój kod, a potem tę stronę i kilka (5-10? nie wiem) minut się głowić, aż zobaczyłem tamto z tym this. A potem jeszcze odpisałem raz i drugi i zobaczyłem tę literówkę z add. Uszanuj to, że ktoś ci pomaga a nie proś o zrobienie całej pracy z gotowca. Nawet nie znając za bardzo specyfiki JavaScriptu, z samej dokumentacji jQuery możesz już dalej sobie wykombinować jak to zrobić: http://api.jquery.com/category/selectors/

Tak abstrahując od tego tematu, bo problem się powtarza, to zastanawiam się czemu ludzie biorą się za robienie zleceń, które są ponad ich możliwości programistyczne?