[JavaScript]Proponowane tagi z json Opcje

[Johnas]

Witam, mam taki kod:

[JAVASCRIPT] pobierz, plaintext 
var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function (list) {
                return $.map(list, function (cityname) {
                    return { name: cityname };
                });
            }
        }
    });
 
    citynames.initialize();
 
 
    $('#tag').tagsinput({
        typeaheadjs: ({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            name: 'citynames',
            displayKey: 'label',
            source: citynames.ttAdapter()
        })
    });
[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:

[HTML] pobierz, plaintext 
<div class="form-group row mb-4">
                      <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Tagi</label>
                      <div class="col-sm-12 col-md-7">
                        <input type="text" class="form-control-lg form-control" style="width:100%" id="tag" data-role="tagsinput">
                      </div>
                    </div>
[HTML] pobierz, plaintext 

[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 a jak są to nie działają poprawnie

[viking]

Tych https://github.com/stisla/stisla/tree/add-c.../assets/modules ?

[Johnas]

Dodałem wszystkie moduły ze strony którą podałeś, ale i tak mam błędy w konsoli 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 
/**
 *
 * You can write your JS code here, DO NOT touch the default style file
 * because it will make it harder for you to update.
 *
 */
 
"use strict";
$(document).ready(function () {
    /** Nadawanie uprawnień użytkownikowi */
    $("#user_select").on("change", function () {
        var val = $("#user_select").val();
        console.log(val);
 
        if (val == 1) {
            $("#rank_user").hide();
        } else {
            $("#rank_user").show();
        }
    });
 
    /** Tagi do bazy danych */
    var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function (list) {
                return $.map(list, function (cityname) {
                    return { name: cityname };
                });
            }
        }
    });
 
    citynames.initialize();
 
    $('input').tagsinput({
        typeaheadjs: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }
    });
 
    ClassicEditor
        .create(document.querySelector('.editor'), {
 
            licenseKey: '',
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
            },
            toolbar: ['find', 'replace', '|', 'styles', 'format', 'font', 'fontSize', '|', 'templates', 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo']
 
        })
        .then(editor => {
            window.editor = editor;
 
 
 
 
        })
        .catch(error => {
            console.error('Oops, something went wrong!');
            console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
            console.warn('Build id: 3v2v0d6fl86w-u9qe9eh2gz51');
            console.error(error);
        });
 
});
 
[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ę

Ten post edytował Johnas 5.04.2022, 07:50:40

[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 
"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 }; });
        }
    }
});
 
 
//$(".inputtags").tagsinput('items');
 
console.log(citynames.ttAdapter());
 
 
$(".inputtags").tagsinput({
    typeaheadjs: {
        source: function (query, process) {
            return $.get('/admin/tags.php', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    }
});
 
 
[JAVASCRIPT] pobierz, plaintext 

[nospor]

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 
"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');
 
console.log(citynames); // <- Ten nie pokazuje w tablicy danych
 
 
$(".inputtags").tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: function (query, process) {
            return $.get('/admin/tags.php', { query: query }, function (data) {
                console.log(data); // <-- a ta konsola się nie wyświetla
                data = $.parseJSON(data); 
                return process(data);
            });
        }
    }
});
 
 
[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ę

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ąć

Ten post edytował Johnas 5.04.2022, 09:37:04

[nospor]

Sprawdzales w przegladarce w zakladce NETWORK co dokladnie zwraca twoj ajax jak prosilem?

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

Poprostu tego nie dodawaj

[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

[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 jak ja kocham programować

[nospor]

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.