[AJAX]Filtry wyszukiwania Opcje

[krisek101]

Cześć.
Nie mogę sobie poradzić z $.ajax w jquery. Pierwszy raz z tego korzystam. Podaje Wam kod.

http://pastebin.com/vefK6DSY - plik osoba.php - znajduje się w folderze głównym
http://pastebin.com/BMUbvWhN - plik start.js - jest w folderze "js"

W pliku osoba.php w ogóle nie reaguje na przesyłane dane. Uznaje $warunki jako pustą zmienną.
Proszę Was o pomoc.

[SmokAnalog]

Dwie rady na początek:

1. Użyj $.post zamiast $.ajax
2. Dane prześlij jako obiekt JavaScript, a nie jako string

[krisek101]

Jako obiekt javascript? Zrobiłem tak:
data : {
plec : sz_plec,
wiek_od : wiek_od,
wiek_do : wiek_do
}
Zamieniłem na $.post i klikając na przycisk zupełnie nic się zmienia(nie wykonuje się pole success).

[lobopol]

Co masz w konsoli? Zapewne wystarczy, że do url dodasz / na początku

[krisek101]

W konsoli?
Z / bez efektu też.

[lobopol]

Tak w konsoli np. w chrome f12 i patrzysz na network na to co wysyłasz/odbierasz a w console masz ewentualne błędy. w firefox prawy przycisk i zbadaj element zakładka Konsola www, a najlepiej zainstaluj plugin firebug w firefoxie i w nim popatrz w konsole.

[krisek101]

W konsoli nie ma żadnych błędów.

Nie mam pojęcia już co jest nie tak. Dam jeszcze kod formularza, moze cos tam zepsulem, choc sprawdzalem kilka razy już.

[HTML] pobierz, plaintext 
<form method="post"><p class='nk'>Płeć</p>
<label style="font-weight:100;"><input type="radio" id="m" name="sz_plec" value="Mężczyzna"> Mężczyzna</label> <br />
<label style="font-weight:100;"><input type="radio" id="k" name="sz_plec" value="Kobieta"> Kobieta</label>
<div id='linia_w'></div>
<p class='nk'>Wiek</p>
<input type="text" maxlength="3" class="form-control" placeholder="od" id="wiek_od" style="padding:0;padding-left:3px;display:inline;width:50px; height:30px;" /> - 
<input type="text" maxlength="3" placeholder="do" class="form-control" id="wiek_do" style="padding:0;padding-left:3px;display:inline;width:50px; height:30px;" />
<div id='linia_w'></div>
<p class='nk'>Lokalizacja</p>
<p style="line-height:14px;">Tylko dla zalogowanych.</p>
<br />
<input id="szukanie" class="btn btn-default" style="margin-bottom:10px;width:70px;" value="Szukaj" />
</form>
[HTML] pobierz, plaintext 

Spróbowałem coś takiego:

jQuery(document).ready(function() {
$("#szukanie").click(
function(){

$.ajax({
type:"post",
url:"/osoba.php",
data:"plec=Kobieta",
success:function() {
$(".osobka").fadeOut(1500);
$(".osobka").fadeIn();
$(".osoba").load("osoba.php");
}
});
});

});

I nie wykrywa mi w ogole w osoba.php, że $_POST['plec'] jest zapełnione.

[_Borys_]

Skoro używasz load to w osoba.php musisz sformatować dane zwracane z bazy do postaci stringa, tak jak ma to byś wyświetlane i na końcu echo $string;
Wtedy load załaduje tak jak wyechowałeś w osoba.php

[krisek101]

Nie zrozumiałem tego. Mógłbyś jakoś uprościć?

[_Borys_]

[PHP] pobierz, plaintext 
//...
$string = '';
$users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
while($row = mysql_fetch_assoc($users)){
$string.= $row['cos'].' - '.$row['costam'].'<br />';
}
echo $string; //wysyłanie do load();
[PHP] pobierz, plaintext 

