Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]Filtry wyszukiwania
Forum PHP.pl > Forum > Przedszkole
krisek101
15.08.2013, 19:55:27
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
15.08.2013, 20:37:58
Dwie rady na początek:
  1. Użyj $.post zamiast $.ajax
  2. Dane prześlij jako obiekt JavaScript, a nie jako string
krisek101
15.08.2013, 20:44:34
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
15.08.2013, 21:00:03
Co masz w konsoli? Zapewne wystarczy, że do url dodasz / na początku
krisek101
15.08.2013, 21:04:34
W konsoli?
Z / bez efektu też.
lobopol
15.08.2013, 21:34:30
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
15.08.2013, 21:53:18
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 
  1. <form method="post"><p class='nk'>Płeć</p>
  2. <label style="font-weight:100;"><input type="radio" id="m" name="sz_plec" value="Mężczyzna"> Mężczyzna</label> <br />
  3. <label style="font-weight:100;"><input type="radio" id="k" name="sz_plec" value="Kobieta"> Kobieta</label>
  4. <div id='linia_w'></div>
  5. <p class='nk'>Wiek</p>
  6. <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;" /> - 
  7. <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;" />
  8. <div id='linia_w'></div>
  9. <p class='nk'>Lokalizacja</p>
  10. <p style="line-height:14px;">Tylko dla zalogowanych.</p>
  11. <br />
  12. <input id="szukanie" class="btn btn-default" style="margin-bottom:10px;width:70px;" value="Szukaj" />
  13. </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_
15.08.2013, 22:32:05
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
15.08.2013, 23:22:25
Nie zrozumiałem tego. Mógłbyś jakoś uprościć?
_Borys_
16.08.2013, 03:02:05 
[PHP] pobierz, plaintext 
  1. //...
  2. $string = '';
  3. $users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
  4. while($row = mysql_fetch_assoc($users)){
  5. $string.= $row['cos'].' - '.$row['costam'].'<br />';
  6. }
  7. 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 
  1. $(document).ready(function() {
  2. 	$("#szukanie").click(
  3.  
  4.     function(){
  5. var sz_plec = $("[name='sz_plec']:checked").val();
  6. var wiek_od = $("#wiek_od").val();
  7. var wiek_do = $("#wiek_do").val();
  8. $.ajax({
  9.     type     : "post",
  10.     url      : "osoba_2.php",
  11.     data     : "plec="+sz_plec+"&wiek_od="+wiek_od+"&wiek_do="+wiek_do,
  12.  
  13.     success : function(msg) {
  14.         var arr = $.parseJSON(msg);
  15.         for(i=0; i < arr.length; i++){
  16.         $('.osoba').append('cos: '+arr[i][0]+' - costam: '+arr[i][1]+'<br />');
  17.         }
  18.                 $(".osobka").fadeOut(1500);
  19.                 $(".osobka").fadeIn();
  20.         }
  21.         });
  22.         });
  23.         });
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. $warunki = '';
  2. if (isset($_POST['plec']))
  3. {
  4.     $warunki .= ' AND (plec="' . $_POST['plec'] . '")';
  5. }
  6. if (isset($_POST['wiek_od']))
  7. {
  8.     $warunki .= ' AND (wiek BETWEEN ' . $_POST['wiek_od'] . ' AND 100)';
  9. }
  10. if (isset($_POST['wiek_do']))
  11. {
  12.     $warunki .= ' AND (wiek BETWEEN 0 AND ' . $_POST['wiek_do'] . ')';
  13. }
  14. $arr = array();
  15. $users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
  16. while($arr[] = mysql_fetch_assoc($users,MYSQL_NUM)){
  17.  
  18. }
  19. echo json_encode($arr);
  20. die;
[PHP] pobierz, plaintext
krisek101
16.08.2013, 08:29:38
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 
  1. <script type="text/javascript">
  2. 		jQuery(document).ready(function() {
  3.  
  4. 		$('.osobka').hover(
  5. 		function() {
  6. 				$(this).tooltip('show');
  7. 			$(this).css('opacity',0.8);
  8. 		},function() { 
  9. 					$(this).css('opacity',1);
  10. 						$(this).tooltip('hide');
  11. 			});
  12. 		});
  13. </script>
  14. <?php
  15. $mysql_server = "localhost"; 
  16. $mysql_admin = "root"; 
  17. $mysql_pass = ""; 
  18. $mysql_db = "czat";  
  19.     @mysql_connect($mysql_server, $mysql_admin, $mysql_pass) 
  20.     or die('Brak połączenia z serwerem MySQL.');  
  21.     @mysql_select_db($mysql_db) 
  22.     or die('Błąd wyboru bazy danych.');
  23.  
  24. 	$warunki='';
  25. if(isset($_POST['plec'])){
  26. 	$warunki .= ' AND (plec="'.$_POST['plec'].'")';
  27. }
  28.  
  29. $arr = array();
  30. $users = mysql_query("SELECT * FROM users WHERE sesja<>''".$warunki." GROUP BY RAND() LIMIT 30");
  31.  
  32.  
  33. while($arr[] = mysql_fetch_assoc($users,MYSQL_NUM)){
  34. 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'].'">';
  35. if($arr['avatar']){
  36. 	echo '<div style="width:70px; height:70px; filter:alpha(opacity=15); opacity:0.15; position:absolute; background:url("img/avatars/'.$arr['nick'].'.png");"></div>';
  37. 	} else {
  38. 		if($arr['plec']=='Kobieta'){
  39. 			echo '<div id="osobak"></div>';
  40. 			}else{ 
  41. 			echo '<div id="osobam"></div>';
  42. }
  43. }
  44. echo'<div id="c">'.$arr['wiek'].' lat</div>';
  45. if($arr['plec']=='Kobieta'){
  46. 	echo '<div id="k"></div>';
  47. 	} else {
  48. 		echo '<div id="m"></div>';
  49. 		} 
  50. echo '<div style="display: block; width:auto; height:20px;background:black; filter:alpha(opacity=15); opacity:0.15;"></div>
  51. 	  <div class="r"></div>
  52. 	  </div>
  53. 	  </a>';
  54. }
  55. echo '</div>';
  56. echo json_encode($arr);
  57. die;
  58. ?>
