Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][PHP]Prośba o zrozumienie czemu js nie działa
frankiejojo
post 12.12.2019, 19:29:33
Post #1





Grupa: Zarejestrowani
Postów: 111
Pomógł: 2
Dołączył: 20.07.2014

Ostrzeżenie: (0%)
-----

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ę
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
trueblue
post 16.12.2019, 18:41:05
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post

Posty w temacie
- frankiejojo   [JavaScript][PHP]Prośba o zrozumienie czemu js nie działa   12.12.2019, 19:29:33
- - trueblue   Co to oznacza, że użytkownik sam otwiera wyszukiwa...   12.12.2019, 19:41:03
- - frankiejojo   [HTML] pobierz, plaintext <div class="poz...   12.12.2019, 22:06:02
- - trueblue   I wtedy również powinieneś zainicjować kod do obsł...   12.12.2019, 22:27:24
- - frankiejojo   W wersji mobilnej chcę by wyszukiwarka zajmowała j...   15.12.2019, 17:46:18
|- - trueblue   Wtedy: Cytat(frankiejojo @ 15.12.2019, 17...   15.12.2019, 17:52:30
- - frankiejojo   Nie widziałem, że za pomocą js mogę zmieniać CSS -...   16.12.2019, 18:30:43
- - trueblue   Tak, to prawda, ale nie to miałem na myśli. Wyszu...   16.12.2019, 18:41:05

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 28.04.2024 - 19:52
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn