Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][PHP]Prośba o zrozumienie czemu js nie działa
frankiejojo
post
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
frankiejojo
post
Post #2





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

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

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.
Go to the top of the page
+Quote Post
trueblue
post
Post #3





Grupa: Zarejestrowani
Postów: 6 809
Pomógł: 1828
Dołączył: 11.03.2014

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

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?
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
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 28.12.2025 - 15:56
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn