Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Proponowane tagi z json
Forum PHP.pl > Forum > Przedszkole
Johnas
Witam, mam taki kod:
[JAVASCRIPT] pobierz, plaintext
  1. var citynames = new Bloodhound({
  2. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),
  3. queryTokenizer: Bloodhound.tokenizers.whitespace,
  4. prefetch: {
  5. url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
  6. filter: function (list) {
  7. return $.map(list, function (cityname) {
  8. return { name: cityname };
  9. });
  10. }
  11. }
  12. });
  13.  
  14. citynames.initialize();
  15.  
  16.  
  17. $('#tag').tagsinput({
  18. typeaheadjs: ({
  19. hint: true,
  20. highlight: true,
  21. minLength: 1
  22. }, {
  23. name: 'citynames',
  24. displayKey: 'label',
  25. source: citynames.ttAdapter()
  26. })
  27. });
[JAVASCRIPT] pobierz, plaintext


i owszem, działa jako input z tagami, ale nie wyskakują mi proponowane tagi... W momencie kiedy zmienię $('#tag').tagsinput({ na $('input').tagsinput({ to wyskakują mi tagi, pomimo że w html mam tak:
  1. <div class="form-group row mb-4">
  2. <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Tagi</label>
  3. <div class="col-sm-12 col-md-7">
  4. <input type="text" class="form-control-lg form-control" style="width:100%" id="tag" data-role="tagsinput">
  5. </div>
  6. </div>

trueblue
A nie ma na stronie innego elementu z id="tag"?
Johnas
nie bo jak zmieniłem id na tagers to też nie działa
trueblue
Sprawdzałeś błędy w konsoli przeglądarki?
Johnas
odnosząc się do tego tematu to szablon którego używam nazywa się Stisla, ale nie mam wszystkich bibliotek z assetsów bo zawsze są jakieś błędy w konsoli... dlatego nie pisałem o nich... Szukam tych bibliotek
viking
To czemu ich po prostu nie ściągniesz z https://github.com/stisla/stisla/tree/master/assets?
Johnas
bo nigdzie nie ma tych modułów tongue.gif a jak są to nie działają poprawnie smile.gif

Johnas
Dodałem wszystkie moduły ze strony którą podałeś, ale i tak mam błędy w konsoli smile.gif oto one:


Dodam tylko, że proponowanie tagów mam w pliku custom.js i on nie generuje żadnych błędów...

Konsola:
Kod
ContentDispatcherService: no listeners for an event TAB_STATE__GET_NAVIGATION_METHOD
product-3-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
product-2-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
product-1-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-1.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-2.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-3.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-4.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-5.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
popper.min.js:4 Uncaught SyntaxError: Unexpected token 'export'
tooltip.js:1 Uncaught SyntaxError: Unexpected token '<'
simpleuploadadapter.js:12 Uncaught SyntaxError: Cannot use import statement outside a module
index.js:3 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at index.js:3:45


Oto kod który powinien działać według wszelkiej dokumentacji ale nie działa bo u mnie w życiu nie może być łatwo.... ldlatego nosze tyle blizn na lewej ręce... każdą porażkę zamieniam w ból
[JAVASCRIPT] pobierz, plaintext
  1. /**
  2.  *
  3.  * You can write your JS code here, DO NOT touch the default style file
  4.  * because it will make it harder for you to update.
  5.  *
  6.  */
  7.  
  8. "use strict";
  9. $(document).ready(function () {
  10. /** Nadawanie uprawnień użytkownikowi */
  11. $("#user_select").on("change", function () {
  12. var val = $("#user_select").val();
  13. console.log(val);
  14.  
  15. if (val == 1) {
  16. $("#rank_user").hide();
  17. } else {
  18. $("#rank_user").show();
  19. }
  20. });
  21.  
  22. /** Tagi do bazy danych */
  23. var citynames = new Bloodhound({
  24. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  25. queryTokenizer: Bloodhound.tokenizers.whitespace,
  26. prefetch: {
  27. url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
  28. filter: function (list) {
  29. return $.map(list, function (cityname) {
  30. return { name: cityname };
  31. });
  32. }
  33. }
  34. });
  35.  
  36. citynames.initialize();
  37.  
  38. $('input').tagsinput({
  39. typeaheadjs: {
  40. name: 'citynames',
  41. displayKey: 'name',
  42. valueKey: 'name',
  43. source: citynames.ttAdapter()
  44. }
  45. });
  46.  
  47. ClassicEditor
  48. .create(document.querySelector('.editor'), {
  49.  
  50. licenseKey: '',
  51. ckfinder: {
  52. uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
  53. },
  54. toolbar: ['find', 'replace', '|', 'styles', 'format', 'font', 'fontSize', '|', 'templates', 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo']
  55.  
  56. })
  57. .then(editor => {
  58. window.editor = editor;
  59.  
  60.  
  61.  
  62.  
  63. })
  64. .catch(error => {
  65. console.error('Oops, something went wrong!');
  66. console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
  67. console.warn('Build id: 3v2v0d6fl86w-u9qe9eh2gz51');
  68. console.error(error);
  69. });
  70.  
  71. });
  72.  
[JAVASCRIPT] pobierz, plaintext



o to cały genialny plik custom.js I wiecie co? nie dodaje on żadnego tagu.... ncdkfWEISDMOFSMLPO[F WEAKJH


a to plik citynames.json
Kod
[ "Amsterdam",
  "London",
  "Paris",
  "Washington",
  "New York",
  "Los Angeles",
  "Sydney",
  "Melbourne",
  "Canberra",
  "Beijing",
  "New Delhi",
  "Kathmandu",
  "Cairo",
  "Cape Town",
  "Kinshasa"
]



lco jest nie tak?


Udało mi się w końcu dodać te tagi, ale mam problem ponieważ select chowa się w inpucie i nie wiem jak ustawić jego z-index w taki sposób aby był widoczny.

CSS dla elementu który powinien być widoczny...
Kod
element.style {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 2147483647;
    display: block;
    z-index: 2222222222222222;
}


oraz CSS dla inputa:
Kod
.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    z-index: auto;
}


Edit: zrobiłem... wystarczyło dodać
Kod
overflow: unset!important;

natomiast mam inny problem gdy zamieniam citynames.json który wygląda tak:
Kod
[ "Amsterdam",
  "London",
  "Paris",
  "Washington",
  "New York",
  "Los Angeles",
  "Sydney",
  "Melbourne",
  "Canberra",
  "Beijing",
  "New Delhi",
  "Kathmandu",
  "Cairo",
  "Cape Town",
  "Kinshasa"
]


na mój php który wygląda tak:
Kod
?[ "Zachod slonca",
  "ksiezyc"
]


i wiecie co? skrypt przestaje działać?
kod js
Kod
"use strict";

var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'tags.json',
        filter: function(list) {
            return $.map(list, function(cityname) {
                return { name: cityname }; });
        }
    }
});
citynames.initialize();

//$(".inputtags").tagsinput('items');

$(".inputtags").tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    }
});


nie mam już pojęcia... całą noc z tym walczę
nospor
Pokaz co dokladnie generuje twoj kod php, w kodzie co pokazales widze znak zapytania ktory na pewno psuje wszystko
Ustawiles naglowek JSON w pliku php?
Spojrz w zakladke NETWORK na call ktory idzie do tego php co tak naprawde jest zwracane
Johnas
Kod
["Zachod slonca","ksiezyc"]


a oto kod tego pliku

Kod
<?php
header('Content-type: application/json');
require("../global/config.php");
require("../global/functions.php");
require("../global/engine.class.php");

$engine = new Engine();
//
$array = $engine->mysql->get($engine->prefix."tags"); ///get($engine->prefix."tags");


foreach ($array as $data) {
    $json[] = $data["name"];
}

echo json_encode($json);


hmm... zmieniłem kod javascript
[JAVASCRIPT] pobierz, plaintext
  1. "use strict";
  2.  
  3. var citynames = new Bloodhound({
  4. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  5. queryTokenizer: Bloodhound.tokenizers.whitespace,
  6. prefetch: {
  7. url: 'tags.json',
  8. filter: function(list) {
  9. return $.map(list, function(cityname) {
  10. return { name: cityname }; });
  11. }
  12. }
  13. });
  14.  
  15.  
  16. //$(".inputtags").tagsinput('items');
  17.  
  18. console.log(citynames.ttAdapter());
  19.  
  20.  
  21. $(".inputtags").tagsinput({
  22. typeaheadjs: {
  23. source: function (query, process) {
  24. return $.get('/admin/tags.php', { query: query }, function (data) {
  25. console.log(data);
  26. data = $.parseJSON(data);
  27. return process(data);
  28. });
  29. }
  30. }
  31. });
  32.  
  33.  
[JAVASCRIPT] pobierz, plaintext
nospor
Cytat
hmm... zmieniłem kod javascript

