Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Prośba o zrozumienie czemu js nie działa
Forum PHP.pl > Forum > Przedszkole
frankiejojo
12.12.2019, 19:29:33
Witam,
Nie mogę zrozumieć dlaczego skrypt w jednym wypadku działa a w innym nie.
Projekt składa się z pliku index.php oraz folderów "index", css i js.
Zawartość folderu index to pliki "wyszukiwarkaMain.php oraz plik searchCity.php
Zawartość folderu css to plik hamburger.css
Zawartość folderu js to javaScriptCity.js

Zasadniczym celem programu jest podpowiadanie nazw miejscowości (autocomplete).

Kod zacznę od javaScriptCity.js
[HTML] pobierz, plaintext 
  1.  $(document).ready(function(){  
  2.       $('#city').keyup(function(){  
  3.            var query = $(this).val();  
  4.            if(query != '')  
  5.            {  
  6.                 $.ajax({  
  7.                      url:"index/searchCity.php",  
  8.                      method:"POST",  
  9.                      data:{query:query},  
  10.                      success:function(data)  
  11.                      {  
  12.                           $('#cityList').fadeIn();  
  13.                           $('#cityList').html(data);  
  14.                      }  
  15.                 });  
  16.            }  
  17.       });  
  18.       $(document).on('click', 'li', function(){  
  19.            $('#city').val($(this).text());  
  20.            $('#cityList').fadeOut();  
  21.       });  
  22.  });  
[HTML] pobierz, plaintext


plik hamburger.css
[HTML] pobierz, plaintext 
  1. #menuToggle
  2. {
  3.   display: block;
  4.   position: absolute;
  5.   top: 50px;
  6.   left: 50px;
  7.  
  8.   z-index: 1;
  9.  
  10.   -webkit-user-select: none;
  11.   user-select: none;
  12. }
  13. #menuToggle input
  14. {
  15.   display: block;
  16.   width: 40px;
  17.   height: 32px;
  18.   position: absolute;
  19.   top: -7px;
  20.   left: -5px;
  21.  
  22.   cursor: pointer;
  23.  
  24.   opacity: 0; /* hide this */
  25.   z-index: 2; /* and place it over the hamburger */
  26.  
  27.   -webkit-touch-callout: none;
  28. }
  29.  
  30. #menuToggle span
  31. {
  32.   display: block;
  33.   width: 33px;
  34.   height: 4px;
  35.   margin-bottom: 5px;
  36.   position: relative;
  37.  
  38.   background: #cdcdcd;
  39.   border-radius: 3px;
  40.  
  41.   z-index: 1;
  42.  
  43.   transform-origin: 4px 0px;
  44.  
  45.   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  46.               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  47.               opacity 0.55s ease;
  48. }
  49.  
  50. #menuToggle span:first-child
  51. {
  52.   transform-origin: 0% 0%;
  53. }
  54.  
  55. #menuToggle span:nth-last-child(2)
  56. {
  57.   transform-origin: 0% 100%;
  58. }
  59.  
  60. #menuToggle input:checked ~ span
  61. {
  62.   opacity: 1;
  63.   transform: rotate(45deg) translate(-2px, -1px);
  64.   background: #232323;
  65. }
  66. #menuToggle input:checked ~ span:nth-last-child(3)
  67. {
  68.   opacity: 0;
  69.   transform: rotate(0deg) scale(0.2, 0.2);
  70. }
  71. #menuToggle input:checked ~ span:nth-last-child(2)
  72. {
  73.   transform: rotate(-45deg) translate(0, -1px);
  74. }
  75. .pozycjaHanburger{
  76. position: absolute;
  77. margin: 5px;	
  78. }
[HTML] pobierz, plaintext


Plik wyszukiwarkaMain.php
<div class = "citySearch">
<input type="text" name="city" id="city" class="form-control" placeholder="miejscowość" />
</div>

plik searchCity.php
[HTML] pobierz, plaintext 
  1.  <?php  
  2.  $connect = mysqli_connect("localhost", "root", "", "nieruchomosci");  
  3.  $connect->query('SET NAMES utf8');
  4.  if(isset($_POST["query"]))  
  5.  {  
  6.       $output = '';  
  7.       $query = "SELECT * FROM miejscowosci WHERE city LIKE '%".$_POST["query"]."%'";  
  8.       $result = mysqli_query($connect, $query);  
  9.       $output = '<ul class="list-unstyled">';  
  10.       if(mysqli_num_rows($result) > 0)  
  11.       {  
  12.            while($row = mysqli_fetch_array($result))  
  13.            {  
  14.                $output .= '<li>'.$row["CityFullName"].'</li>'; 
  15. 		   }  
  16.       }  
  17.       else  
  18.       {  
  19. 		   $output .= '<li>Przykro mi, ale takiej miejscowości nie ma w naszej bazie danych.</li>';
  20.       }  
  21.       $output .= '</ul>';  
  22.       echo $output;  
  23.  }  
  24.  ?>  
[HTML] pobierz, plaintext


