Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP]jquery laravel autocomplete
Forum PHP.pl > Forum > Przedszkole
Puchatek320
Cześć,
Mam problem z ustawieniem ścieżki dostępu w jquery


  1.  
  2. Route::get('gettag', 'ajaxtagController@getajaxtag');
  3. Route::post('gettag', [
  4. 'uses' => 'ajaxtagController@getajaxtag',
  5. 'as' => 'ajaxtagController.getajaxtag'
  6. ]);
  7.  
  8.  
  9. Controler
  10.  
  11. class ajaxtagController extends Controller
  12. {
  13. public function getajaxtag(){
  14.  
  15. echo "sprawdz czy działa";
  16. }
  17. }
  18.  
  19.  
  20. i autocomplete
  21.  
  22.  
  23. $(function() {
  24. $( "#tag" ).autocomplete({
  25. source: "{{ route('ajaxtagController.gettag') }}"
  26. });
  27. });
  28.  
  29. var id = 0;
  30. $("#addTag").click(function(){
  31. if($("#tag").val() ) {
  32.  
  33. id++;
  34. var li = document.createElement("li");
  35. li.className = "tags";
  36. li.setAttribute("id", id);
  37.  
  38. var i = document.createElement("INPUT");
  39. i.setAttribute("name","multiTag[]");
  40. i.setAttribute("type","hidden");
  41. i.setAttribute("id", id);
  42.  
  43. var tag = document.getElementById('tag').value;
  44.  
  45. li.innerHTML = " " + tag + ' <button class=\"deleteTag btn-delete\" id=\"'+id+'\">X</button>'
  46. i.setAttribute("value", tag);
  47.  
  48. $("#tagList").append(li)
  49. $("#tagList").append(i)
  50. $('#tag').val('');
  51. }});
  52.  
  53. $("#tagList").on('click', 'button.deleteTag', function() {
  54.  
  55. var idDiv = this.id;
  56. $("#"+idDiv).remove()
  57. $(":input[id='"+idDiv+"']").remove();
  58.  
  59. });
  60.  
  61. $("#tagList").on('click', 'button.deleteTagExsit', function() {
  62.  
  63. var del_id = this.id;
  64. var toDel = del_id.replace('id_', '');
  65. $("#id_"+toDel).remove();
  66. $.ajax({
  67. type:'POST',
  68. url:'modules/script/query/delete-tag.php',
  69. data:'delete_id='+toDel
  70. });
  71.  
  72. });
  73.  

i wyrzuca mi scieżkę dostępu:
http://localhost/videosite/public/%7B%7B%2...20%7D%7D?term=s
co robię źle?
viking
Gdzie ci tą ścieżkę wyrzuca? Nigdy nie mogłem zrozumieć tego mieszania kodu vanilla z jquery.
Puchatek320
w konsoli jak sprawdzam wysłanie zapytania przez jquery
viking
A ten JS gdzie wrzuciłeś? W szablonie czy jako osobny plik do kompilacji?
Pyton_000
Pewnie kod JS wrzuciłeś do pliku JS, to tak nie zadziała bo js nie jest parsowany przez blade. tego route musisz sobie ustawić jako zmienną JS w szablonie a potem w JS jej użyć
viking
@Pyton_000 Albo https://github.com/tightenco/ziggy
Puchatek320
okey, skorzystałem z Ziggy, zrobiłem zrobiłem artisan ziggy i wyszedł plik js.

  1.  
  2. var Ziggy = {
  3. namedRoutes: {"SitesController@index":{"uri":"\/","methods":["GET","HEAD"],"domain":null},"AuthSitesController@add_tag":{"uri":"add_tag","methods":["GET","HEAD"],"domain":null},"AuthSitesController.save":{"uri":"add_films","methods":["POST"],"domain":null},"AjaxTagController.gettag":{"uri":"gettag","methods":["POST"],"domain":null},"login":{"uri":"login","methods":["GET","HEAD"],"domain":null},"logout":{"uri":"logout","methods":["POST"],"domain":null},"register":{"uri":"register","methods":["GET","HEAD"],"domain":null},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"],"domain":null},"password.email":{"uri":"password\/email","methods":["POST"],"domain":null},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"],"domain":null},"password.update":{"uri":"password\/reset","methods":["POST"],"domain":null},"password.confirm":{"uri":"password\/confirm","methods":["GET","HEAD"],"domain":null},"home":{"uri":"home","methods":["GET","HEAD"],"domain":null}},
  4. baseUrl: 'http://localhost/',
  5. baseProtocol: 'http',
  6. baseDomain: 'localhost',
  7. basePort: false,
  8. defaultParameters: []
  9. };
  10.  
  11. if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
  12. for (var name in window.Ziggy.namedRoutes) {
  13. Ziggy.namedRoutes[name] = window.Ziggy.namedRoutes[name];
  14. }
  15. }
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22. $(function() {
  23. $( "#tag" ).autocomplete({
  24. source: "route('AjaxTagController.gettag'); "
  25. });
  26. });
  27.  
  28. var id = 0;
  29. $("#addTag").click(function(){
  30. if($("#tag").val() ) {
  31.  
  32. id++;
  33. var li = document.createElement("li");
  34. li.className = "tags";
  35. li.setAttribute("id", id);
  36.  
  37. var i = document.createElement("INPUT");
  38. i.setAttribute("name","multiTag[]");
  39. i.setAttribute("type","hidden");
  40. i.setAttribute("id", id);
  41.  
  42. var tag = document.getElementById('tag').value;
  43.  
  44. li.innerHTML = " " + tag + ' <button class=\"deleteTag btn-delete\" id=\"'+id+'\">X</button>'
  45. i.setAttribute("value", tag);
  46.  
  47. $("#tagList").append(li)
  48. $("#tagList").append(i)
  49. $('#tag').val('');
  50. }});
  51.  
  52. $("#tagList").on('click', 'button.deleteTag', function() {
  53.  
  54. var idDiv = this.id;
  55. $("#"+idDiv).remove()
  56. $(":input[id='"+idDiv+"']").remove();
  57.  
  58. });
  59.  
  60. $("#tagList").on('click', 'button.deleteTagExsit', function() {
  61.  
  62. var del_id = this.id;
  63. var toDel = del_id.replace('id_', '');
  64. $("#id_"+toDel).remove();
  65. $.ajax({
  66. type:'POST',
  67. url:'modules/script/query/delete-tag.php',
  68. data:'delete_id='+toDel
  69. });
  70.  
  71. });
  72.  
  73.  
  74.  


