1 Тема від Kasper Востаннє редагувалося Kasper (10.04.2017 20:19:15)

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

Тема: календар подій

Привіт. Хочу зробити календар подій, а саме...
є календар, коли юзер клікає на день календаря то зліва від него відображається дані про цей день які зберігаються в базі, проблема заключається в тому що я незнаю як зробити запит до бази щоб отримати дані про день який вибрав юзер. це потрібно зробити без перезагрузки сторінки.
Хтось має ідею як таке зробити?
Код:

<div id='2'>
    <div id='calendarPosition' style='width: 30%; float: left; text-align: left;'>
        <center><span>Оберіть дату</span></center>
        <table id="calendar2">
          <thead>
            <tr><td  id='monthDiv' >‹<td colspan="5"  id='monthName'><td  id='monthDiv'>›
            <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
          <tbody>
        </table>
    
    <script>
    
    function Calendar2(id, year, month) {
        var Dlast = new Date(year,month+1,0).getDate(),
            D = new Date(year,month,Dlast),
            DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
            DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
            calendar = '<tr>',
            month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
        if (DNfirst != 0) {
          for(var  i = 1; i < DNfirst; i++) calendar += '<td  id="day" onclick="showTime()">';
        }else{
          for(var  i = 0; i < 6; i++) calendar += '<td  id="day" onclick="showTime()">';
        }
        for(var  i = 1; i <= Dlast; i++) {
          if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
            calendar += '<td class="today" id="day" onclick="showTime('+i+','+D.getMonth()+')">' + i;
          }else{
            calendar += '<td  id="day" onclick="showTime('+i+','+D.getMonth()+')">' + i;
          }
          if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
            calendar += '<tr>';
          }
        }
        for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
        document.querySelector('#'+id+' tbody').innerHTML = calendar;
        document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
        document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
        document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
        if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
            document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
        }
    }
    Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
    // переключатель минус месяц
    document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
      Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
    }
    // переключатель плюс месяц
    document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() {
      Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
    }
    
    
    function showTime(day, month) {
        alert(day+" - "+month);
    };
    </script>
    </div>
    
    <div id='events' style='width: 60%; float: right;'>
        Тут мають бути дані
    </div>
</div>

Думав в блоці events де мають бути дані зробити sql запит і з допомогою js обновляти той блок, але не знаю як передати вибраний день в sql запит

Подякували: ostap34PHP, Monolith, 221VOLT3

2 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: календар подій

Розберіться з AJAX в JS (що це, як працює) і надсилайте day+" - "+month на сервер в PHP, обробляйте і повертайте в <div id='events'

Подякували: 0xDADA11C7, Kasper, ostap34PHP, Monolith4

3 Відповідь від Kasper

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

Re: календар подій

Розібрався наче з ajax, якщо получати обратку в html то проблем немає, а в json є, незнаю де не так написа.

function showTime(year, month, day) {
        
            var data = { id: year+'-'+(month+1)+'-'+day};
            $.get( "selectBd.php", data, success, "json" );
            function success( forecastData ) {
             // $("#events").html(forecastData);
             alert(  forecastData  );
            };
    };

файл selectBd.php

<?php
include_once('bd.php');

            

            if(isset($_GET['id']))
                $id = $_GET['id'];
            
            //echo $id."<br>";
            $query = mysql_query("SELECT * FROM clients WHERE date = '".$id."'  ORDER BY time ASC;");
            if($query)
            {
              while($row = mysql_fetch_array($query))
              {
                $hairCut = mysql_query("SELECT * FROM hairCut WHERE id = '".$row['hairCutId']."';");
                $myrow = mysql_fetch_array($hairCut);
                
                    $a = $row['time'];
                    $masTime = explode(":", "$a");
                    //echo $masTime[0].'-'.$masTime[1]."<br>";
                    $json[]=array(
                    "hour"=>$masTime[0],
                    "minute"=>$masTime[1]
                     );

              }
            }
            else
            {
              //echo "<p><b>Error: ".mysql_error()."</b><p>";
              exit();
            }
                                echo json_encode($json);

?>

він повертає:
[{"hour":"09","minute":"30"},{"hour":"12","minute":"45"}]
а alert() виводить null.