i na zakończenie plik index.php
[HTML] pobierz, plaintext 
  1.  <html>  
  2.  <head>  
  3.  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script>
  6. function wyszukiwarka() {
  7. 	var hr = new XMLHttpRequest();
  8. 	var url = "index/wyszukiwarkaMain.php";
  9. 	hr.open("POST", url, true);
  10. 	hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  11. 	hr.onreadystatechange = function() {
  12. 	if(hr.readyState == 4 && hr.status == 200) {
  13. 		    var return_data = hr.responseText;
  14. 			document.getElementById("wyszukiwarkaMain").innerHTML = return_data;
  15. 		}
  16.    }
  17.   hr.send();
  18.    document.getElementById("wyszukiwarkaMain").innerHTML = "processing...";
  19. }
  20. </script>
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  22. <link href="css/hamburger.css" rel="stylesheet" type="text/css" />
  23.  </head>  
  24.  <body>
  25.  <div class="pozycjaHanburger">
  26.   <div id="menuToggle">
  27.     <input type="checkbox" onclick="wyszukiwarka()"/>
  28.     <span></span>
  29.     <span></span>
  30.     <span></span>
  31.     <ul id="menu">
  32.     </ul>
  33.   </div>
  34.  </div>
  35. <div id="cityList"></div> 
  36. </br>
  37. </br>
  38. </br></br>
  39. </br>
  40. <div id="wyszukiwarkaMain"></div>
  41. <?php
  42. require "index/wyszukiwarkaMain.php";
  43. ?>
  44. <script type="text/javascript" src="js/javaScriptCity.js"></script>
  45. </body>  
  46. </html> 
[HTML] pobierz, plaintext


i teraz gdzie tkwi problem.
fragmentem pliku index.php jest:
<?php
require "index/wyszukiwarkaMain.php";
?>
jeżeli wyszukiwarkaMain.php "załaduję" w ten sposób to wszystko gra. Jednak "wyszukiwarka zajmuje zbyt dużo miejsca więc chciałbym by użytkownik jak będzie chciał to sam ją otworzy klikając w "hamburgera". Wyszukiwarka oczywiście się otwiera jednak funkcja podpowiadania nazw miejscowości wówczas nie działa.
Ktoś podpowie?
Z góry dziękuję

trueblue
12.12.2019, 19:41:03
Co to oznacza, że użytkownik sam otwiera wyszukiwarkę klikając w "hamburgera"? Czy to oznacza, że po prostu w nowej zakładce/oknie otwiera się podstrona o adresie:
http://domena.pl/index/wyszukiwarkaMain.php?
frankiejojo
12.12.2019, 22:06:02 
[HTML] pobierz, plaintext 
  1.  <div class="pozycjaHanburger">
  2.   <div id="menuToggle">
  3.     <input type="checkbox" onclick="wyszukiwarka()"/>
  4.     <span></span>
  5.     <span></span>
  6.     <span></span>
  7.     <ul id="menu">
  8.     </ul>
  9.   </div>
  10.  </div>
[HTML] pobierz, plaintext


Ten fragment kodu to "przycisk" (trzy poziome kreski) uruchamiające funkcję "wyszukiwarka". Funkcja wyszukiwarka umieszcza pomiędzy divami "wyszukiwarkaMain" zawartość pliku wyszukiwarkaMain.php (to dzieje się na tej samej stronie po prostu div się "rozsuwa").
trueblue
12.12.2019, 22:27:24
I wtedy również powinieneś zainicjować kod do obsługi autocomplete.

Tylko dlaczego wstawiasz ten fragment HTML dynamicznie, a nie jest on tam na stałe?
frankiejojo
15.12.2019, 17:46:18
W wersji mobilnej chcę by wyszukiwarka zajmowała jak najmniej miejsca.
Napisałeś "wtedy również powinieneś zainicjować kod do obsługi autocomplete." tzn?
Przekopiowanie by javaScriptCity.js ładowała się dopiero po załadowaniu wyszukiwarkaMain.php nic nie zmieniło.
trueblue
15.12.2019, 17:52:30
Wtedy:
Cytat(frankiejojo @ 15.12.2019, 17:46:18 ) *
funkcja wyszukiwarka umieszcza pomiędzy divami "wyszukiwarkaMain" zawartość pliku wyszukiwarkaMain.php


Co to znaczy, że ma zajmować mniej miejsca? Nie możesz jej po prostu ukryć z pomocą CSS? Wiesz, że obecnie za każdym razem na kliknięcie checkbox ten kod HTML będzie wstawiany?
frankiejojo
16.12.2019, 18:30:43
Nie widziałem, że za pomocą js mogę zmieniać CSS - dziękuję.
trueblue
16.12.2019, 18:41:05
Tak, to prawda, ale nie to miałem na myśli.

Wyszukiwarkę można pokazywać/ukrywać wyłącznie z pomocą CSS.

Jakby nie było, lepiej jeśli skorzystasz z połączenia JS+CSS, niż tak jak obecnie.
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.