JQuery DatePicker Kullanılamıyor Tarihleri, PHP Json aracılığıyla

Tarihçelendirici kullanıcı arabirimindeki tarihleri dinamik olarak devre dışı bırakmak için kullanılacak tarihleri MySQL veritabanından almaya çalışıyorum. Tarihleri veritabanından aldım ve bir JSON'da kodladım.JQuery DatePicker Kullanılamıyor Tarihleri, PHP Json aracılığıyla

[ 
 
{"dates":"21-03-2016"}, 
 
{"dates":"31-03-2016"}, 
 
{"dates":"31-03-2016"}, 
 
{"dates":"30-03-2016"} 
 
]

Ben alınır ve tarihleri ortadan kaldırmak için kullanılacak JavaScript sayfaya getJSON çalıştık: Bu yankı JSON çıkışıdır. Ancak, datepicker UI artık görünmüyor bile çalışmıyor.

Herhangi bir öneriniz var mı? Teşekkür ederim.

checkDates.php

<?php 
 
$servername = "localhost"; 
 
$username = "user"; 
 
$password = "user"; 
 
$dbname = "ebooking"; 
 

 
// Create connection 
 
$conn = new mysqli($servername, $username, $password, $dbname); 
 
// Check connection 
 
if ($conn->connect_error) { 
 
    die("Connection failed: " . $conn->connect_error); 
 
} 
 

 
$sql = "select booking_date from booking"; 
 
$result = $conn->query($sql); 
 

 
$checkDates = array(); 
 

 
if ($result->num_rows > 0) { 
 
    // output data of each row 
 
    while($row = $result->fetch_assoc()) { 
 
     $checkDate['dates'] = $row['booking_date']; 
 
     
 
     $checkDates[] = $checkDate; 
 
    } 
 
} else { 
 
    echo "0 results"; 
 
} 
 
echo json_encode($checkDates); 
 
$conn->close(); 
 
?>

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
 
pageEncoding="ISO-8859-1"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
    <title>Insert title here</title> 
 
    <link rel="stylesheet" 
 
      href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 

 
    <script> 
 
     $(function() { 
 
      $("#datepicker").datepicker({ 
 
       dateFormat: 'dd-mm-yy', 
 
       beforeShowDay: checkAvailability 
 

 
      }); 
 
     }) 
 
     
 
     $.getJSON('checkDates.php?dld='+ id, function(json){dates=json;}); 
 

 
     function checkAvailability(mydate){ 
 
      var myBadDates = dates; 
 

 
      var $return=true; 
 
      var $returnclass ="available"; 
 
      $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate); 
 

 
      // start loop 
 
      for(var x in myBadDates) 
 
      { 
 
       $myBadDates = new Array(myBadDates[x]['start']); 
 

 
       for(var i = 0; i < $myBadDates.length; i++) 
 
        if($myBadDates[i] == $checkdate) 
 
        { 
 
         $return = false; 
 
         $returnclass= "unavailable"; 
 
        } 
 
      } 
 
      //end loop 
 

 
      return [$return,$returnclass]; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
Date: 
 
<input type="text" id="datepicker"> 
 
</body> 
 
</html>

kaynak

2016-03-26 abcdefg

Eğer dizini dosyasında jQuery ve PHP karıştırma Are sayesinde @Greg_Borbonus php dosyasında düz dizi için

Düzenlendi? – Torchify

@Torchify indeks dosyasında, hem jquery hem de php kullanıyorum. – abcdefg

Checkdates.php adresindeki mime tipiniz uygulama/json olarak ayarlanmalıdır. Tüm dosya orada olmadığından emin değilsiniz. try: 'header ('Content-Type: application/json');' Ayrıca, kontrol edinliğinizde javascript işlevi "tarihler" değişkeni nereden geliyor? $ .getJSON satırında atanmıyor. – Torchify

Tamam, bu yüzden sizin javascript biraz değişmiş ettik ve burada ben ile geldim kod:

$(function() { 
    //ajax call better placed here. 
    id="my ID"; //Define id, as it's not defined in the original post. 
    /* Commented out just for JsFiddle, uncomment this for live version. 
    $.getJSON('checkDates.php?dld=' + id, function(json) { 
    dates = json; 


    $("#datepicker").datepicker({ 
     dateFormat: 'dd-mm-yy', 
     beforeShowDay: checkAvailability 

    }); 
    }); 
    */ 
    //For JsFiddle ONLY remove this section of code for live version. 
    dates = [{ 
    "dates": "21-03-2016" 
    }, { 
    "dates": "31-03-2016" 
    }, { 
    "dates": "31-03-2016" 
    }, { 
    "dates": "30-03-2016" 
    }]; 
    $("#datepicker").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    beforeShowDay: checkAvailability 

    }); 
    //End for JsFiddle 
}); 