I teraz dziala?
Johnas
nadal nie... jak mam plik json oryginalny który w sumie wygląda tak samo to wczytuje dane, ale mój plik php ignoruje...

[JAVASCRIPT] pobierz, plaintext
  1. "use strict";
  2.  
  3. var citynames = new Bloodhound({
  4. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  5. queryTokenizer: Bloodhound.tokenizers.whitespace,
  6. prefetch: {
  7. url: 'tags.json',
  8. filter: function(list) {
  9. return $.map(list, function(cityname) {
  10. return { name: cityname }; });
  11. }
  12. }
  13. });
  14.  
  15. citynames.initialize();
  16.  
  17. //$(".inputtags").tagsinput('items');
  18.  
  19. console.log(citynames); // <- Ten nie pokazuje w tablicy danych
  20.  
  21.  
  22. $(".inputtags").tagsinput({
  23. typeaheadjs: {
  24. name: 'citynames',
  25. displayKey: 'name',
  26. valueKey: 'name',
  27. source: function (query, process) {
  28. return $.get('/admin/tags.php', { query: query }, function (data) {
  29. console.log(data); // <-- a ta konsola się nie wyświetla
  30. data = $.parseJSON(data);
  31. return process(data);
  32. });
  33. }
  34. }
  35. });
  36.  
  37.  
[JAVASCRIPT] pobierz, plaintext


Tak jak napisałem w komentarzach... konsola się nie wyświetla a tablica citynames pokazuje zero wyników, natomiast jak dam link do pliku którego nie ma to pokazuje mi błąd 404 w konsoli. nie wiem już dlaczego, całą noc z tym walczę smile.gif

Ten drugi generuje błąd w konsoli:
Kod
VM196033:1 Uncaught SyntaxError: Unexpected token ? in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at Object.success (forms-advanced-forms.js:30:26)
    at i (jquery.min.js:2:28017)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28783)
    at A (jquery.min.js:4:14035)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4:16323)


nie ma tego znaku zapytania, a błąd się pojawia w momencie kiedy się usuwa
Kod
header('Content-type: application/json');




Dodaje mi na początku ZWNBSP i nie mam pojęcia jak to usunąć haha.gif
nospor
Sprawdzales w przegladarce w zakladce NETWORK co dokladnie zwraca twoj ajax jak prosilem?

Cytat
Dodaje mi na początku ZWNBSP i nie mam pojęcia jak to usunąć haha.gif

Poprostu tego nie dodawaj wink.gif
Johnas
kodowanie pliku UTF-8 bez BOM powodowało taki glicz, zmieniłem na zwykłe UTF-8 i nie dodaje się już to...
nospor
troche to nie ma sensu, bo wlasnie powinno byc utf8 bez BOM ale cokolwiek tobie dziala smile.gif
Johnas
wszystko działa, wyświetla tagi, pobiera je z bazy, ale jak dodaje nowy do inputa, nie że do bazy to wysyła mi formularz... nie wiem jak to naprawić... problem rodzi problem haha.gif jak ja kocham programować haha.gif
nospor
Cytat
ale jak dodaje nowy do inputa, nie że do bazy to wysyła mi formularz
Nic nie rozumiem z tego co tu wlasnie napisales
Johnas
Jak wciśnie się enter to powinno nowe tagi dodawać w taki sposób:


u mnie po wciśnięciu enter wysyła formularz... nie ma akcji return false
nospor
No to nie wiem czemu ten system tagow tego nie blokuje.
Johnas
znalazłem rozwiązanie, ale też mi się wydaje że system tagów sam w sobie powinien wyłączać to domyślnie... Rozwiązaniem okazał się ten kod:
[JAVASCRIPT] pobierz, plaintext
  1. $("form").keypress(function(e){
  2. if(e.keyCode == 13) {
  3. e.preventDefault();
  4. return false;
  5. }
  6. });
[JAVASCRIPT] pobierz, plaintext
trueblue
Plugin, który używasz nie blokuje zatwierdzania formularza, bo standardowo nie musi być dodany do pola input w formularzu.
A jeśli pole input jest w formularzu, to bardzo dobrze, że nie blokuje, bo to wyłączałoby domyślną możliwość zatwierdzania formularza enterem, tak więc leży to już po stronie użytkownika - tak jak zrobiłeś.
Johnas
ale wyłączyłem zatwierdzanie enterem tylko w przypadku inputa z tagami... jak jego nie ma to można śmiało zatwierdzać smile.gif

Swoją drogą nospor widzę podobieństwo naszych avatarów haha.gif mój pasuje do moich wypowiedzi na forum haha.gif
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.