已修复。
使用普通的html,css,js和php创建了一个php页面。
在该文件的内部,希望用户能够根据所选日期查看事件。
为了做到这一点,一旦选择了日期,与该日期相关联的值将被发布到php脚本中。
在php脚本中,发布的变量经历了一些条件并回显了结果。
然后,这个php脚本的结果将显示在最初的php页面中。
好的,到目前为止一切顺利。
事情是, 希望文本显示为样式,这意味着,希望它允许样式类。
做了一些研究,但似乎找不到那样的问题。
当您转到该页面并在输入中编写以下内容时:12/22/2016,您可以看到正在显示的数据。问题是, 不会接近风格 。
这在某种程度上是有道理的,因为php脚本在任何地方都没有提到使用这些样式。
样式正在初始的php页面(html / css / js / php)中使用,其中将显示结果。
最初我认为结果中的样式会被识别,因为它是在提到这些样式文件的完全相同的页面中调用的。
这是php脚本的结果:
<div class="tab-pane" role="tabpanel">
<div 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(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer"><a href="#">yyyyyyy</a></span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
这是在php脚本中发布的 javascript代码 ,并在此js代码所在的同一页面的特定div中显示结果,这是php通过此消息一直提到的页面:
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");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div 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(/lascruces_styles/img/events-img/event.jpg);">
<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="#">'.$row['Company_Name'].'</a></span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
答案 0 :(得分:0)
尝试在ajax请求中使用数据类型html:
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
答案 1 :(得分:0)
已解决。 这是php脚本的结果:
<div class="tab-pane" role="tabpanel">
<div 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(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer"><a href="#">yyyyyyy</a></span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
这是 javascript代码 ,它发布在php脚本中,并在该js代码所在的同一页面的特定div中显示结果,该div是php该消息中一直提到该页面:
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");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div 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(/lascruces_styles/img/events-img/event.jpg);">
<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="#">'.$row['Company_Name'].'</a></span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }