Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Nefunkční semantic ui dropdown

JavaScript JavaScript Nefunkční semantic ui dropdown

Aktivity (1)
Avatar
Dominika Šulcová(dominiQa):10.8.2016 11:54

Ahoj, snažím se používat semantic ui, ale má tam problém s importováním js, projela jsem toho na stacku hodně, ale pořád bez úspěchu. Css se nahraje, ale asi mám špatně import jquery. Zkoušela jsem i jiné verze knihoven ale taky nic.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">

        <title>{ifset title}{include title|stripHtml} | {/ifset}Nette Sandbox</title>

        <link rel="stylesheet" href="{$basePath}/css/semantic.css">
        <meta name="viewport" content="width=device-width">
        {block head}{/block}
</head>

<body>
        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>



        {block scripts}
        <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
        <script src="https://nette.github.io/resources/js/netteForms.min.js"></script>

        <script href="{$basePath}/css/semantic.js"></script>
        <script src="{$basePath}/js/main.js"></script>

        {/block}
        {include content}

                <select name="skills" multiple="" class="ui fluid dropdown">
  <option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
</select>
</div>
</body>
</html>

následně soubor main.js

$(document).ready(function(){
    $('.ui.fluid.dropdown').dropdown();
});
Odpovědět 10.8.2016 11:54
I ♥ nutella
Avatar
Taskkill
Šéfredaktor
Avatar
Odpovídá na Dominika Šulcová(dominiQa)
Taskkill:10.8.2016 14:55

No a jQuery se ti načte?

Každý hledání js bugu vypadá takto:

Firefox -> F12 -> console

Pokud se nezobrazí žádná chyba, zkusit do main.js na doc.ready přidat třeba řádek

console.log($);

A sledovat co to udělá.

Snad by se na tohle téma hodil článek, kdyby si ho někdo přečetl.

Hoď sem výsledek této operace.

 
Nahoru Odpovědět 10.8.2016 14:55
Avatar
Odpovídá na Taskkill
Dominika Šulcová(dominiQa):10.8.2016 15:43
TypeError: $(...).dropdown is not a function

takže se asi nenačítá knihovna toho semanticu že?

Editováno 10.8.2016 15:43
Nahoru Odpovědět 10.8.2016 15:43
I ♥ nutella
Avatar
Odpovídá na Taskkill
Dominika Šulcová(dominiQa):10.8.2016 16:10

tak použila jsem jQuery 3.0 a už z toho není chyba ale warning

jQuery.Deferred exception: $(...).dropdown is not a function @http://localhost/fenixis/www/js/main.js:2:5
resolve/</mig[email protected]://code.jquery.com/jquery-3.0.0.js:3505:21
resolve/</process<@https://code.jquery.com/jquery-3.0.0.js:3573:12
 undefined
Nahoru Odpovědět 10.8.2016 16:10
I ♥ nutella
Avatar
Taskkill
Šéfredaktor
Avatar
Odpovídá na Dominika Šulcová(dominiQa)
Taskkill:10.8.2016 16:44

Ne stále je to chyba. Akorát, že ve trojce se to táhne přes promissu a rejectne se ti to .. ei throwne exception... Okey chyba je na straně toho pluginů jak říkáš ...

Jsi si jistá že tam má být script href ? V řádku kde tahas semantic.js .. nějak mi to nesedí ani podle jejich docs se to tak nedělá, takže určitě to chceš dělat?

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 10.8.2016 16:44
Avatar
Odpovídá na Taskkill
Dominika Šulcová(dominiQa):10.8.2016 17:01

tak skutečně to bylo tím href místo src :D už nikdy nebudu dělat ctrl+c a ctrl+v :D

Nahoru Odpovědět 10.8.2016 17:01
I ♥ nutella
Avatar
Taskkill
Šéfredaktor
Avatar
Odpovídá na Dominika Šulcová(dominiQa)
Taskkill:10.8.2016 17:16

Programátorská lež N° 1 :-)

 
Nahoru Odpovědět  +2 10.8.2016 17:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.