Is it possible to refresh a DIV without another page inside the DIV?

Question

as the title says, is it possible to refresh a div without another html or php page inside of the div?

for example this is what can be done using javascript:

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

My Div shows/holds a data which is pulled from the mysql database and it doesn't have page.php inside it.

I've searched for this and all the results were similar to the one i posted above!

is this even possible and if so how?

EDIT:

the data that currently is displayed in the DIV is the $end_time for an item. the $end_time is basically a datetime which is stored in the mysql database. the $end_time already is ticking (a countdown timer using javascript). There is button which whenever pressed, 1 minute Will be added to the $end_time in the mysql.

But when the button is pressed I need to refresh/re-load the page in order to be able to view the changes (in this case 1 minuted added to the countdown timer).

what I need to do is to reload the DIV once that button is pressed so all the users can see that 1 minute has been added to the countdown timer WITHOUT reloading or refreshing the page.

EDIT:

Here is my full code, this works as it should and it will pull the data from mysql database as it should so I have no problem with this part of the project:

<?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')"/>

and Here is the code for the page that will add the 1 minute to the database and this owrks fie as it should too:

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);


?>

All i need to do is to refresh the DIV countdown that holds the timer.

I hope someone now can help.

Answer 1

The question is unclear, but if your were trying to periodically load a php into a div it could be done with setInterval

setInterval(
   function(){
       $('#mydiv').load('page.php');
  },10000);

EDIT:

Ok then Id suggest Jquery.get

setInterval(function(){
  $.get('page.php',function(timerValue){
     $('#mydiv').html(timerValue);
   });
 },1000);

Answer 2

Modified to integrate newly posted code in OP:

In your while{} statement, you are sticking div tags around the end date, but there is no easy way to identify which item's end date the div belongs to.

Suggestion:

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

That will create a uniquely named div around each end date. Now, you can access a specific end date via jQuery, thus:

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

---

Also, shouldn't this:

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

Be like this:

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

Answer 3

If I understood you right, you want to change the content of a DIV, no matter what is inside. This can be accomplished like this:

in the HTML you have something like:

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

An in the JS(jQuery enabled) you do (for example in the ready function):

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

jsFiddle of the code above

The .html() function deletes the old content of that tag and replaces it with new content.

If you, for example, want to show the current seconds, you can do as follows:

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

jsFiddle of the code with counter

Answer 4

This should be almost exactly what you are looking for (untested):

HTML:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            var adder = 0; //Global var -- outside document.ready

            $(document).ready(function() {

                $('#mybutt').click(function() {
                    adder++;
                    updateTimer();
                });


            }); //END $(document).ready()

            function updateTimer() {
                $.ajax({
                    type: 'POST',
                    url: 'myphpprocessor.php',
                    data: 'addval=' + adder,
                    success: function(fromPhp) {
                        $('#theTimer').html(fromPhp);
                    } //END success fn
                }); //END AJAX code block
                adder = 0;
            } //END updateTimer fn

        </script>
    </head>
<body>

    <div id="theTimer"></div>
    <input id="mybutt" type="button" value="Add One Minute">


</body>
</html>

PHP: myphpprocessor.php

<?php

    $howmuch = $_POST['addval'];

    if ($howmuch > 0) {
        //code to update database by the amount
        //  - only runs if howmuch has a value
    }

    //code to return current time value from database - runs every time
    $thetime = mysql_query('SELECT etc etc etc');

    echo $thetime;

---

Notes:

1. The database only needs to store the number of minutes to be added to the current time
2. Your PHP code can then:
   (a) Query the DB for number of mins to add: $num_mins_to_add
   (b) Create a new date object with current time
   (c) Add the $num_mins_to_add to (b) (d) ECHO back the value