Diskuze: Javascript kalendár + mySQL

Jan Štrobl

Člen

Jan Štrobl:11.6.2016 0:27

Zdravím,
dělám jeden rezervační formulář a kvůli kalendáři zde mám i javascript který zatím není obor. Dělá mi zde problém jediná věc a to, že potřebuji aby kalendář byl sám schopný vytáhnout z databáze (sloupce "příjezd" a "odjezd") datumy a označit je. Zatím to mám udělané ručně.
Script:

$.datepicker.regional['cs'] = {
                closeText: 'Cerrar',
                prevText: 'Předchozí',
                nextText: 'Další',
                currentText: 'Hoy',
                monthNames: ['Leden','Únor','Březen','Duben','Květen','Červen', 'Červenec','Srpen','Září','Říjen','Listopad','Prosinec'],
                monthNamesShort: ['Le','Ún','Bř','Du','Kv','Čn', 'Čc','Sr','Zá','Ří','Li','Pr'],
                dayNames: ['Neděle','Pondělí','Úterý','Středa','Čtvrtek','Pátek','Sobota'],
                dayNamesShort: ['Ne','Po','Út','St','Čt','Pá','So',],
                dayNamesMin: ['Ne','Po','Út','St','Čt','Pá','So'],
                weekHeader: 'Sm',
                dateFormat: 'dd.mm.yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['cs']);
function overDen(mesic, den) {
  data = {mesic: mesic, den: den};
  $.post('overden.php', data, function(data, status) {
    a = "";
    if(status == "success") {
      if(data == 1)
        a = "ok"
      else
        a = "ko";
    }
    return a;
  });
}
  $(function() {
  var array = ["2016-06-14" , "2016-06-15" , "2016-06-16"]
    //datum příjezdu
     $( "#datum-prijezdu" ).datepicker({
       minDate: '+0d',
       beforeShowDay: function(date){
          var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
          var month = jQuery.datepicker.formatDate('mm', date);
          var day = jQuery.datepicker.formatDate('dd', date);
          console.log(overDen(month, day));
          return [ array.indexOf(string) == -1 ];
        }
     });
     //datum odjezdu
     var minDat = '+1d';
     $( "#datum-odjezdu" ).datepicker({
        minDate: minDat
     });
  });

Potřebuji prostě řádek " var array = ["2016-06-14" , "2016-06-15" , "2016-06-16"] " nahradit příkazem který to vytáhne sám. Nenašel jsem žádné jiné vlákno, pokud tu už takové je tak se omlouvám. Snad jsem zmínil všechny potřebné informace.

Odpovědět

11.6.2016 0:27

David Hynek

Tvůrce

David Hynek:11.6.2016 6:55

a prosté vložení PHP do kódu nestačí, nebo to máš dynamické? Pak asi jedině přes Ajax...

Nahoru Odpovědět

11.6.2016 6:55

Čím víc vím, tím víc věcí nevím.

Jan Štrobl

Člen

Jan Štrobl:11.6.2016 10:14

Ano, potřebuju to přes Ajax... vyzkoušel jsem už vícero příkazů ale nepomohlo to. Kdyby někdo měl přesný příkaz který bych jen přepsal docela by mi to pomohlo Začínám v tom totiž mít poměrně chaos.

Nahoru Odpovědět

11.6.2016 10:14

Michal

Člen

Michal:11.6.2016 12:03

Pokud chceš vytáhnout data z databáze přes AJAX, musíš JavaScriptem pouze zavolat PHP soubor, který ta data z databáze sám vytáhne a následně je vrátí JavaScriptu. Celou dolní funkci nahraď tímto kódem, který jen vlastně říká, že se má poslat požadavek na server XMLHttpRequest() a jeho výsledek vrátit do proměnné responseText, kterou si uložíš do proměnné array a máš to samé, co předtím s tím rozdílem, že obsah této proměnné nemusíš psát ručně.

$(function () {
    var ajax = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4 && ajax.status === 200) {
            var array = JSON.parse(ajax.responseText);
            //datum příjezdu
            $("#datum-prijezdu").datepicker({
                minDate: '+0d',
                beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    var month = jQuery.datepicker.formatDate('mm', date);
                    var day = jQuery.datepicker.formatDate('dd', date);
                    console.log(overDen(month, day));
                    return [array.indexOf(string) == -1];
                }
            });
            //datum odjezdu
            var minDat = '+1d';
            $("#datum-odjezdu").datepicker({
                minDate: minDat
            });
        }
    };
    ajax.open("GET", "data.php", true);
    ajax.send();
});

Ještě je ale třeba vytvořit PHP soubor se samotným SQL dotazem do databáze a výsledek vypsat v jednoduchém poli přesně tak, jak ho chceš na straně JavaScriptu. Adresu PHP souboru můžeš v JavaScriptu změnit na 3. řádku od zdola. Nyní tedy soubor data.php. Je vcelku jedno, jakým způsobem přistupuješ do databáze, napišu to v klasickém procedurálním MySQLi:

<?php
$db = mysqli_connect("localhost", "root", "", "database");
$data = mysqli_query($db, "SELECT prijezd, odjezd FROM tabulka");
$result = [];
foreach($dates as $date) {
      array_push($result, $date["prijezd"]);
}
echo json_encode($result);

To, co vypíšeš v PHP souboru předáš AJAXu do již zmíněné proměnné responseText, se kterou už můžeš pracovat na straně klienta. Vše také musí být nějak zakódované pro spolehlivý přenos, např. v JSON.

Editováno 11.6.2016 12:05

Nahoru Odpovědět

11.6.2016 12:03

Jan Štrobl

Člen

Jan Štrobl:12.6.2016 22:23

Díky, to jsem potřeboval srozumitelný řešení :)) jedinej problém kterej mi teď naskočil je, že se mi ve formuláři teď nechce zobrazovat ten kalendář. Z předchozích pokusů jsem zjistil že se mi nezobrazuje když někde něco špatně zapsaný takže to teď skenuju a zkouším kde je zakopanej pes :-)

Nahoru Odpovědět

12.6.2016 22:23

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 21:47

Tak nevím, nemůžu to najít. Použil jsem výše uvedený kód ale nastala chyba a to, že se mi teď na stránce nezobrazí ten kalendář když kliknu na daný input. Zde je stránka kde se formulář nachází www.testovaniwebu.mablog.eu v čem může být chyba ? Proč se nezobrazí? hledám chybu už dva dny.

Nahoru Odpovědět

14.6.2016 21:47

Michal

Člen

Michal:14.6.2016 22:07

Objevil jsem v tom svém chybu v názvu proměnné (hned na druhém řádku místo správného $dates je $data. Nefunguje to po opravě?

Nahoru Odpovědět

14.6.2016 22:07

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:10

Máš tam nepořádek v tom ajax.responseText, vypiš si to do konzole. Řekněme uprav svůj JS kód takto

...
if (ajax.readyState === 4 && ajax.status === 200) {
            console.log(ajax.responseText);
            var array = JSON.parse(ajax.responseText);
            //datum příjezdu
            $("#datum-prijezdu").datepicker({
..

pak načti stránku a stiskni F12 a na liště vyber Console ... uvidíš tam co se ti vypsalo, to si prohlídni, nebo to sem hoď, a taky tak uvidíš, že JS interpreter řádí, že JSON.parse() narazilo při parsování JSONu na nějaký neočekávaný character ... tahle věc, ta ladící konzole, se ti bude pro debugování JSka hodit, tak to používej.

EDIT: Vidím, že už se autor kódu vyjádřil a nejspíš tím vyřešil tvůj problém, ale tu konzoli si stejně vyzkoušej. Je to mocnej nástroj.

Editováno 14.6.2016 22:11

Nahoru Odpovědět

14.6.2016 22:10

Neaktivní uživatelský účet

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:17

Date jsem přepsal na dates ale tahle chyba musí být někde v indexu. Ten kód jsem podle tebe upravil a konzole píše :
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
ajax.onreadystatechange()

Nahoru Odpovědět

14.6.2016 22:17

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:22

Zapoznámkuj ten řádek JSON.parse ... ať se to nad tím dostane do konzole.

Editováno 14.6.2016 22:22

Nahoru Odpovědět

14.6.2016 22:22

Neaktivní uživatelský účet

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:26

Když nahradím "=" dvojtečkou tak mi to napíše " missing ; " a když udělám dvojtý nebo trojtý = tak to nepíše vůbec nic ale stejně to nefunguje :/

Nahoru Odpovědět

14.6.2016 22:26

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:27

Zapoznámkoval jsem: ReferenceError: array is not defined
ajax.onreadystatechange/<.beforeShowDay()
/:129
._generateHTML()
jquery-ui.min.js:8
._updateDatepicker()
jquery-ui.min.js:8
._showDatepicker()
jquery-ui.min.js:8
n.event.dispatch()
jquery.min.js:3
n.event.add/r.handle()

E: Teď se mi kalendář zobrazuje ale pouze při výberů datumu odjezdu

Editováno 14.6.2016 22:30

Nahoru Odpovědět

14.6.2016 22:27

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:30

Dobře udělej to takhle, v té funkci zapoznámkuj úplně všechny řádky kromě toho s console.log .. pak to nebude házet chyby a třeba se už konečně dozvíme co je špatně v tom JSONu

Ne nic takovýho dělat nemusíš, já už jsem to zjistil

Editováno 14.6.2016 22:31

Nahoru Odpovědět

14.6.2016 22:30

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:33

Zkus nejdřív tuhle úpravu, nejsem si totiž jistej, jak se do ajax.responseText dostal ten citát z Endora.cz ..

$(function () {
    var ajax = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    ajax.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            var array = JSON.parse(this.responseText);
            //datum příjezdu
            $("#datum-prijezdu").datepicker({
                minDate: '+0d',
                beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    var month = jQuery.datepicker.formatDate('mm', date);
                    var day = jQuery.datepicker.formatDate('dd', date);
                    console.log(overDen(month, day));
                    return [array.indexOf(string) == -1];
                }
            });
            //datum odjezdu
            var minDat = '+1d';
            $("#datum-odjezdu").datepicker({
                minDate: minDat
            });
        }
    };
    ajax.open("GET", "data.php", true);
    ajax.send();
});

Nahoru Odpovědět

14.6.2016 22:33

Neaktivní uživatelský účet

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:35

Napíše to: ReferenceError: ajax is not defined
takže jsem nejspíš zapoznámkoval vic řádků než jsem měl

Nahoru Odpovědět

14.6.2016 22:35

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:38

Když to upravím na to co jsi poslal tak jsem zpátky tam kde jsem byl, SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Nahoru Odpovědět

14.6.2016 22:38

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:40

jj zapoznámkoval, koukal jsem na to v průběhu ale to nevadí zkus to druhou úpravu, jo a nezapomeň teda do toho upraveného kódu co jsem ti teď napsal vložit na stejné místo tenhle upravenej řádek

console.log(this.responseText);

když ani to nezabere, přejmenuj pro zajímavost proměnnou ajax na něco víc jedinečnýho, je možnost, že se to tluče s endora javascriptem ... a pokud ani to nezabere, bude zakopanej pes v tom,co ti vůbec přijde z toho phpčka ...

Nahoru Odpovědět

14.6.2016 22:40

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 22:41

zkus to přejmenování proměnné ajax

Nahoru Odpovědět

14.6.2016 22:41

Neaktivní uživatelský účet

Michal

Člen

Michal:14.6.2016 22:43

Teď jsem přišel na to, že json_encode (na straně PHP) má nějaký problém, pokud nenastavíš kódování dat z databáze (i když se to týká jen textu s diakritikou, takže na datum by to nemělo mít vliv, ale zároveň se tím nic nezkazí). Zkus data.php upravit na následující (a pochopitelně si upravit názvy databáze/tabulka/sloupců):

<?php
$db = mysqli_connect("localhost", "root", "", "database");
mysqli_set_charset($db, "utf8");
$dates = mysqli_query($db, "SELECT prijezd FROM tabulka");
$result = [];
foreach($dates as $date) {
      array_push($result, $date["prijezd"]);
}
echo json_encode($result);

Editováno 14.6.2016 22:44

Nahoru Odpovědět

14.6.2016 22:43

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 22:47

Kdyby byla chyba data.php tak by to akorát nevybralo ty dny ale kalendář sse zobrazil ne ? Když se nezobrazuje mělo by to být v tom javascriptu

Nahoru Odpovědět

14.6.2016 22:47

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 23:00

Ne tak docela, ten js spadne na pokusu parsovat nesprávný vstup z phpčka

Nahoru Odpovědět

14.6.2016 23:00

Neaktivní uživatelský účet

Michal

Člen

Michal:14.6.2016 23:01

Je to možný, ale na tom webu ti to hlásí chybu v tom textu, kterej AJAX přijímá. V konzoli jsem si rozklikl onen token a zjistil, jsem, že Endora přidává ke každému AJAXu reklamu. Ze serveru se tedy místo pole s daty posílá následující:

<div ><div class="souhrn"><div class="eq"><i>„Muži nedovedou ocenit vlastní ženy. To přenechávají druhým.“ </i>Oscar Wilde</div></div></div>[]

Automaticky vkládanou reklamu do AJAXu dle pravidel Endory je prý možné odstranit manuálně přidáním hlavičky souboru (je to v tom odkazu).
Z nějakého důvodu je na konci toho AJAXového stringu prázdné pole, takže je také kolize někde mezi databází a json_encode(), to by podle mě mohlo vyřešit přidání kódování:

mysqli_set_charset($db, "utf8");

protože jinou chybu tam nevidím.

Editováno 14.6.2016 23:03

Nahoru Odpovědět

14.6.2016 23:01

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 23:01

Takhle vypadá zbytek indexu

<?php
//posílání mailu dodělat - nastavitm smtp nevim jak to má endora - zjistim
//na mysql používám pdo - nemusim řešit sql ijnection - nadstavba je free framework
session_start();
if(!empty($_SESSION['hlaska']))
  $hlaska = $_SESSION['hlaska'];
unset($_SESSION['hlaska']);
//převod data z kalendáře na sql fomát
function parseDateToSql($date)
{
  $d = explode(".", $date);
  $ret = $d[2].'-'.$d[1].'-'.$d[0];
  return $ret;
}
include("Db.php");
@Db::connect('localhost', 'hotelhorice', 'hotelhorice', 'hotelhorice1');
if($_POST) {
  if($_POST['jmeno'] != "" && $_POST['prijmeni'] != "" && $_POST['email'] != "" && $_POST['telefon'] != "" && $_POST['datum-prijezdu'] != "" && $_POST['datum-odjezdu'] != "") {
    $prijezd = trim(htmlspecialchars(parseDateToSql($_POST['datum-prijezdu']))).'-14-00-00';
    $odjezd = trim(htmlspecialchars(parseDateToSql($_POST['datum-odjezdu']))).'-10-30-00';
    $jmeno = trim(htmlspecialchars($_POST['jmeno']));
    $prijmeni = trim(htmlspecialchars($_POST['prijmeni']));
    $email = trim(htmlspecialchars($_POST['email']));
    $telefon = trim(htmlspecialchars($_POST['telefon']));
    $poznamky = trim(htmlspecialchars($_POST['poznamky']));
    $pokoj = $_POST['pokoj'];
    $balicky = '';   }
    foreach($_POST['balicek'] as $key => $value) {
       if($_POST['balicek'][$key] != "")
          $balicky = $balicky."-".$_POST['balicek'][$key];
       else
          continue;
    }
    if($balicky == '')
      $balicky = 'NULL';
    else
      $balicky[0] = '';
     //ověření datumů  pokud neni v tomhle termínu zamluvenej pokoj tak vrací 0
     $dotaz = Db::query('SELECT rezervace_id FROM rezervace WHERE pokoj = ?
                         AND prijezd >= ? AND odjezd <= ?
                        ', $pokoj, $prijezd, $odjezd);
    $dotazA = Db::query('SELECT rezervace_id FROM rezervace WHERE pokoj = ?
                         AND ((prijezd BETWEEN ? AND ?)
                         OR (odjezd BETWEEN ? AND ?))
                        ', $pokoj, $prijezd, $odjezd, $prijezd, $odjezd);
    echo $dotazA;
    if($dotaz == 0 && $dotazA == 0)  {
    //příprava na vložení
      $rezervace = array(
        'pokoj' => $pokoj,
        'prijezd' => $prijezd,
        'odjezd' => $odjezd,
        'jmeno' => $jmeno." ".$prijmeni,
        'email' => $email,
        'telefon' => $telefon,
        'balicky' => $balicky,
        'balicky' => $balicky,
        'poznamky' => $poznamky
      );
      //vložení
      $vloz = Db::insert('rezervace', $rezervace);
      if(!$vloz)
        $hlaska = "Nepodařilo se uložit záznam";
      else {
        header('location: #');
        $_SESSION['hlaska'] = "Rezervace proběhla úspěšně";
        }      }    }
?>
<?php
include ("head.php");
?>
 <div class="cover">
 <div class="obsah">
 <br />
 <h2>Rezervace pokojů</h2>
<div id="prava">
<ul id="pokoje">
<li><u>Informace o pokojích</u>                          </li>
<li>Pokoj č.1 - čtyřlůžko                       </li>
<li>Pokoj č.2 - trojlůžko(možnost přistýlek 1)           </li>
<li>Pokoj č.3 - trojlůžko(možnost přistýlek 1)      </li>
<li>Pokoj č.4 - dvoulůžko(možnost  přistýlek 1)                 </li>
<li>Pokoj č.5 - dvoulůžko                                  </li>
<li>Pokoj č.6 - dvoulůžko                             </li>
<li>Pokoj č.8 - trojlůžko                                      </li>
<li>Pokoj č.9 - dvoulůžko + postýlka                         </li>
<li>Pokoj č.10(Kabinet) - dvoulůžko                         </li>
<li>Pokoj č.11(Reditelna) - dvoulůžko (možnost přistýlek 2)</li>
 </ul>
 <p><b>Pozor!</b><br />
 Pobyt platí od 12hodiny příjezdového dne <br /> do 12hodiny odjezdového dne! <br /> Děkujeme za pochopení.</p>
</div>
 <?php if(isset($hlaska)) : ?><p><?= $hlaska ?></p><?php endif; ?>
 <div class="leva">
 <br />
 <form method="post">
  <table id="tab">
  <tr><td>Jméno</td><td><input value="<?php if(isset($jmeno)) echo $jmeno ?>" name="jmeno" type="text"></td>         <td>Den příjezdu</td><td><input name="datum-prijezdu" id="datum-prijezdu" type="text" /></td></tr>
  <tr><td>Příjmení</td><td><input value="<?php if(isset($prijmeni)) echo $prijmeni ?>" name="prijmeni" type="text"></td>   <td>Den odjezdu</td><td><input name="datum-odjezdu" id="datum-odjezdu" type="text" /></td></tr>
  <tr><td>Email</td><td><input value="<?php if(isset($email)) echo $email ?>" name="email" type="email"></td> <td>Telefon</td><td><input  name="telefon" type="text" value="<?php if(isset($telefon)) echo $telefon ?>" /></td>          </tr>
  <tr><td>Zvolte pokoj</td><td><select name="pokoj">
  <option value="1">Pokoj č.1</option>
  <option value="2">Pokoj č.2</option>
  <option value="3">Pokoj č.3</option>
  <option value="4">Pokoj č.4</option>
  <option value="5">Pokoj č.5</option>
  <option value="6">Pokoj č.6</option>
  <option value="7">Pokoj č.7</option>
  <option value="8">Pokoj č.8</option>
  <option value="9">Pokoj č.9</option>
  <option value="10">Pokoj č.10</option>
  <option value="11">Pokoj č.11</option>   </select></td><td rowspan="6" colspan="2"><textarea rows="5" placeholder="Poznámky k rezevaci" id="poznamky" name="poznamky"><?php if(!empty($poznamky)) echo $poznamky ?></textarea></td> </tr>
 <tr><td>Balíčky</td><td></td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="Lyžování" /></td><td>Týdenní lyžování</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="4dny" /></td><td>Čytři dny se zážitky</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="zazitky-tyden" /></td><td>Týden se zážitky</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="relax" /></td><td>Beauty a relax</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="tábor" /></td><td>Letní dětský tábor</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="3+masáž" /></td><td>Tři dny s masáží</td></tr>
 <tr><td><input type="checkbox" name="balicek[]" value="Workshopy" /></td><td>Workshopy</td></tr>
 <tr></tr>
 <tr>   <td id="info" colspan="4">  Informace o balíčcích naleznete <a href="http://hotelhorice.cz/pobytove-balicky/" target="_blank">zde</a> v položce "Akční balíčky"! </td> </tr>
   <tr>     <td>   <input type="submit" value="Potvrdit"> </td><td></td><td></td><td></td>  </tr>
  </table>
 </form>
   </div>
</div>
</div>
<script type="text/javascript">
...
...
</script>
<?php
include ("paticka.php");
?>

Nahoru Odpovědět

14.6.2016 23:01

Jan Štrobl

Člen

Jan Štrobl:14.6.2016 23:10

Přidal jsem to kódování do indexu a stejně nic.

Nahoru Odpovědět

14.6.2016 23:10

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.6.2016 23:24

Mě se zdá, že v tom responsu ale vůbec chybí data z databáze, nebo ne? Ještě pochopím reklamu, i když jsem teda nečekal, že jí endora cpe ke každému ajax responsu, to je fakt hloupé, ale nerozumím tomu, proč tam nejsou ta data z databáze.

Nahoru Odpovědět

14.6.2016 23:24

Neaktivní uživatelský účet

Nejčastěji vyhledáváné

Diskuze: Javascript kalendár + mySQL