[PHP] pobierz, plaintext


jquery tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#szukanie").click(
  2.     function(){
  3.  
  4. var sz_plec = $("[name='sz_plec']:checked").val();
  5. var wiek_od = $("#wiek_od").val();
  6. var wiek_do = $("#wiek_do").val();
  7.  
  8. $.ajax({
  9.     type:"post",
  10.     url:"osoba_2.php",
  11.     data:"plec="+sz_plec,
  12.     success:function(msg) {
  13. 		$(".osobka").fadeOut(1500);
  14. 		$(".osobka").fadeIn();
  15.         var arr = $.parseJSON(msg);
  16.         for(z=0; z < arr.length; z++){
  17.         $('.osoba').append('cos: '+arr[z][0]+' - costam: '+arr[z][1]+'<br />');
  18.         }
  19.  
  20.     }
  21.     });
  22. });
[JAVASCRIPT] pobierz, plaintext


Po naciśnięciu inputa nic się nie dzieje. fadeIn i fadeOut nie pokazuje się.
_Borys_
16.08.2013, 08:53:43
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.
krisek101
16.08.2013, 09:01:12
Ok. Będę wdzięczny jakbyś znalazł potem czas jeszcze na to. Dzięki bardzo za pomoc wink.gif
_Borys_
16.08.2013, 09:33:05 
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function() {
  2. 	$("#szukanie").click(
  3.  
  4.     function(){
  5. var sz_plec = $("[name='sz_plec']:checked").val();
  6. var wiek_od = $("#wiek_od").val();
  7. var wiek_do = $("#wiek_do").val();
  8. $.ajax({
  9.     type     : "post",
  10.     url      : "osoba.php",
  11.     data     : "plec="+sz_plec+"&wiek_od="+wiek_od+"&wiek_do="+wiek_do,
  12.  
  13.     success : function(msg) {
  14.         $('.osoba').append(msg);
  15.         //var arr = $.parseJSON(msg);
  16.         //for(i=0; i < arr.length; i++){
  17.         //$('.osoba').append('cos: '+arr[i][0]+' - costam: '+arr[i][1]+'<br />');
  18.         //}
  19.                 $(".osobka").fadeOut(1500);
  20.                 $(".osobka").fadeIn();
  21.         }
  22.         });
  23.         });
  24.         });
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $mysql_server = "localhost";
  4. $mysql_admin = "root";
  5. $mysql_pass = "";
  6. $mysql_db = "czat";
  7. $sql = mysql_connect($mysql_server, $mysql_admin, $mysql_pass) or die('Brak połączenia z serwerem MySQL.');
  8. mysql_select_db($mysql_db) or die('Błąd wyboru bazy danych.');
  9. $warunki = '';
  10. if (isset($_POST['plec']))
  11. {
  12.     $warunki .= ' AND (plec="' . $_POST['plec'] . '")';
  13. }
  14. $users = mysql_query("SELECT * FROM users WHERE sesja<>''" . $warunki . " GROUP BY RAND() LIMIT 30") or die(mysql_error());
  15. $string = '';
  16. while ($row = mysql_fetch_assoc($users))
  17. {
  18.     $string .= '<div class="r"></div><a href="' . $row['nick'] .
  19.         '"><div id="osoba" class="osobka" data-toggle="tooltip" title="' . $row['nick'] . '';
  20.     if ($row['opis'])
  21.     {
  22.         echo ' - ';
  23.     }
  24.     echo '' . $row['opis'] . '">';
  25.     if ($row['avatar'])
  26.     {
  27.         $string .= '<div style="width:70px; height:70px; filter:alpha(opacity=15); opacity:0.15; position:absolute; background:url("img/avatars/' .
  28.             $row['nick'] . '.png");"></div>';
  29.     } else
  30.     {
  31.         if ($row['plec'] == 'Kobieta')
  32.         {
  33.             $string .= '<div id="osobak"></div>';
  34.         } else
  35.         {
  36.             $string .= '<div id="osobam"></div>';
  37.         }
  38.     }
  39.     $string .= '<div id="c">' . $row['wiek'] . ' lat</div>';
  40.     if ($row['plec'] == 'Kobieta')
  41.     {
  42.         $string .= '<div id="k"></div>';
  43.     } else
  44.     {
  45.         $string .= '<div id="m"></div>';
  46.     }
  47.     $string .= '<div style="display: block; width:auto; height:20px;background:black; filter:alpha(opacity=15); opacity:0.15;"></div>
  48. 	  <div class="r"></div>
  49. 	  </div>
  50. 	  </a>';
  51. }
  52. $string .= '</div>';
  53. mysql_close($sql);
  54. echo $string;
  55.  
  56. ?>
[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.
krisek101
16.08.2013, 13:15:12
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_
16.08.2013, 13:41:44
$('.osoba').html(msg);
krisek101
16.08.2013, 14:08:41
Działa wszystko już ok wink.gif Dzięki bardzo za pomoc:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.