EDIT:
W twoim przypadku jednak to nie przejdzie ponieważ load() to już inne zapytanie z pustą tablicą $_POST niż ajax, a więc nie przejdzie przez twoje if-y w osoba.php i albo baza wywali błędy albo nic nie zwróci.
To powinno zadziałać:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("#szukanie").click(
 
    function(){
var sz_plec = $("[name='sz_plec']:checked").val();
var wiek_od = $("#wiek_od").val();
var wiek_do = $("#wiek_do").val();
$.ajax({
    type     : "post",
    url      : "osoba_2.php",
    data     : "plec="+sz_plec+"&wiek_od="+wiek_od+"&wiek_do="+wiek_do,
 
    success : function(msg) {
        var arr = $.parseJSON(msg);
        for(i=0; i < arr.length; i++){
        $('.osoba').append('cos: '+arr[i][0]+' - costam: '+arr[i][1]+'<br />');
        }
                $(".osobka").fadeOut(1500);
                $(".osobka").fadeIn();
        }
        });
        });
        });
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
$warunki = '';
if (isset($_POST['plec']))
{
    $warunki .= ' AND (plec="' . $_POST['plec'] . '")';
}
if (isset($_POST['wiek_od']))
{
    $warunki .= ' AND (wiek BETWEEN ' . $_POST['wiek_od'] . ' AND 100)';
}
if (isset($_POST['wiek_do']))
{
    $warunki .= ' AND (wiek BETWEEN 0 AND ' . $_POST['wiek_do'] . ')';
}
$arr = array();
$users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
while($arr[] = mysql_fetch_assoc($users,MYSQL_NUM)){
 
}
echo json_encode($arr);
die;
[PHP] pobierz, plaintext 

Ten post edytował _Borys_ 16.08.2013, 03:11:48

[krisek101]

Niestety nie działa. Jeszcze zapytam, czy nie trzeba dawać dataType:"json"?
I drugie pytanie. Czy w tym $('.osoba').append(''); mam dać całą zawartość, która jest w pliku osoba_2.php w tej pętli z tablicą arr[] - razem z tymi if-ami ?
Stworzyłem drugi plik(osoba_2.php), wygląda on tak:

[PHP] pobierz, plaintext 
<script type="text/javascript">
		jQuery(document).ready(function() {
 
		$('.osobka').hover(
		function() {
				$(this).tooltip('show');
			$(this).css('opacity',0.8);
		},function() { 
					$(this).css('opacity',1);
						$(this).tooltip('hide');
			});
		});
</script>
<?php
$mysql_server = "localhost"; 
$mysql_admin = "root"; 
$mysql_pass = ""; 
$mysql_db = "czat";  
    @mysql_connect($mysql_server, $mysql_admin, $mysql_pass) 
    or die('Brak połączenia z serwerem MySQL.');  
    @mysql_select_db($mysql_db) 
    or die('Błąd wyboru bazy danych.');
 
	$warunki='';
if(isset($_POST['plec'])){
	$warunki .= ' AND (plec="'.$_POST['plec'].'")';
}
 
$arr = array();
$users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
 
 
while($arr[] = mysql_fetch_assoc($users,MYSQL_NUM)){
echo '<div class="r"></div><a href="'.$arr['nick'].'"><div id="osoba" class="osobka" data-toggle="tooltip" title="'.$arr['nick'].'';if($arr['opis']){echo ' - ';}echo ''.$arr['opis'].'">';
if($arr['avatar']){
	echo '<div style="width:70px; height:70px; filter:alpha(opacity=15); opacity:0.15; position:absolute; background:url("img/avatars/'.$arr['nick'].'.png");"></div>';
	} else {
		if($arr['plec']=='Kobieta'){
			echo '<div id="osobak"></div>';
			}else{ 
			echo '<div id="osobam"></div>';
}
}
echo'<div id="c">'.$arr['wiek'].' lat</div>';
if($arr['plec']=='Kobieta'){
	echo '<div id="k"></div>';
	} else {
		echo '<div id="m"></div>';
		} 
echo '<div style="display: block; width:auto; height:20px;background:black; filter:alpha(opacity=15); opacity:0.15;"></div>
	  <div class="r"></div>
	  </div>
	  </a>';
}
echo '</div>';
echo json_encode($arr);
die;
?>
[PHP] pobierz, plaintext 

jquery tak:

[JAVASCRIPT] pobierz, plaintext 
$("#szukanie").click(
    function(){
 
var sz_plec = $("[name='sz_plec']:checked").val();
var wiek_od = $("#wiek_od").val();
var wiek_do = $("#wiek_do").val();
 
$.ajax({
    type:"post",
    url:"osoba_2.php",
    data:"plec="+sz_plec,
    success:function(msg) {
		$(".osobka").fadeOut(1500);
		$(".osobka").fadeIn();
        var arr = $.parseJSON(msg);
        for(z=0; z < arr.length; z++){
        $('.osoba').append('cos: '+arr[z][0]+' - costam: '+arr[z][1]+'<br />');
        }
 
    }
    });
});
[JAVASCRIPT] pobierz, plaintext 

Po naciśnięciu inputa nic się nie dzieje. fadeIn i fadeOut nie pokazuje się.

[_Borys_]

