Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [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
  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. });


plik hamburger.css
  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. }


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

plik searchCity.php
  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. ?>


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


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
trueblue
post 12.12.2019, 19:41:03
Post #2





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

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


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?


--------------------
Go to the top of the page
+Quote Post
frankiejojo
post 12.12.2019, 22:06:02
Post #3





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

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


  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>


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").
Go to the top of the page
+Quote Post
trueblue
post 12.12.2019, 22:27:24
Post #4





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

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


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?


--------------------
Go to the top of the page
+Quote Post
frankiejojo
post 15.12.2019, 17:46:18
Post #5





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 15.12.2019, 17:52:30
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
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
frankiejojo
post 16.12.2019, 18:30:43
Post #7





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

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


Nie widziałem, że za pomocą js mogę zmieniać CSS - dziękuję.
Go to the top of the page
+Quote Post
trueblue
post 16.12.2019, 18:41:05
Post #8





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.


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 15:36