function checkAvailability(mydate) { 


    var myBadDates = dates; 

    var $return = true; 
    var $returnclass = "available"; 
    $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate); 


    // start loop 


    for (var x in myBadDates) { 

    if (myBadDates[x].dates == $checkdate) { 
     $return = false; 
     $returnclass = "unavailable"; 
    } 



    } //end loop 



    return [$return, $returnclass]; 
}

bakınız jsFiddle: ajax başarısız olursa o zaman, https://jsfiddle.net/gregborbonus/v1dwqq5r/1/

o kırılacak

Ben kodu kaydetmiştiniz ve güncellenmiş jsFiddle buradadır: https://jsfiddle.net/gregborbonus/v1dwqq5r/2/

Bu sizin için işe yaramazsa php, farklı bir şey tükürme olabilir konum, php komut bağlantı ve Doğru üstbilgileri test edebilirim ve ajax çağrısının kendisini test edebilirim, ama bunun bir sorun olduğundan kuşkuluyum.

kaynak

2016-03-26 17:16:29

Statik değişkenle çalışır, ancak JSON'u uygulamaya çalıştığımda, metin kutusunu tıklattığımda datepicker UI görünmez. – abcdefg

Bana bir jsFiddle gösterebilir misin? –

@abcdefg Eğer php'nizi çözümüm için düzenlediyseniz, Greg'in orijinal iç içe dizisine geri yüklemeniz gerekir. – Torchify

checkdates.php

<?php 
//Set document mime type... this is important since you want to return json not text! 
header('Content-Type: application/json'); 

$servername = "localhost"; 
$username = "user"; 
$password = "user"; 
$dbname = "ebooking"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "select booking_date from booking"; 
$result = $conn->query($sql); 

$checkDates = array(); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     $checkDates[] = $row['booking_date']; 
    } 
} else { 
    echo "0 results"; 
} 
echo json_encode($checkDates); 
$conn->close(); 
?>

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Insert title here</title> 
    <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 


</head> 
<body> 
Date: 
<input type="text" id="datepicker"> 
</body> 
<script> 
    var badDates; 
    $.getJSON('checkDates.php, function(json){badDates=json;}); 

    $(function() { 
     $("#datepicker").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      beforeShowDay: function(date) { 
       if($.inArray($.datepicker.formatDate('dd-mm-yy', date), badDates) > -1) 
       { 
        return [false,"Unavailable","Booked"]; 
       } 
       else 
       { 
        return [true,"Available","Not Booked"]; 
       } 
      } 
     }); 
    }) 

</script> 
</html>

bu deneyin. İçerik türünü php dosyasına ekledim. Ayrıca javascript biraz değiştirdim.

kaynak

2016-03-26 17:41:26 Torchify

Güzel kod, çok temiz. Tek sorun, php kodunun şu: '$ checkDate [' tarih '] = $ row [' booking_date ']; $ checkDates [] = $ checkDate; 'Bu, $ checkDate dizisini $ $ checkDates dizisinde yeni bir öğe olarak yerleştirir. js kodunuzun çalışması için tek boyutlu bir diziye ihtiyacınız vardır, bu php kodu 2 boyutlu bir dizi oluşturur. –

@Torchify Öneriniz için teşekkür ederiz. Önerinizi hayata geçirdim, ancak müsait olmayan tarihler grileştirilmiyor. PHP dosyasını klasör yapısına nereye yerleştiririm? Web İçerik klasörüne yerleştirir miyim? – abcdefg

Kodumu @GregBorbonus keman çatalında kontrol ettim ve işe yarıyor. (bkz. https://jsfiddle.net/qo74smpz/) Krom devollerde xhm dönüşünü kontrol edebilir ve php'nin ne olduğunu görebiliyor musunuz? Aksi halde Greg'in çözümünü uygulayabilirsiniz. – Torchify

JQuery DatePicker Kullanılamıyor Tarihleri, PHP Json aracılığıyla

cevap

İlgili konular