Возможно ли обновить DIV без другой страницы внутри DIV?

Question

Как говорится в названии, можно ли обновить div без другой html или php-страницы внутри div?

, например, это то, что можно сделать с помощью JavaScript:

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

Мой Div показывает/держит данные, вытягивается из базы данных MySQL и он не имеет page.php внутри него.

Я искал это, и все результаты были похожи на те, которые я опубликовал выше!

это даже возможно, и если да, то как?

EDIT:

данные, которые в настоящее время отображается в DIV является $end_time для элемента. $end_time - это в основном datetime, который хранится в базе данных mysql. $end_time уже помечает (таймер обратного отсчета с использованием javascript). Существует кнопка, которая при каждом нажатии, 1 минута будет добавлена ​​в $end_time в mysql.

Но когда кнопка нажата, мне нужно обновить/перегрузить страницу, чтобы просмотреть изменения (в этом случае 1 минута добавляется к таймеру обратного отсчета).

Что мне нужно сделать, это перезагрузить DIV после нажатия этой кнопки, чтобы все пользователи могли видеть, что 1 минута была добавлена ​​в таймер обратного отсчета БЕЗ перезагрузки или обновления страницы.

EDIT:

Вот мой полный код, это работает, как должно, и он будет извлекать данные из базы данных 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 минуту в базу данных, и это owrks тьфу, как это должно также:

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


?> 

Все, что нужно сделать, чтобы обновить DIV countdown, который содержит таймер.

Я надеюсь, что кто-то теперь может помочь.

Answer 1

вопрос неясен, но если ваш пытаются периодически загружать PHP в DIV это может быть сделано с setInterval

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

EDIT:

Ок, тогда Id предложить Jquery.get

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

Answer 2

Если я правильно понял, вы хотите изменить содержание DIV, независимо от того, что внутри.Это может быть достигнуто следующим образом:

в HTML у вас есть что-то вроде:

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

An в JS (включен JQuery) вы делаете (например, в готовой функции):

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

jsFiddle of the code above

.html() функция удаляет старое содержимое этого тега и заменяет его новым содержанием.

Если вы, например, хотите, чтобы показать текущие секунды, вы можете сделать следующее:

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

jsFiddle of the code with counter

Answer 3

Метод .load() не делать то, что вы думаете, что он делает.

В вашем вопросе указывается, что вы хотите обновить div из базы данных MySQL, но это не произойдет, если вы используете метод jQuery .load(), он будет работать, только если вы используете AJAX. Это связано с тем, что сервер должен запускать PHP (запрос mysql), а .load() работает в браузере и импортирует страницу. Единственный способ для браузера запросить выполнение PHP (и возвращаемых данных) через AJAX.

Вы знакомы с AJAX? Простите меня, если вы это уже знаете, но в случае, если вы этого не сделаете:

Ajax отправляет данные во внешний php-файл, который обрабатывает полученные данные и отправляет ответ. Это выглядит следующим образом:

FILE # 1:

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#Sel').change(function() { 
        var opt = $(this).val(); 
        var someelse = 'Hello'; 
        var more_stuff = 'Goodbye'; 
        $.ajax({ 
         type: "POST", 
         url: "receiving_file.php", 
         data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff, 
         success:function(data){ 
          alert('This was sent back: ' + data); 
          //Next line adds the data from PHP into the DOM 
          $('#somediv').html(data); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </head> 
<body> 

<div id="somediv"> 
    <select id = "Sel"> 
     <option value ="Song1">default value</option> 
     <option value ="Song2">Break on through</option> 
     <option value ="Song3">Time</option> 
     <option value ="Song4">Money</option> 
     <option value="Song5">Saucerful of Secrets</option> 
    </select> 
</div><!-- #somediv --> 

FILE # 2: receiving_file.php

<?php 
    //This is where you get the data from the browser 
    $recd = $_POST['selected_opt']; 
    $uid = $_POST['someelse']; 

    //This is where you do your MYSQL database changes, for example: 
    //mysql_query("UPDATE `users` SET `fav_song`='$recd' WHERE `user_id` = '$uid'"); 

    //When done, you can echo back some new HTML, like this: 

    $r = '<h1>You chose:</h1>'; 
    $r .= '<p>' . $recd . '</p>'; //adds to $r 

    echo $r; //Use ECHO to send data back to the browser 

---

Вышесказанное полностью рабочий, автономные, копирования, примерный пример. Просто копировать/вставить его в два файла:

1. index.html (или test.php, или любой другой), и
2. receiving_file.php - если вы хотите переименовать этот файл, вы должны также изменить имя в блоке кода AJAX в файле 1.

---

Вот некоторые хорошие сообщения для получения основы AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

Пожалуйста upvote любые сообщения, которые вы найдете полезным.

Answer 4

Это должно быть почти точно то, что вы ищете (непроверенные):

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; 

---

Примечания:

1. базы данных необходимо хранить только несколько минут, чтобы быть добавлены к текущему времени
2. Ваш код PHP может тогда:
   (а) запрос к БД по числу минут до добавить: $ num_mins_to_add
   (б) создать новый объект даты с текущим временем
   (с) Добавьте $ num_mins_to_add к (б) (г) ECHO обратно значение

Answer 5

Изменено для интеграции недавно опубликованного кода в OP:

В вашем заявлении while{} вы придерживаетесь тегов div в конце даты, но нет простого способа определить, к какому концу даты принадлежит 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']; 

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

Пожалуйста, не забудьте upvote все ответы, которые будут полезны для вас