Drugi plik ma służyć tylko do pobierania danych z bazy i przetwarzania. Możesz tam formatować html z danymi, to co ma się wyświetlać w pierwszym pliku ale lepiej do jednego stringa i na końcu jednym echo wysyłasz to do ajaxa. Echo z drugiego pliku wysyła treść lub dane do ajaxa, tylko to co mu podasz. Znajdę czas to poprawię, w kilku miejscach namieszane teraz jest, przy pobieraniu z bazy i przy wstawianiu w ajaksie.
Zmień url w ajaxie bo zostawiłem swój.

Ten post edytował _Borys_ 16.08.2013, 09:13:10

[krisek101]

Ok. Będę wdzięczny jakbyś znalazł potem czas jeszcze na to. Dzięki bardzo za pomoc

[_Borys_]

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("#szukanie").click(
 
    function(){
var sz_plec = $("[name='sz_plec']:checked").val();
var wiek_od = $("#wiek_od").val();
var wiek_do = $("#wiek_do").val();
$.ajax({
    type     : "post",
    url      : "osoba.php",
    data     : "plec="+sz_plec+"&wiek_od="+wiek_od+"&wiek_do="+wiek_do,
 
    success : function(msg) {
        $('.osoba').append(msg);
        //var arr = $.parseJSON(msg);
        //for(i=0; i < arr.length; i++){
        //$('.osoba').append('cos: '+arr[i][0]+' - costam: '+arr[i][1]+'<br />');
        //}
                $(".osobka").fadeOut(1500);
                $(".osobka").fadeIn();
        }
        });
        });
        });
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
 
$mysql_server = "localhost";
$mysql_admin = "root";
$mysql_pass = "";
$mysql_db = "czat";
$sql = mysql_connect($mysql_server, $mysql_admin, $mysql_pass) or die('Brak połączenia z serwerem MySQL.');
mysql_select_db($mysql_db) or die('Błąd wyboru bazy danych.');
$warunki = '';
if (isset($_POST['plec']))
{
    $warunki .= ' AND (plec="' . $_POST['plec'] . '")';
}
$users = mysql_query("SELECT * FROM users WHERE sesja<>''" . $warunki . " GROUP BY RAND() LIMIT 30") or die(mysql_error());
$string = '';
while ($row = mysql_fetch_assoc($users))
{
    $string .= '<div class="r"></div><a href="' . $row['nick'] .
        '"><div id="osoba" class="osobka" data-toggle="tooltip" title="' . $row['nick'] . '';
    if ($row['opis'])
    {
        echo ' - ';
    }
    echo '' . $row['opis'] . '">';
    if ($row['avatar'])
    {
        $string .= '<div style="width:70px; height:70px; filter:alpha(opacity=15); opacity:0.15; position:absolute; background:url("img/avatars/' .
            $row['nick'] . '.png");"></div>';
    } else
    {
        if ($row['plec'] == 'Kobieta')
        {
            $string .= '<div id="osobak"></div>';
        } else
        {
            $string .= '<div id="osobam"></div>';
        }
    }
    $string .= '<div id="c">' . $row['wiek'] . ' lat</div>';
    if ($row['plec'] == 'Kobieta')
    {
        $string .= '<div id="k"></div>';
    } else
    {
        $string .= '<div id="m"></div>';
    }
    $string .= '<div style="display: block; width:auto; height:20px;background:black; filter:alpha(opacity=15); opacity:0.15;"></div>
	  <div class="r"></div>
	  </div>
	  </a>';
}
$string .= '</div>';
mysql_close($sql);
echo $string;
 
?>
[PHP] pobierz, plaintext 

Albo z bazy pobierasz sobie dane w postaci jsona tak jak poprzednio podałem a divy tworzysz i wypełniasz w jquery tymi danymi.

Ten post edytował _Borys_ 16.08.2013, 09:38:23

[krisek101]

Gdy zrobiłem osoba.php tak jak na początku było i w js dałem append(msg) zamiast load('osoba.php'), to po wybraniu płci i nacisnieciu przycisku pokazały się osoby tylko wybranej płci, ale nie zostały usunięte wczesniejsze wyniki. Czyli jak w tabeli na początku było 30 osob, to po wybraniu plci. np meskiej pokazalo sie 50osob(jest 20 mezczyzn). Więc może mógłbym zostawić plik osoba.php tak jak był i coś w jquery zrobić, żeby poprzednie wyniki znikały. Jest może jakaś funkcja alternatywna dla append?

[_Borys_]

$('.osoba').html(msg);

[krisek101]

Działa wszystko już ok Dzięki bardzo za pomoc:)