javascript function eksekveres ikke

Hej Søren.

JavaScripts bliver eksekveret af browseren. Åbnes kal.php i en browser, når du kalder den via uddannelse.php? Mig bekendt kan JavaScripts ikke afvikles af ActiveXObjektet (XMLHTTP).

/Sven

Du kan bruge browserens udviklerfunktion til at finde fejl ved afviklingen af javascript.

Uncaught SyntaxError: Invalid or unexpected token

Uncaught TypeError: $(...).flexslider is not a function
->  at HTMLDocument.<anonymous> (main.js:29)
    at j (jquery.js:3148)
    at Object.fireWith [as resolveWith] (jquery.js:3260)
    at Function.ready (jquery.js:3472)
    at HTMLDocument.J (jquery.js:3503)

ved et tryk på en af de grønne datoer i Tilmelding får du denne fejl

uddannelse.php?uddannelse=2:1 Uncaught ReferenceError: reserver is not defined at HTMLButtonElement.onclick (uddannelse.php?uddannelse=2:1)

prøv at flytte js functionen reserver ud i en extern fil du loader i uddannelse.php, istedet for at have den ligggende i kal.php

idet hele taget er AJAX ikke beregnet til at retunere HTML kun rå data, som i starten var i XML format, nu primært er i JSON format

jeg ville lade kal.php retunerer en array af optaget tider i JSON format, og lave alt HTML formateringen i uddannelse.php i denne blok

if (this.readyState == 4 && this.status == 200) 
{
 document.getElementById("days").innerHTML = this.responseText;
}

Hej Søren.

JavaScripts bliver eksekveret af browseren. Åbnes kal.php i en browser, når du kalder den via uddannelse.php? Mig bekendt kan JavaScripts ikke afvikles af ActiveXObjektet (XMLHTTP).

/Sven

Hej Sven, tak for dit input.
Jeg har fundet en tutorial:
https://www.w3schools.com/php/php_ajax_database.asp
Jeg så har bygget videre på. Måske derfor jeg har lidt problemer:

Lige en tanke - du kunne jo prøve at flytte koden fra kal.php ind i uddannelse.php. Kræver måske en smule omskrivning og der findes måske pænere løsninger, men om ikke andet kunne du få prøvet din kode af.

Alternativt kunne JavaScriptet i kal.php måske skrives om til php, men det kommer også an på, hvordan du vil have funktionaliteten til at være.

@Søren Jacobsen:
hvor har du kalender classen fra ??


det de gør på w3schools er retunerer en færdig HTML side uden noget dynamisk, ofte springer w3schools over hvor gærdet er lavest
din kal.php bør ikke indeholde andet en dette:
(utested)

<?php
require_once("...."); //class file til kalender
$kal = new kalender();
$date = 1;
//$day_count = 1;
$year = $_GET['year'];
$month_number = $_GET['month'];
//$date_of_month = date(d);
$number_of_days = cal_days_in_month(CAL_GREGORIAN, $month_number, $year);
$start = mktime(0, 0, 0, $month_number, 01, $year);
$dato_start = $year."-".$month_number."-01";
$dato_slut = $year."-".$month_number."-".$number_of_days;
$blanks = date(N, $start);
$blank = $kal->blank($blanks);
$kal->optaget($dato_start, $dato_slut);
$optaget = $kal->getOptaget();
echo json_encode($optaget); // skal evt være et multi dim array, da $number_of_days, $dato_start, og $dato_slut måske skal med retyr
?>

resten er JS, AJAX er ca 75% js, laves ofte vha feks jquery

Lige en tanke - du kunne jo prøve at flytte koden fra kal.php ind i uddannelse.php.

det er præcis det der skal laves i denne js block

if (this.readyState == 4 && this.status == 200) 
{
 /* 
 decode data der kommer retur
 html formater data
 udskriv html data i days
 
 
 dette skal laves via js
 while ($date <= $number_of_days )  { 
$date = $kal->zero($date);

if (in_array($date, $optaget)) 
{ ?> <li class ="optaget"><span class="optaget"><?php echo $date;?></span></li><?php }
else
{ ?><li class ="ledig"><button class="ledig" value ="<?php echo $year."-".$month_number."-".$date;?>" onclick="reserver(this.value)"><?php echo $date; ?></button></li> <?php }
$date++;
}
?>
<input id="test" name="test" type="date">
*/
 
 ////////// document.getElementById("days").innerHTML = this.responseText;
}

js functionen reserve skal også ligge her i uddannelse.php

