2014-07-10 85 views
1

我正在使用PHP & MySQL和AJAX & jQuery显示我的数据库表中的内容。jQuery的localtime插件在通过ajax加载内容时失败

PHP:像往常一样的服务器端语言。 jQuery:根据用户位置将UTC时间转换为本地时间。由于jQuery的本地时间插件:) AJAX:显示从上一滴选择一个值下拉菜单第2页的内容到1页

总没有的网页:2

page1.php中

我有一个我将HTML表格显示给所有用户的内容。从数据库中提取的值之一是UTC日期时间变量。 要将其转换为用户的当地时间,我只需使用一个jQuery插件。所有我需要做的就是添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.localtime-0.5.js"></script> 
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script> 

上面给出的文件&然后添加一个跨度<span class="localtime"> </span>在我的表&呼应DateTime变量进去。中提琴! UTC时间现在转换为用户的当地时间。

在同一页面中,我有一个下拉菜单,显示我的数据库表中所有用户的列表。在下拉菜单的onchange属性上,我已经调用了AJAX函数。这个函数会将用户名传递给page2.php &数据库操作在page2.php中完成&对应于该用户的结果被计算为&显示为一个类似于我在page1.php中的HTML表格的HTML表。

但是在这张表中,UTC仍然是这样,尽管我也尝试在该页面中添加jQuery文件。为什么jQuery本地时间插件没有将page2中的UTC时间转换为本地时间,而在页面1中执行的时间相同?

这里有两个屏幕截图。

页1之前AJAX内容加载

enter image description here

第1页后AJAX内容加载

enter image description here

第1页

<html> 
<head> 
<title>Converting UTC time to Local time</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.localtime-0.5.js"></script> 
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
<script> 
    function value_pass_func(uname) 
    { 
     if(window.XMLHttpRequest) 
     { 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function()//callback fn 
     { 
      if(xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("showtable").innerHTML=xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("GET","page2.php?variable="+uname,true); 
     xmlhttp.send(); 
    } 
</script> 
</head> 
<body> 
<?php 
$connection = mysqli_connect('localhost','root','','dummydb') or die(mysqli_error($connection)); 
$query="SELECT distinct(user) FROM pagination ORDER BY id ASC"; 
$res = mysqli_query($connection,$query); 
$count = mysqli_num_rows($res); 
?> 
</br> 
</br> 
</br> 
<select id="ddl" name="ddl list" onchange="value_pass_func(this.value);"> 
    <option selected value="">select any</option> 
<?php 
if($count>0) 
{ 
while($row=mysqli_fetch_array($res)) 
{ 
    $now=$row['user']; 
?> 
    <option value="<?php echo $now; ?>"><?php echo $now; ?></option> 
<?php 
} 
} 
?> 
</select> 
</br> 
</br> 
<?php 
$query1="SELECT * FROM pagination ORDER BY id ASC"; 
$res1 = mysqli_query($connection,$query1); 
$count1 = mysqli_num_rows($res1); 
if($count1>0) 
{ 
?> 
<div id="showtable"> 
    <table class="table table-bordered table-responsive table-striped" border="1"> 
     <thead> 
     <tr > 
      <th>id</th> 
      <th>post</th> 
      <th>user</th> 
      <th>now</th> 
     </tr> 
     </thead> 
     <tbody> 
     <?php 
     while($row1=mysqli_fetch_array($res1)) 
     { 
      $idd=$row1['id']; 
      $post=$row1['post']; 
      $username=$row1['user']; 
      $datetime=$row1['now']; 
      ?> 
      <tr> 
       <td><?php echo $idd; ?></td> 
       <td><?php echo $post; ?></td> 
       <td><?php echo $username; ?></td> 
       <td><span class="localtime"> <?php echo $datetime; ?></span></td> 
      </tr> 
     <?php 
     } 
     ?> 
     </tbody> 
    </table> 
</div> 
<?php } ?> 
</body> 
</html> 

第2页

<?php 
$un=$_GET["variable"]; 
$connection = mysqli_connect('localhost','root','','dummydb') or die(mysqli_error($connection)); 

$query="SELECT * FROM pagination where user='".$un."' ORDER BY id ASC"; 
$res = mysqli_query($connection,$query); 
$count = mysqli_num_rows($res); 
?> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.localtime-0.5.js"></script> 
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script> 
<table class="table table-bordered table-responsive table-striped" border="1"> 
    <thead> 
    <tr > 
     <th>id</th> 
     <th>post</th> 
     <th>user</th> 
     <th>now</th> 
    </tr> 
    </thead> 
    <tbody> 
<?php 
    while($row=mysqli_fetch_array($res)) 
    { 
     $idd=$row['id']; 
     $post=$row['post']; 
     $username=$row['user']; 
     $datetime=$row['now']; 
?> 
    <tr> 
     <td><?php echo $idd; ?></td> 
     <td><?php echo $post; ?></td> 
     <td><?php echo $username; ?></td> 
     <td><span class="localtime"> <?php echo $datetime; ?></span></td> 
    </tr> 
<?php 
    } 
?> 
    </tbody> 
</table> 

回答

0

你加载jQuery的..所以我建议你使用它

最简单的回答你的问题是你的innerHTML更换后运行此:

$.localtime.format(".localtime"); 

这将再次评估所有的元素。

我建议你做到以下几点:

  1. 使用jQuery的AJAX(link),让您的表格数据。
  2. 使用JSON交付您的表格数据(link)。
  3. 我个人更喜欢使用Moment.js(link)来格式化我的日期。

一个基本的jQuery的例子..

脚本在第1页:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.localtime-0.5.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
<script> 

    $.localtime.setFormat("yyyy-MM-dd HH:mm:ss"); 

    function value_pass_func(uname) 
    { 
     $.ajax({ 
      type: "GET", 
      url: "page2.php", 
      data: { variable: uname }, 
      dataType: html 
     }).done(function(data) { 
      $("#showtable").innerHTML = data; 
      $.localtime.format(".localtime"); 
     }); 
    } 
</script> 

而在第2页丢弃这些脚本标记。

我还没有测试过这个本地时间脚本,但它可能是它发射时的东西

+0

对不起。它在被解雇时并没有这样做。本地时间脚本现在产生错误。 Uncaught TypeError:undefined不是一个函数。 OR TypeError:$ .localtime.format不是一个函数@Tiele Declercq –