Может ли Jquery обновлять / вставлять новые строки таблицы при появлении новой записи в базе данных? - PullRequest
Новая
       16

Может ли Jquery обновлять / вставлять новые строки таблицы при появлении новой записи в базе данных?

0 голосов
/ 11 января 2011

У меня есть базовая HTML-таблица, которая заполняется с помощью PHP / mysql.Может кто-нибудь предложить, как я могу обновить или вставить новую строку таблицы вверху таблицы, когда новая строка вставлена ​​в мою базу данных с использованием jQuery?

У меня есть Googled, но я могу найти только, как обновить div, например: 

$(document).ready(function(){

var auto_refresh = setInterval(
function ()
{
$('#some_div').load('test.php').fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds

});

Буду очень признателен, если кто-нибудь поможет мне с этим.

Ответы [ 5 ]

0 голосов
/ 11 января 2011

Я бы предложил использовать clone () из модели для добавления строк в ваш html следующим образом: 

<style type="text/css">
  #line_model {
    display: none;
  }
</style>

<script type="text/javascript">
$(document).ready(function () {
  $('#add_line').click(function () {
    $('#line_model').clone().prependTo('#editor_lines').show();
  });
});
</script>

<div id="editor">
  <input type="button" id="add_line" value="add_line" />
  <div id="line_model">
    <input name="field1[]" />
    <input name="field2[]" />
  </div>
  <div id="editor_lines">
    <div class="line">
      <input name="field1[]" value="test1" />
      <input name="field2[]" value="test2" />
    </div>
    <div class="line">
      <input name="field1[]" value="test3" />
      <input name="field2[]" value="test4" />
    </div>
  </div>
</div>

Это позволит вам определить поведение вашей строки только один раз.

Для обновления вашей базы данных вы можете использовать функцию update (): predrag.music

0 голосов
/ 11 января 2011

U может изменить элемент на вашем сайте с помощью входной строки.

HTML: 

<div id='test'></div>

JQUERY: 

// Instant method to feedback user..
$('#test').text('your_new_data'); // if $.ajax is success do it

Может заменить ваши предыдущие данныес новыми данными ..

, если вы хотите узнать о текстовом методе

0 голосов
/ 11 января 2011 
<code>function update() {
    $.ajax({
        type: 'GET',
        url: 'some.php',
        data: $('form#my_form').serialize(),
        success: function(data) {
            $("#some").html(data);
            window.setTimeout(update, 10000);
        }
    });
};

$(document).ready(function() {
update();
});


<?php
//some.php
echo '<pre>';
//just for  visualization
print_r($_GET);
echo '
';// здесь вставляем обновление базы данных // после обновления вставки db возвращаем некоторые данные в виде json (объект) echo json_encode ($ return, JSON_FOCE_OBJECT);// echo json_encode ($ return);// если php <5.3?>
0 голосов
/ 11 января 2011

Не уверен насчет jQuery, но вы можете сделать это с AJAX и несколькими простыми строками PHP-кода.

Этот код можно использовать для запросов ajax: 

function updateTable() {
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
               //**Place the js table append code**
    }
  }
xmlhttp.open("GET","getSQLrows.php",true);
xmlhttp.send();
}

getSQLrows.php: 

<?php

$query = mysql_query("SELECT * FROM table WHERE used = 0");
while ($result = mysql_fetch_array($query)) {
    echo $result['field'];
    mysql_query("UPDATE table SET used = 1 WHERE id = $result['id']");
}

?>

Это просто очень общий пример того, как вы можете реализовать такое решение для ваших нужд.

0 голосов
/ 11 января 2011

Javascript не может получать push-уведомления из базы данных, поэтому приведенный вами пример верен.

Однако вы можете опрашивать сервер на предмет изменений, возвращая Javascript через AJAX некоторое значение, которое сообщает вам, изменились ли данные, а затем запускаете запрос AJAX, который обновляет часть страницы, отображающую эти результаты.

В любом случае, вы должны опросить сервер на предмет изменений с помощью вызова setInterval(). Существуют способы включить потоковую передачу HTTP, но это немного выше и выше уровня этого вопроса.

РЕДАКТИРОВАТЬ : Для краткости напишу пример в jQuery: 

var getCurrentDate = function() {
  return (new Date()).toUTCString();
};

var lastPing = getCurrentDate();

setInterval(function() {
  $.post(
    '/service/getNewData',
    { from: lastPing },

    function(data) {
      // set the timestamp for the next request
      lastPing = getCurrentDate();

      // assuming the server returns a JSON array of rows
      $('body').append('<p>Last inserted ID: ' + data[data.length - 1].ID + '</p>');

      // you could run a for loop here for each row in data
      for(var i = 0; i < data.length; i++) {
        // ....
      }

    }
  );
}, 5000);

Этот код запрашивает URL /service/getNewData и отправляет строку UTC, когда в последний раз был отправлен запрос; это позволяет службе находить строки с временными метками, превышающими временную метку UTC, отправленную вызовом AJAX. Все, что вам нужно, это отправить строки обратно в виде правильной строки JSON с правильными заголовками HTTP, и все готово.

См. json_encode () .

...