Alternativt kunne JavaScriptet i kal.php måske skrives om til php

så skulle hele siden bare reloades hver gang, man skifter måned, hvilke nok er det nemmeste, istedet for at lade kalenderen komme vi AJAX, men det er ikke det mest data mæssige effektive

Så fik jeg endelig lavet min php kode om til JavaScript, og flyttet det til uddannelse.php
Så nu virker min reserver funktion :-)
Jeg har indtil videre beholdt al js i samme fil.
har forsøgt at gemme det i kal.js og kaldt filen via denne kode:

 <SCRIPT TYPE="text/javascript" SRC="JavaScripts/kal.js"></SCRIPT>

men filen bliver ikke indlæst..

kal.php er blevet modificeret så den nu udskriver følgende for Januar måned:
["17","19","22","23","24","25","26","27","28","28","31"]
hvilket er de dage som er "optaget"
http://prosalg.nu/kal_4.php?month=01&year=2018

 <?php
 session_start();
 require_once(".....");
 require_once('....class_kalender.php');
 $kal = new kalender();
 $year = $_GET['year'];
 $month_number = $_GET['month'];
 $number_of_days = cal_days_in_month(CAL_GREGORIAN, $month_number, $year);
 $start = mktime(0, 0, 0, $month_number, 01, $year);
 $dato_start = $year."-".$month_number."-01";
 $dato_slut = $year."-".$month_number."-".$number_of_days;
 $kal->optaget($dato_start, $dato_slut);
 $optag = array(2,6,9);//
 $optaget = $kal->getOptaget();
 echo json_encode($optaget);
 ?>

