构建一个脚本,一旦在日期选择器日历中选择了日期,它就会使用 ajax 在 php 脚本中发布所选日期;
在该 ajax 调用成功后,它使用另一个 ajax 调用将相同的选定日期发布到另一个 php 脚本并将其显示在页面中。
做了一些研究,这似乎是我尝试做的事情的最佳解决方案。
脚本如下:
<script> //for the events
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
// call next ajax function
var mydate = this.value;
$.ajax({
type: "POST",
url: 'boxes_script.php',
data: ({dates: mydate}),
dataType : 'html',
success: function(data) {
$('.caixas').html(data);
alert(data);
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates1: mydate}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
</script>
这是 atm 所使用的代码。由于此处给出的反馈而得到了一些更新,但解决方案仍然没有 100% 有效
这里有一个问题,我认为这是因为第二个 Ajax 调用位于成功的 Ajax 内部。
问题如下: 数据被发布在 php 脚本中,该脚本按照应有的方式运行。 数组中填充了正确的信息。
$('.caixas').html(data);
工作正常并显示来自“boxes_script.php”的数据。
$('.results-ajax').html(data);
接收从“events_script.php”发送的 100% 数据,但出于任何奇怪的原因,不会将其附加到页面。
我可以看到警报消息中的数据,并且这是发送到浏览器的正确数据。
为什么该数据没有附加到页面?
这是“events_script.php”的 php 代码:
<?php
include 'config/config.php';
include 'libraries/database.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
echo $_POST[dates1];
$dias= $_POST[dates1];
$mysql_date = date('Y-m-d', strtotime($dias));
echo $mysql_date;
//Make database query
$sql = "***";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$image = $row['Company_Logo'];
$myArray = json_decode($image, true);
$event=$row['eventID'];
echo '<div class="tab-pane" role="tabpanel">
<div id="'.$dias.'" class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image:url('.$myImage = $myArray[0]['name'].');">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer"><a href="mini-about.php?$company='.$row['Ref_ID'].'">'.$row['Company_Name'].'</a></span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<a href="mini-single-event.php?event='.$event.'"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
}
?>
注意:在错误日志中未发现任何错误。网络给出状态 200。
可以在此处看到发送到浏览器的数据:
数据的第一部分被附加到浏览器,正如您在图像中看到的那样。
为什么不能解决所有问题?
最佳答案
这解决了问题并产生了以下最终结果:
旧:
<div class="row events-tabs">
<div class="container" data-example-id="togglable-tabs">
<ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
</ul>
<div class="results-ajax tab-content" id="myTabContent">
</div>
</div>
</div>
新:
<div class="row events-tabs">
<div class="container" data-example-id="togglable-tabs">
<ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
</ul>
<div class="tab-content" id="myTabContent">
<div class="results-ajax"></div>
</div>
</div>
</div>
所以,基本上使用 results-ajax 作为自己的 div 的类解决了这个问题。
关于javascript - Ajax 和 PHP 调试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42070073/