Jquery Select2, nefunkční načítání Ajaxu
- mordare
- Začátečník | 117
Zdravím
Dělám formulář a potřebuji do něho načítat Tagy z DB (cca
3000 řádků). Všude na webu používám Jquery plugin Select2, který má
možnost Ajaxového načítání dat, což se pro můj problém hodí.
Postupoval sem podle návodu, ale vypadá to že se Ajax nikdy nezavolá
(kontroloval sem pomocí konzole ve FireFoxu).
zkoušelsem i odstranit ostatní JS. knihovny co mám v projektu nahrané, ale
žádná změna.
Když jsem sito ale skoušel uplně mimo Nette tak s tím nebyl žádný
problém. Nemáte náhodou někdo s tím zkušenosti?
Budu rád za každé info.
Díky
Pro ukázku tu dávám jak vypadá JS kód pro Select2
$(".tags").select2({
tags: true,
tokenSeparators: [',', ' '],
ajax:{
url: {link tags!},
dataType: 'json',
data: function (params){
return {
q: params.term,
page: params.page
};
}
}
});ps: zkoušel jsem přímo do Projektu nahrát jejich Demo select využívající Ajax a ten nefungoval taky.
Editoval mordare (26. 1. 2016 10:59)
- iguana007
- Člen | 970
A v konzoli žádná JS chyba není? Spojitost s Nette bych tady asi nehledal, když se ti ani neprovede XHR request. Nemůžeš ukázat více kódu? Nebo tu stránku (ve statické podobě) nahrát třeba na: https://jsfiddle.net/ ?
- mordare
- Začátečník | 117
V JS konzoli žádná chyba právě neni. Zkusím udělat ukázku, ale právě že vždy když sem to vyhodil z toho kontextu projektu tak to fungovalo.
Edit: toto je celá Latte stránka.
{block content}
<div class="row col-md-6">
<!-- Begin: Admin Form -->
<div class="admin-form">
<div class="panel heading-border">
<div class="panel-body bg-light">
<div class="row">
<div class="col-lg-6">
{form videoForm}
<div class="form-group">
<div class="col-sm-3 control-label mt15">
{label title/}
</div>
<div class="col-sm-9 mt5">
{input title}
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label mt15">
{_"Length"}
</div>
<div class="col-sm-3 mt5">
{input hours}
</div>
<div class="col-sm-3 mt5">
{input minutes}
</div>
<div class="col-sm-3 mt5">
{input seconds}
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label mt15">
{label tags/}
</div>
<div class="col-sm-9 mt5">
{input tags}
</div>
</div>
<div class="form-group">
<div class="col-sm-12 control-label mt15">
{input save}
</div>
</div>
{/form}
</div>
<div class="col-lg-6" id="imageBox">
{if isset($photos) && $photos}
{foreach $photos as $id => $path}
<img src="/webapp/data/images{Image::insertSettings($path,'120x90')}" class="checkPhotoVideo{(in_array($id,$rotArr) ? ' rotPhoto' : '' )}{($id == $previewPhoto ? ' previewPhoto' : '' )}" id="vPhoto{$id}">
{/foreach}
{/if}
</div>
</div>
</div>
</div>
</div>
</div>
{/block}
{block scripts}
{include parent}
<script type="text/javascript">
$(document).ready(function() {
$('.checkBoxPhoto[value="1"]').parent().parent().hide().prev().hide();
$('#imageBox').on('click','.checkBoxPhoto' , function(e) {
var id = $(this).attr('id');
id = id.substr(6);
if (e.altKey) {
$("#photoPreview").attr('value', id);
$('.previewPhoto').removeClass('previewPhoto');
$(this).addClass('previewPhoto');
}
else {
check = $('.checkBoxPhoto[value="' + id + '"]');
check.prop("checked", !check.prop("checked"));
$(this).toggleClass('rotPhoto');
}
});
$(".tags").select2({
tags: true,
tokenSeparators: [',', ' '],
ajax:{
url: {link tags!},
dataType: 'json',
data: function (params){
return {
q: params.term,
page: params.page
};
}
}
});
});
</script>
{/block}Editoval mordare (26. 1. 2016 12:12)
- iguana007
- Člen | 970
Když se podíváš do zdrojáku té vygenerované stránky, má určitě ten input tags nastavenou class na tags? V ručním renderu ji nenastavuješ:
{input tags class=>"tags"}zda-li tak činíš v definici formu v PHP netuším, ten kód si neukázal…
Editoval iguana007 (26. 1. 2016 13:10)
- mordare
- Začátečník | 117
JO to je v pořádku. Select2 se na element naváže tak jak má. pouze nefunguje ten Ajaxové načítání dat do toho Select2. Všechno ostatní funguje. Zkoušel sem už měnit JQuery verze i verze Select2 pořád se stejným výsledkem. takže když to shrnu.
- V JS konzoli neni chyba.
- Select2 neprovede Ajax požadavek na získání dat.
- Když vykopíruju stránku ven z Nette projektu všechno běží tak jak má.
- Zkusil sem z projektu odstranit všechny ostatní JS jestli se něco nebije a výsledek byl pořád stejný.
Pokud by ste měli někdo návrh na jiný select Plugin s podporou Tagů a Ajaxového načítání rád vyskouším.
- mordare
- Začátečník | 117
CZechBoY napsal(a):
A do tý metody s voláním ajaxu se teda dojde?
Zkus nějak odebugovat co všechno se volá a co ne. Přece není možný, aby kvůli backendu nejel frontend …
Hodíš nám sem teda nějakou ukázku na který to nejede? Čistý html + js.
Právě že čisté HTML a JS jede. V tom je to kouzlo. Snažím se hodit online celý projekt.