2014-07-10 89 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 –