Problem niestety nie rozwiązany bo dalej jest "route('AjaxTagController.gettag');%20?term=s" plik jest w osobnym plikiem po za blade mam jeszcze pytanie czy dobrze zrobiłem route jeśli zapytanie idzie get? zmiast post? nie będzie problemu z routem? bo dodaje "%20?term=s"

okey zrobiłem to w jednym pliku. W app. blade mam <script src="{{ asset('js/app.js') }}" ></script> niestety w add.blade musiałem dodać <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> ponieważ nie mogę ogarnąć dlaczego cały czas jest "$ is not defined" podobno laravel ma wbudowany jquery jeśli próbuje dodać lokalnie ui to przestają działać funkcje toptill nie wiedzieć czemu. Ale do rzeczy

  1.  
  2. <script>
  3.  
  4. $(function() {
  5. $( "#tag" ).autocomplete({
  6. source: "{{route('AjaxTagController.gettag')}}"
  7. });
  8. });
  9.  
  10. var id = 0;
  11. $("#addTag").click(function(){
  12. if($("#tag").val() ) {
  13.  
  14. id++;
  15. var li = document.createElement("li");
  16. li.className = "tags";
  17. li.setAttribute("id", id);
  18.  
  19. var i = document.createElement("INPUT");
  20. i.setAttribute("name","multiTag[]");
  21. i.setAttribute("type","hidden");
  22. i.setAttribute("id", id);
  23.  
  24. var tag = document.getElementById('tag').value;
  25.  
  26. li.innerHTML = " " + tag + ' <button class=\"deleteTag btn-delete\" id=\"'+id+'\">X</button>'
  27. i.setAttribute("value", tag);
  28.  
  29. $("#tagList").append(li)
  30. $("#tagList").append(i)
  31. $('#tag').val('');
  32. }});
  33.  
  34. $("#tagList").on('click', 'button.deleteTag', function() {
  35.  
  36. var idDiv = this.id;
  37. $("#"+idDiv).remove()
  38. $(":input[id='"+idDiv+"']").remove();
  39.  
  40. });
  41.  
  42. $("#tagList").on('click', 'button.deleteTagExsit', function() {
  43.  
  44. var del_id = this.id;
  45. var toDel = del_id.replace('id_', '');
  46. $("#id_"+toDel).remove();
  47. $.ajax({
  48. type:'POST',
  49. url:'modules/script/query/delete-tag.php',
  50. data:'delete_id='+toDel
  51. });
  52.  
  53. });
  54.  
  55. </script>
  56.  
  57.  
  58. i
  59.  
  60.  
  61. $searchTerm = $request -> get('term');
  62.  
  63. $tags = DB::table('tags')
  64. ->where('name', 'like', '%'.$searchTerm.'%')
  65. ->get();
  66.  
  67. $output = '<ul class="dropdown-menu"
  68. style="display:block;
  69. position:relative">';
  70. foreach ($tags as $data) {
  71.  
  72.  
  73. $output .='<li>'.$data->name.'<li>';
  74.  
  75. $data->name;
  76. $data->id;
  77.  
  78. }
  79.  
  80. $output .='<ul>';
  81.  
  82. echo $output;
  83.  


i input o classie "form-control ui-autocomplete-input" wyrzuca "No search results." mimo że w konsoli pokazuję listę li to nie widać nic w polu input :/
viking
$ jest undefined bo skąd ma LV wiedzieć że chcesz go użyć? Poczytałeś trochę o laravel-mix? https://laravel.com/docs/7.x/mix Masz najpierw uruchomi npm i, potem npm run watch co przepuści kod przez webpack. I dobrze aby ten twój kod znalazł się jako np zaimportowany moduł w JS a nie dowolne wrzutki.
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.