4 Відповідь від Sensetivity

  • Звідки: Дім
  • Дата реєстрації: 06.01.2015
  • Повідомлень: 378
    • Репутація: 207

Re: календар подій

Kasper написав:

Розібрався наче з ajax, якщо получати обратку в html то проблем немає, а в json є, незнаю де не так написа.

function showTime(year, month, day) {
        
            var data = { id: year+'-'+(month+1)+'-'+day};
            $.get( "selectBd.php", data, success, "json" );
            function success( forecastData ) {
             // $("#events").html(forecastData);
             alert(  forecastData  );
            };
    };

файл selectBd.php

<?php
include_once('bd.php');

            

            if(isset($_GET['id']))
                $id = $_GET['id'];
            
            //echo $id."<br>";
            $query = mysql_query("SELECT * FROM clients WHERE date = '".$id."'  ORDER BY time ASC;");
            if($query)
            {
              while($row = mysql_fetch_array($query))
              {
                $hairCut = mysql_query("SELECT * FROM hairCut WHERE id = '".$row['hairCutId']."';");
                $myrow = mysql_fetch_array($hairCut);
                
                    $a = $row['time'];
                    $masTime = explode(":", "$a");
                    //echo $masTime[0].'-'.$masTime[1]."<br>";
                    $json[]=array(
                    "hour"=>$masTime[0],
                    "minute"=>$masTime[1]
                     );

              }
            }
            else
            {
              //echo "<p><b>Error: ".mysql_error()."</b><p>";
              exit();
            }
                                echo json_encode($json);

?>

він повертає:
[{"hour":"09","minute":"30"},{"hour":"12","minute":"45"}]
а alert() виводить null.

Він повертає масив об'єктів.
Тому, щоб вивести треба прокрутити в циклі

var obj = jQuery.parseJSON(forecastData);
obj.each(function(k, v){
alert(v.hour);
});

Або ж повертати щось типу:

{"start_hour":"09","start_minute":"30", "end_hour":"12","end_minute":"45"}

і тоді:

var obj = jQuery.parseJSON(forecastData);
alert(obj.start_hour);

Sensetivity вебсайт

5 Відповідь від Kasper

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

Re: календар подій

Sensetivity написав:
Kasper написав:

Розібрався наче з ajax, якщо получати обратку в html то проблем немає, а в json є, незнаю де не так написа.

function showTime(year, month, day) {
        
            var data = { id: year+'-'+(month+1)+'-'+day};
            $.get( "selectBd.php", data, success, "json" );
            function success( forecastData ) {
             // $("#events").html(forecastData);
             alert(  forecastData  );
            };
    };

файл selectBd.php

<?php
include_once('bd.php');

            

            if(isset($_GET['id']))
                $id = $_GET['id'];
            
            //echo $id."<br>";
            $query = mysql_query("SELECT * FROM clients WHERE date = '".$id."'  ORDER BY time ASC;");
            if($query)
            {
              while($row = mysql_fetch_array($query))
              {
                $hairCut = mysql_query("SELECT * FROM hairCut WHERE id = '".$row['hairCutId']."';");
                $myrow = mysql_fetch_array($hairCut);
                
                    $a = $row['time'];
                    $masTime = explode(":", "$a");
                    //echo $masTime[0].'-'.$masTime[1]."<br>";
                    $json[]=array(
                    "hour"=>$masTime[0],
                    "minute"=>$masTime[1]
                     );

              }
            }
            else
            {
              //echo "<p><b>Error: ".mysql_error()."</b><p>";
              exit();
            }
                                echo json_encode($json);

?>

він повертає:
[{"hour":"09","minute":"30"},{"hour":"12","minute":"45"}]
а alert() виводить null.

Він повертає масив об'єктів.
Тому, щоб вивести треба прокрутити в циклі

var obj = jQuery.parseJSON(forecastData);
obj.each(function(k, v){
alert(v.hour);
});

Або ж повертати щось типу:

{"start_hour":"09","start_minute":"30", "end_hour":"12","end_minute":"45"}

і тоді:

var obj = jQuery.parseJSON(forecastData);
alert(obj.start_hour);

хм... замінив алерт на:

var obj = jQuery.parseJSON(forecastData);
obj.each(function(k, v){
alert(v.hour);
});

но нічого не відбувається, алерт не виводиться