0

タイトルが示すように、div 内に別の html または php ページなしで div を更新することは可能ですか?

たとえば、これは javascript を使用して実行できることです。

  $(document).ready(function () {
     $('#mydiv').delay(10000).load('page.php');
  });

私のDivは、mysqlデータベースから引き出されたデータを表示/保持しますが、その中にはありませんpage.php

これを検索したところ、すべての結果が上に投稿したものと似ていました。

これは可能ですか?

編集:

DIV に現在表示されているデータは$end_time、アイテムのデータです。これ$end_timeは基本的datetimeに、mysql データベースに格納されているものです。すでにカチカチ音をたてて$end_timeいます(JavaScriptを使用したカウントダウンタイマー)。押すたびに 1 分が$end_timemysql に追加されるボタンがあります。

しかし、ボタンが押されたら、変更を表示できるようにページを更新/再ロードする必要があります (この場合、カウントダウン タイマーに 1 分追加されます)。

私がする必要があるのは、そのボタンが押されたら DIV をリロードして、ページをリロードまたは更新せずにカウントダウン タイマーに 1 分が追加されたことをすべてのユーザーが確認できるようにすることです。

編集:

これが私の完全なコードです。これは正常に機能し、mysql データベースからデータをプルするので、プロジェクトのこの部分に問題はありません。

<?php 
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php date_default_timezone_set('Europe/London'); ?>
<?php
session_start();
// Run a select query to get my letest 6 items
// Connect to the MySQL database  
include "config/connect.php";
$dynamicList = "";
$sql = "SELECT * FROM item ORDER BY id";
$query = mysqli_query($db_conx, $sql);
$productCount = mysqli_num_rows($query); // count the output amount
if ($productCount > 0) {
    while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){ 
             $id = $row["id"];
             $product_name = $row["product_name"];
             $date_added = date("Y-m-d", strtotime($row["date_added"]));
             $end_date = date("F d Y H:i:s T", strtotime($row["end_date"]));
             $price = $row["price"];
             $dynamicList .= '<div>' . $end_date . '
      </div>';
    }
} else {
    $dynamicList = "No Records";
}
?>

<?php
$date = $end_date;
$exp_date = strtotime($date);
$now = time();

if ($now < $exp_date ) {
?>
<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdown = document.getElementById('countdown');
    countdown.innerHTML = '';
   if (days) {
        countdown.innerHTML += 'Days: ' + days + '<br />';
    }
    countdown.innerHTML += 'Hours: ' + hours+ '<br />';
    countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
    echo "Times Up";
}
?>
<div id="result"><div id="countdown"></div></div>

<?php echo $end_date; ?> </br>


<?php echo $dynamicList; ?>

<script src="ajax_link.js" type="text/javascript"></script>


<div id="ajaxlink" onclick="loadurl('timeadder.php')">Click here</div>


<input type="submit" name="ajaxlink" id="ajaxlink" value="Submit" onclick="loadurl('timeadder.php')"/>

データベースに 1 分を追加するページのコードは次のとおりです。これも正常に動作します。

timeadder.php

<?php 
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

<?php

session_start();
// Run a select query to get my letest 6 items
// Connect to the MySQL database  
include "config/connect.php";
$sql = "UPDATE item SET end_date = DATE_ADD(end_date,INTERVAL 1 MINUTE) WHERE id = 1;";

$query = mysqli_query($db_conx, $sql);


?>

私がする必要がcountdownあるのは、タイマーを保持する DIV を更新することだけです。

誰かが今助けてくれることを願っています。

4

4 に答える 4

1

新しく投稿されたコードを OP に統合するように変更されました。

ステートメントでは、終了日の前後に div タグを貼り付けていますwhile{}が、div が属するアイテムの終了日を特定する簡単な方法はありません。

提案:

$dynamicList .= '<div id="ed-' .$id. '">' . $end_date . '</div>';

これにより、各終了日の周りに一意の名前の div が作成されます。これで、jQuery を介して特定の終了日にアクセスできるようになりました。

$('#ed-3').html(newdata);

また、これはすべきではありません:

<div id="result"><div id="countdown"></div></div>
<?php echo $end_date; ?> </br>

次のようになります。

<div id="result"><div id="countdown"><?php echo $end_date; ?></div></div>
</br>

HTML:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        
        <script type="text/javascript">
        
            var item_id = 0;
            
            $(document).ready(function() {
            
                $('#mybutt').click(function() {
                    item_id = $(this).attr('id').split('-')[1];
                    updateTimer();
                });

            
            }); //END $(document).ready()
            
            function updateTimer() {
                $.ajax({
                    type: 'POST',
                    url: 'getenddate.php`,
                    data: `item=` + item_id,
                    success: function(fromPhp) {
                        $('#countdown').html(fromPhp);
                        
                        //or, to change this item's end date as echoed out from $dynamicList:
                        //$('#ed-' + item_id).html(fromPHP);
                    } //END success fn
                }); //END AJAX code block
                adder = 0;
            } //END updateTimer fn

        </script>
    </head>
<body>

    <div id="countdown"></div>
    <input id="item-12" type="button" value="Add One Minute">


</body>
</html>

PHP: getenddate.php

<?php

    //item is NAME of var being posted over (key), 
    //item_id is the var contents on the client side ONLY
    //$_POST['item'] is var contents (value) as it arrives on PHP side
    $itemid = $_POST['item'];

    // ** FIXME the query contains a SQL injection vuln,
    // ** please untaint $itemid before using

    //code to return current time value from database - runs every time
    $end = mysql_result(mysql_query("SELECT `end_date` FROM item WHERE `id` = '$item' "), 0);
    
    echo $end;
    
于 2013-09-19T17:55:42.043 に答える
0

私の理解が正しければ、内容に関係なく、DIV の内容を変更したいと思うでしょう。これは次のように実行できます。

HTMLには次のようなものがあります:

<div id="mydiv">My old content, no sites here</div>

JS(jQueryが有効)で実行します(たとえば、ready関数で):

$(document).ready(function () {
   $('#mydiv').html("This content is brand new");
});

上記コードのjsFiddle

この.html()関数は、そのタグの古いコンテンツを削除し、新しいコンテンツに置き換えます。

たとえば、現在の秒数を表示したい場合は、次のようにします。

$(document).ready(function () {
    setInterval(function(){
      // change time
      $('#mydiv').html("Seconds: "+ new Date().getSeconds());
    },1000); 
});

カウンター付きコードのjsFiddle

于 2013-09-19T15:13:17.490 に答える