jQuery的本地時間插件在通過Ajax加載內容時失敗

Question

我正在使用PHP和MySQL以及AJAX和jQuery來顯示數據庫表中的內容。

PHP：照常使用服務器端語言。 jQuery：根據用戶位置將UTC時間轉換為本地時間。 感謝jQuery localtime插件:) AJAX：在從下拉菜單中選擇值時，將page2的內容顯示到page1中

總頁數：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中完成，並計算與該用戶相對應的結果，並將其顯示在HTML表中，類似於我在page1.php中的HTML表。

但是在此表中，即使我也嘗試在該頁面中添加jQuery文件，UTC仍然保持原樣。 為什么jQuery localtime插件在page2中將UTC時間沒有轉換為localtime時卻沒有將其轉換為localtime？

這是兩個屏幕截圖。

加載AJAX內容之前的頁面1

在此處輸入圖片說明

加載AJAX內容后的第1頁

在此處輸入圖片說明

第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>

Answer 1

您正在加載jquery ..所以我建議您使用它

您問題的最簡單答案是在替換innerHTML之后運行此命令：

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

這將再次評估所有元素。

我建議您執行以下操作：

使用jquery的AJAX（鏈接）獲取表數據。
使用JSON（ link ）傳遞表數據。
我個人更喜歡使用Moment.js（鏈接）來格式化我的日期。

一個基本的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>

並將這些腳本標簽放在page2中。

我還沒有測試過本地時間腳本，但是它可能在被解雇時就可以了

jQuery的本地時間插件在通過Ajax加載內容時失敗

問題描述

1 個解決方案

解決方案1
0 2014-07-10 12:24:36

jQuery的本地時間插件在通過Ajax加載內容時失敗

問題描述

1 個解決方案

解決方案1 0 2014-07-10 12:24:36

解決方案1
0 2014-07-10 12:24:36