Can Jquery update/insert new table rows when new database entry?

I have a basic html table that's populated using PHP/mysql. Can anyone suggest how I can update or insert a new table row at the top of the table when a new row is inserted into my database usin开发者_如何转开发g jQuery?

I have Googled but can only find how to update a div e.g.:

$(document).ready(function(){

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

});

I'd really appreciate it if someone can help me with this.

Javascript cannot receive push notifications from the database, so the example you've given is correct.

You can, however, poll the server for changes by returning some value to Javascript via AJAX that tells you whether data has changed, then fire the AJAX request that refreshes the part of the page showing those results.

Either way, you have to poll the server for changes with a setInterval() call. There are ways to enable HTTP streaming, but that's a bit above and beyond the level of this question.

EDIT: For brevity, I'll write an example in 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);

This code requests the /service/getNewData URL and sends a UTC string of the last time the request was sent; this enables the service to find rows with timestamps larger than the UTC timestamp sent by the AJAX call. All you need is to send the rows back as a proper JSON string with the proper HTTP headers and you're all set.

See json_encode().

Not sure about jQuery, but you can do it with AJAX and a few simple PHP code lines.

You can use this code for the ajax requests:

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']");
}

?>

This is just a very general example of how you can implement this kind of solution to your needs.

U can change element on your website with your input string..

HTML:

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

JQUERY:

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

It can replace your previous data with new data..

if u want to know about text method

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

//here do insert update database
//after db insert update return some data as json (object)
echo json_encode($return, JSON_FOCE_OBJECT);
// echo json_encode($return); //if php<5.3
?>

I would suggest to use clone() from a model to add lines to your html like that:

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

That will allow you to define the behavior of your line only once.

For update to your db, you can use the update() function by predrag.music