uddannelse.php:
https://prosalg.nu/uddannelse_4.php?uddannelse=2

 <?php
 session_start();
   require_once(".......");  
   require_once(".....class_uddannelse.php");
   require_once(".....class_book.php");
   require_once('.....class_kalender.php');
   $kal = new kalender();
   $title = "uddannelse";
   $get = $_GET['uddannelse'];
   $uddan = new uddannelse();
   $SetUdd = $uddan->setUddannelse($get);
   $GetUdd = $uddan->getUddannelse();
   $results = $GetUdd->fetchAll(PDO::FETCH_ASSOC)[0];
   $title = $results['udd']; 
   $description = substr($results['beskrivelse'], 0, 160);
   print_header($title, $description, $kontakt);
   /*
   <SCRIPT TYPE="text/javascript" SRC="JavaScripts/reserver.js"></SCRIPT>
  <SCRIPT TYPE="text/javascript" SRC="JavaScripts/kal.js"></SCRIPT>
   */
 ?>
 <script>
 var d = new Date();
 var month = d.getMonth();
 var year = d.getFullYear();
 var number_of_days = daysInMonth(month,year);
 var dags_nummer = getDay();
 
 function mName(number)
 {
     var mn;
 switch (number) 
     {
     case 1:
         mn = "Januar";
         break;
     case 2:
         mn = "Februar";
         break;
     case 3:
         mn = "Marts";
         break;
     case 4:
         mn = "April";
         break;
     case 5:
         mn = "Maj";
         break;
     case  6:
         mn = "Juni";
         break;
     case  7:
         mn = "Juli";
         break;
     case  8:
         mn = "August";
         break;
     case  9:
         mn = "September";
         break;
     case  10:
         mn = "Oktober";
         break;
     case  11:
         mn = "November";
         break;
     case  12:
         mn = "December";
     }
     return mn;
 }
 function load() 
 {
     month = month + 1;
     var m = mName(month);
     document.getElementById("showMonth").innerHTML = m;
     document.getElementById("showYear").innerHTML = year;
     datoer(year, month);
 }
     
 function next() 
 {
         month += 1;
         if (month > 12) { year += 1; month = 1; }
         var m = mName(month);
         document.getElementById("showMonth").innerHTML = m;
         document.getElementById("showYear").innerHTML = year;
         datoer(year, month);
 }
 function prev() 
 {
         month -= 1;
         if (month < 1) { year -= 1; month = 12; }
         var m = mName(month);
         document.getElementById("showMonth").innerHTML = m;
         document.getElementById("showYear").innerHTML = year;
         datoer(year, month);
 }
 function get(m, y)
 {   
         if (window.XMLHttpRequest) 
         {
             // code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         } 
         else 
         {
             // code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.onreadystatechange = function() 
         {
             if (this.readyState == 4 && this.status == 200) 
             {
                 document.getElementById("days").innerHTML = this.responseText;
             }
         }
         xmlhttp.open("GET","kal_4.php?month="+ m + "&year=" + y,true);
         xmlhttp.send();
 }
 
 function reserver(dato)
 {       
         var dato = dato;
         document.getElementById("test").value = dato;
         
 }
 
 function ugedage()
 {
     var days;
     days = ["Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag", "Søndag"];
     
     document.getElementById("weekdays").innerHTML = days;
 }
 
 // Sikrer at datoerne bliver vist korrekt, dagens nummer i ugen
 function blank(dato)
     {
         
         
     }
 function datoer(param_year, param_month)
 {
     //blanks
     var dat = param_year +'-' + param_month + '-' + '-01';
     var dsplit = dat.split("-");
     var newdate =new Date(dsplit[0],dsplit[1]-1,dsplit[2]);
     var count = 1;
     var blank = newdate.getDay();
     var blanks = "";
     while (count <= blank)
     {
         blanks += '<li class="blank"></li>';
         count++;
     }
     //datoer
     var ledig = "";
     var dato_start = 1;
     var dato_slut = new Date(param_year, param_month, 0).getDate();
     var optaget = get(month, year);
     while(dato_start <= dato_slut)
     {
         if(dato_start<10)
         {
             dato_start='0'+dato_start;
         }
         if(month<10)
         {
             mm ='0'+month;
         }
         var valg = dato_start + '-' + mm + '-' + year;
         ledig += '<li class="ledig"><button value ="' + valg + '" onclick="reserver(this.value)">' + dato_start + '</button></li>';
         dato_start++;    
     }
     document.getElementById("blank").innerHTML = blanks + ledig;
     document.getElementById("ledig").value = valg;    
 }
 
 function reserver(dato)
 {       
         var dato = dato;
         document.getElementById("dato").value = dato;        
 }
 </script>
  <body onload="load();">
   
     
     <?php include_once("elements/top-menu.php"); ?>
     
     <section id="pageheader" class="section pageheader">
         <div class="container">
             <div class="col-md-8 col-md-offset-2 text-center">
                 <h1><?php echo $title; ?></h1>
             </div>
         </div>
     </section>
     
     
     <section id="download" class="section feature" style="margin-bottom:0;">
       <div class="container">
         <div class="col-md-6">
           
           <h2><?php echo $title; ?></h2>
           <p><?php echo $results['beskrivelse']; ?></p>
 
           <p><strong>Varighed: <?php echo $results['varighed']; ?> Minutter</strong></p>
 
           <p><?php echo $results['kompetance_beskrivelse']; ?></p>
 
           <p><strong>Max. deltager antal: <?php echo $results['max_antal_deltagere']; ?></strong></p>
 
           <p><strong>Pris: <?php echo $results['pris_virksomhed']; ?> kr. Eksl. moms</strong></p>
         
           
         </div>
             
         
         <div class="col-md-6">
           <p>
             <img src="images/uddannelser/<?php echo $results['billede']; ?>" class="img-responsive" />
           </p>
             
           
             <fieldset>
               <legend>Tilmelding</legend>
                 <div class="month"> 
                     <ul>
                         <li class="prev"><button class="btn btn-warning" id="prev_month" onclick="prev()">&#10094;</button></li> 
                         <li class="next"><button class="btn btn-warning" id="next_month" onclick="next()">&#10095;</button></li>
                         <li id="showMonth"></li><li id="showYear"></li>
                     </ul>
                 </div>
                    
         <ul class="weekdays">
         <?php foreach ($kal->ugedage() as $day)
         {
              echo "<li class='weekdays'>".$day."</li>";
         }
         ?>    
         </ul>
         <ul class="days" id ="blank">
         <li class ="optaget"></li>
         <li class ="ledig"></li> 
         </ul>
                     
             <form class="well form-horizontal" action="book.php" method="post" name="book">
               <!-- Tidspunkt -->
                <div class="form-group">
                 <label class="col-md-4 control-label">Ønsket dato for afholdelse?</label>  
                 <div class="col-md-8 inputGroupContainer">
                   <div class="input-group">
                     <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                     <input id="dato" name="dato" value ="" class="form-control"  type="text">
                   </div>
                 </div>
               </div>
                
                <div class="form-group">
                 <label class="col-md-4 control-label">Ønsket starttidspunkt for afholdelse?</label>  
                 <div class="col-md-8 inputGroupContainer">
                   <div class="input-group">
                     <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                     <input name="tid" value="08:00" class="form-control"  type="time">
                   </div>
                 </div>
               </div>
               
               <input type ="hidden" name ="udd" value="<?php echo $get;?>">
               <input type="hidden" name="navn" value="<?php echo $results['udd']; ?>">
               <input type="hidden" name="pris" value="<?php echo $results['pris_virksomhed']; ?> ">
 
               <!-- Button -->
               <div class="form-group">
                 <label class="col-md-4 control-label"></label>
                 <div class="col-md-8">
                   <button type="submit" class="btn btn-warning" >Book <span class="glyphicon glyphicon-ok"></span></button>
                 </div>
               </div>
 
             </fieldset>
           </form>
         </div>
         
       </div>
     </section>
     
     <?php include_once("elements/footer.php"); ?>
     <?php include_once("elements/footer-scripts.php"); ?>
     
   </body>
 </html>

Så langt så godt, nu er det "kun" følgende funktion som volder mig problemer:

 function get(m, y)
 {   
         if (window.XMLHttpRequest) 
         {
             // code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         } 
         else 
         {
             // code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.onreadystatechange = function() 
         {
             if (this.readyState == 4 && this.status == 200) 
             {
                 document.getElementById("days").innerHTML = this.responseText;
             }
         }
         xmlhttp.open("GET","kal_4.php?month="+ m + "&year=" + y,true);
         xmlhttp.send();
 }

i stedet for at skrive kal_4.php til days, kan der så oprettes et js array som jeg kan arbejde med?
eks.: var optaget = this.responseText; return optaget;
så kunne jeg måske lave denne form for sammenligning som jeg gjorde i php:

 if (in_array($date, $optaget)) 
     { ?> <li class ="optaget"><span class="optaget"><?php echo $date;?></span></li><?php }

Så langt så godt, nu er det "kun" følgende funktion som volder mig problemer:

kig på dette lille eks

<!DOCTYPE html>
<html lang="da"><!--<![endif]-->
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Førstehjælp ved hjertestop</title>
        <style>
            .ledig {
                border: none;
                background: green;
                display: inline-block;
                color:white;
                /* width: 100%; */
                height: 100%;
                cursor:pointer;
            }

            .optaget{
                background: red;
                display: inline-block;
                color:white;
                /* width: 100%; */
                height: 100%;
            }
        </style>
        <script>
            var d = new Date();
            var month = d.getMonth();
            var year = d.getFullYear();
            // https://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array
            /*
             function inArray(needle, haystack) {
             var length = haystack.length;
             for(var i = 0; i < length; i++) {
             if(haystack[i] == needle) return true;
             }
             return false;
             }
             */

            // locutus.io er vistnok tidligere phpjs.org der ikke mere svare
            // http://locutus.io/php/array/in_array/
            function in_array(needle, haystack, argStrict) { // eslint-disable-line camelcase
                var key = ''
                var strict = !!argStrict
                if (strict) {
                    for (key in haystack) {
                        if (haystack[key] === needle) {
                            return true
                        }
                    }
                } else {
                    for (key in haystack) {
                        if (haystack[key] == needle) { // eslint-disable-line eqeqeq
                            return true
                        }
                    }
                }
                return false
            }

            function get(m, y) {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        // console.log(this.responseText);

                        var myObj = JSON.parse(this.responseText);
                        var optaget = myObj['tagen'];
                        var diverse = myObj['other'];
                        var number_of_days = diverse['number_of_days'];

                        var html = "";
                        for (i = 1; i <= number_of_days; i++) {
                            if (in_array(i, optaget)) {
                                html += '<li class="optaget"><button class="optaget" value ="' + ZeroFront(i) + '-' + ZeroFront(m) + '-' + year + '"">' + ZeroFront(i) + '</button></li>';
                            } else {
                                html += '<li class="ledig"><button class="ledig" value ="' + ZeroFront(i) + '-' + ZeroFront(m) + '-' + year + '" onclick="reserver(this.value)">' + ZeroFront(i) + '</button></li>';
                            }
                        }
                        document.getElementById("days").innerHTML = html;
                    }
                }
                xmlhttp.open("GET", "kal.php?month=" + m + "&year=" + y, true);
                xmlhttp.send();
            }

            function ZeroFront(s) {
                /*
                 var i;
                 if  (s < 10) i = "0"+s;
                 else i = s+1;
                 return i;
                 */
                return (s.toString().length < 2 ? "0" + s : s).toString();
            }

            function mName(number)
            {
                var mn;
                switch (number) {
                    case 1:
                        mn = "Januar";
                        break;
                    case 2:
                        mn = "Februar";
                        break;
                    case 3:
                        mn = "Marts";
                        break;
                    case 4:
                        mn = "April";
                        break;
                    case 5:
                        mn = "Maj";
                        break;
                    case  6:
                        mn = "Juni";
                        break;
                    case  7:
                        mn = "Juli";
                        break;
                    case  8:
                        mn = "August";
                        break;
                    case  9:
                        mn = "September";
                        break;
                    case  10:
                        mn = "Oktober";
                        break;
                    case  11:
                        mn = "November";
                        break;
                    case  12:
                        mn = "December";
                }
                return mn;
            }
            function load() {
                month = month + 1;
                var m = mName(month);
                document.getElementById("showMonth").innerHTML = m;
                document.getElementById("showYear").innerHTML = year;
                get(month, year);
            }

            function next() {
                month += 1;
                if (month > 12) {
                    year += 1;
                    month = 1;
                }
                var m = mName(month);
                document.getElementById("showMonth").innerHTML = m;
                document.getElementById("showYear").innerHTML = year;
                get(month, year);
            }
            function prev() {
                month -= 1;
                if (month < 1) {
                    year -= 1;
                    month = 12;
                }
                var m = mName(month);
                document.getElementById("showMonth").innerHTML = m;
                document.getElementById("showYear").innerHTML = year;
                get(month, year);
            }


            function reserver(dato) {
                var dato = dato;
                document.getElementById("dato").value = dato;
            }
        </script>
    </head>
    <body onload="load();">
        <section id="download" class="section feature" style="margin-bottom:0;">
            <div class="container">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                    <p>
                        <img src="hjertestarter.jpg" class="img-responsive">
                    </p>
                    <fieldset>
                        <legend>Tilmelding</legend>
                        <div class="month">
                            <ul>
                                <li class="prev"><button class="btn btn-warning" id="prev_month" onclick="prev()">?</button></li>
                                <li class="next"><button class="btn btn-warning" id="next_month" onclick="next()">?</button></li>
                                <li id="showMonth">Januar</li><li id="showYear">2018</li>
                            </ul>
                        </div>

                        <ul class="weekdays">
                            <li class="weekdays">Mandag</li><li class="weekdays">Tirsdag</li><li class="weekdays">Onsdag</li><li class="weekdays">Torsdag</li><li class="weekdays">Fredag</li><li class="weekdays">Lørdag</li><li class="weekdays">Søndag</li>
                        </ul>
                        <ul class="days" id="days">
                            <!-- indhold kommer via AJAX -->
                        </ul>

                        <form class="well form-horizontal" action="https://prosalg.nu/book.php" method="post" name="book">
                            <!-- Tidspunkt -->
                            <div class="form-group">
                                <label class="col-md-4 control-label">Ønsket dato for afholdelse?</label>
                                <div class="col-md-8 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                        <input id="dato" name="dato" value="" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">Ønsket starttidspunkt for afholdelse?</label>
                                <div class="col-md-8 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                        <input name="tid" value="08:00" class="form-control" type="time">
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" name="udd" value="2">
                            <input type="hidden" name="navn" value="Førstehjælp ved hjertestop">
                            <input type="hidden" name="pris" value="3995 ">

                            <!-- Button -->
                            <div class="form-group">
                                <label class="col-md-4 control-label"></label>
                                <div class="col-md-8">
                                    <button type="submit" class="btn btn-warning">Book <span class="glyphicon glyphicon-ok"></span></button>
                                </div>
                            </div>
                        </form></fieldset>
                </div>
            </div>
        </section>
        <!-- footer -->
    </body></html>

kal.php (test)

<?php
$ar = array();
$year = $_GET['year'];
$month_number = $_GET['month'];
$number_of_days = cal_days_in_month(CAL_GREGORIAN, $month_number, $year);
switch ($month_number) {
    case 2: $ar['tagen'] = array("1", "2", "3", "24");
        break;
    case 3: $ar['tagen'] = array("17", "19", "22", "23", "24", "25", "26", "27", "28", "29", "31");
        break;
    default: $ar['tagen'] = array();
        break;
}
$ar['other'] = array("number_of_days" => $number_of_days);
echo json_encode($ar);
?>

så kunne jeg måske lave denne form for sammenligning som jeg gjorde i php:

en del php functioner er omskrevet til js, og kan hentes fra http://locutus.io/php/