Diskuze: Javascript kalendár + mySQL

JavaScript JavaScript Javascript kalendár + mySQL

Avatar
TEX
Člen
Avatar
TEX:

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. června 0:27
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

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

Nahoru Odpovědět 11. června 6:55
Čím víc vím, tím víc věcí nevím.
Avatar
TEX
Člen
Avatar
Odpovídá na David Hynek
TEX:

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. června 10:14
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. června 12:05
 
Nahoru Odpovědět 11. června 12:03
Avatar
TEX
Člen
Avatar
Odpovídá na Oxtimus
TEX:

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. června 22:23
Avatar
TEX
Člen
Avatar
TEX:

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. června 21:47
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. června 22:07
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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. června 22:11
 
Nahoru Odpovědět 14. června 22:10
Avatar
TEX
Člen
Avatar
TEX:

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.onreadys­tatechange()

 
Nahoru Odpovědět 14. června 22:17
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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

Editováno 14. června 22:22
 
Nahoru Odpovědět 14. června 22:22
Avatar
TEX
Člen
Avatar
Odpovídá na TEX
TEX:

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. června 22:26
Avatar
TEX
Člen
Avatar
TEX:

Zapoznámkoval jsem: ReferenceError: array is not defined
ajax.onreadys­tatechange/<.be­foreShowDay()
/:129
._generateHTML()
jquery-ui.min.js:8
._updateDatepic­ker()
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. června 22:30
 
Nahoru Odpovědět 14. června 22:27
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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 :D

Editováno 14. června 22:31
 
Nahoru Odpovědět 14. června 22:30
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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. června 22:33
Avatar
TEX
Člen
Avatar
Odpovídá na Taskkill
TEX:

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

 
Nahoru Odpovědět 14. června 22:35
Avatar
TEX
Člen
Avatar
Odpovídá na Taskkill
TEX:

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. června 22:38
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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. června 22:40
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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

 
Nahoru Odpovědět 14. června 22:41
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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/tabul­ka/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. června 22:44
 
Nahoru Odpovědět 14. června 22:43
Avatar
TEX
Člen
Avatar
TEX:

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. června 22:47
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na TEX
Taskkill:

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

 
Nahoru Odpovědět 14. června 23:00
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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>[]
  1. 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).
  2. 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. června 23:03
 
Nahoru Odpovědět 14. června 23:01
Avatar
TEX
Člen
Avatar
TEX:

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. června 23:01
Avatar
TEX
Člen
Avatar
Odpovídá na Oxtimus
TEX:

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

 
Nahoru Odpovědět 14. června 23:10
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Oxtimus
Taskkill:

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. června 23:24
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 25 zpráv z 25.