Avatar billede hans01 Forsker
24. november 2016 - 05:40 Der er 16 kommentarer og
1 løsning

kan ikke få min datepicker script til at virke

Jeg har planket et datepicker script herfra: https://eonasdan.github.io/bootstrap-datetimepicker/ som jeg har smidt ind i min bootstrap 3 side.Jeg kan dog ikke få datepickeren til at virker.

Mit headtag ser sådan ud:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/full-slider.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<!--load font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>


og min datepicker ser sådan ud:

<div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>

Hvad har jeg glemt?
Avatar billede Slater Ekspert
24. november 2016 - 08:16 #1
Har du inkluderet jQuery og Bootstraps Javascript-fil, som det afhænger af?
Avatar billede hans01 Forsker
24. november 2016 - 10:45 #2
de her er lige inden lukke tagget.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
Avatar billede keysersoze Guru
24. november 2016 - 11:07 #3
Får du en fejl i console? Kom gerne med et link.
Avatar billede Slater Ekspert
24. november 2016 - 11:26 #4
Hvis det bliver inkluderet lige inden luk-tag'et, så forsøger du jo at kalde jQuerys shorthand funktion $() før jQuery er loadet.
Avatar billede hans01 Forsker
24. november 2016 - 11:28 #5
jeg har lige lagt den op her, http://jeppes-kartofler.dk/

i den øverste menu, tryk på bestilling, så åbner et vindue derinde er der en datepicker der gerne skulle dels skrive aktuel dato i feltet, og dels åbne datepickeren så man kan vælge dato, det er ingen fejl meldinger så vidt jeg kan se..
Avatar billede hans01 Forsker
24. november 2016 - 11:30 #6
dvs jeg skal flytte jquery linket op i head tag?
Avatar billede Slater Ekspert
24. november 2016 - 11:30 #7
Jep, du får den forventede fejl: "bootstrap-datetimepicker requires jQuery to be loaded first"

Du kan ikke kalde jQuery funktioner før du har loadet jQuery.
Avatar billede Slater Ekspert
24. november 2016 - 11:33 #8
Og ja, det er én mulighed at flytte script tag'et op i head, eller bare højere op på siden end hvor du bruger det.

Du har nok hørt, at det er en god idé for performance at flytte det ned i bunden. Det er også korrekt, men så er du stadig nødt til at udføre alt script, der afhænger af det, EFTER det punkt. Som regel foregår det ved at inkludere din egne eksterne .js-fil, og så evt. udføre alting i en onready-funktion.

Hvis du har behov for at kalde script fra selve HTML'en, så ja, så er det nødvendigt at flytte script tags, det afhænger af, højere op. Og det vil være den nemmeste løsning her.
Avatar billede hans01 Forsker
24. november 2016 - 14:47 #9
så er de flyttet, ingen funktion af datapickeren, hvad gør jeg lige galt?
Avatar billede keysersoze Guru
24. november 2016 - 15:07 #10
Hvis det er den kode, der ligger online så tag et kig i din developer toolbars console - den fortæller det hele; du skal loade jquery før du loader datepicker.
Avatar billede olsensweb.dk Ekspert
24. november 2016 - 15:31 #11
som andre også har skrevet lige disse 2 js ind som de første js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

dvs før du loader andet js.

så lig det lige efter den block hvor du loader CSS

og som keysersoze skriver "kig i din developer toolbars console - den fortæller det hele; du skal loade jquery før du loader datepicker. "

at udvikle uden at bruge browserens udviklings værktøjer (F12) evt med add-on's er som at udvikle med bind for øjene.
Avatar billede hans01 Forsker
25. november 2016 - 03:07 #12
Så har jeg flyttet rundt på JS links, og ingen fejl i konsolen, virker lortet niks..
Avatar billede olsensweb.dk Ekspert
25. november 2016 - 05:00 #13
>og ingen fejl i konsolen, virker lortet niks..
jeg må have en anderledes console end du har !!
jeg får dette
Uncaught TypeError: $(...).datepicker is not a function(?) line 41
http://jeppes-kartofler.dk/fonts/glyphicons-halflings-regular.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
data:application/javascript;base64,dmFyIHVyY2hpblRyYWNrZXI9ZnVuY3Rpb24oKXt9LF9nYXE9e3B1c2g6ZnVuY3Rp?:1 Uncaught SyntaxError: Unexpected token var
http://jeppes-kartofler.dk/fonts/glyphicons-halflings-regular.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://jeppes-kartofler.dk/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)



<script type='text/javascript'>
$(function(){
$('.input-group.date').datepicker({  <-- line 41
    calendarWeeks: true,
    todayHighlight: true,
    autoclose: true
}); 
});
</script>


jeg tror datepicker skal hedde datetimepicker

<script type='text/javascript'>
$(function(){
$('.input-group.date').datetimepicker({
    calendarWeeks: true,
    todayHighlight: true,
    autoclose: true
}); 
});
</script>


og så ser det ikke ud som om du loader
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>



noget vist code fra view-source:https://eonasdan.github.io/bootstrap-datetimepicker/
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
Avatar billede hans01 Forsker
25. november 2016 - 05:55 #14
så var der sgu, jeg skulle bare skifter til det rigtige navn.. Tusind tak Hr. Olsen
Avatar billede keysersoze Guru
25. november 2016 - 10:48 #15
Avatar billede olsensweb.dk Ekspert
25. november 2016 - 11:43 #16
#15 helt enig
diverse browsere har indbygget som minimum console og andre småting, men man får flere muligheder med nogle tilføjelse (addons)

til firefox anbefaler jeg som minimum den addon der hedder firebug, og gerne web-developer tools
https://addons.mozilla.org/da/firefox/addon/firebug/
https://addons.mozilla.org/da/firefox/addon/web-developer/


til chrome anbefaler jeg web-developer tools
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

@keysersoze: du kunne overveje at smide ovenstående link ind på siden


ligeledes, validerer man altid sin side jf
https://validator.w3.org/
http://jigsaw.w3.org/css-validator/

linkene og muligheden ligger også i web-developer tools


og man slår altid fejlvisning til når man skriver server code (PHP, ASP(x), .....), og man retter selvføgelig de fejl/advarsler der kommer, og slå fejlvisning fra når den ligges i produktion
Avatar billede keysersoze Guru
03. december 2016 - 12:29 #17
#16 Artiklen er efterhånden gammel og værktøjer ændrer sig hele tiden så vil helst ikke lægge ord i munden på folk, bare guide på vej. Men det kan da være der snart skal opdateres noget :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester