Jqueryは新しいデータベースエントリを更新するときに新しいテーブル行を更新/挿入できますか？

Question

私はPHP/mysqlを使用して作成された基本的なhtmlテーブルを持っています。誰かが、新しい行がjQueryを使用してデータベースに挿入されたときに、テーブルの最上部に新しいテーブル行を更新または挿入する方法を提案できますか？

私はGoogleで検索しているだけのdiv例えばを更新する方法を見つけることができます。：

$(document).ready(function(){ 

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

}); 

誰かがこれで私を助けることができる場合、私はそれを本当に感謝します。

Answer 1

Javascriptはデータベースからプッシュ通知を受け取ることができないので、指定した例は正しいです。

しかし、データが変更されたかどうかを知らせるAJAX経由でJavascriptに値を戻して、その結果を示すページの一部をリフレッシュするAJAXリクエストを起動して、サーバーを変更することができます。

いずれにしても、setInterval()コールで変更をサーバーにポーリングする必要があります。 HTTPストリーミングを有効にする方法はありますが、それはこの質問のレベルを超えています。

EDIT：簡潔にするために、私は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); 

をこのコードは/service/getNewData URLを要求し、要求が送信された最後の時間のUTC文字列を送信します。これにより、サービスは、AJAX呼び出しによって送信されたUTCタイムスタンプよりも長いタイムスタンプを持つ行を見つけることができます。必要なのは、適切なHTTPヘッダーを持つ適切なJSON文字列として行を戻すだけです。すべて設定されています。

json_encode()を参照してください。

Answer 2

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

Answer 3

jQueryについてはわかりませんが、AJAXといくつかの簡単なPHPコード行で行うことができます。

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：

あなたは、Ajaxリクエストのためにこのコードを使用することができます。これは、あなたがこの種のソリューションを実装する方法のほんの非常に一般的な例である

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

?> 

をごニーズ。

Answer 4

Uは...あなたの入力文字列であなたのウェブサイトに

HTML要素を変更することができます。

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

のjQuery：

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

をこれは、新しいデータを使用して、以前のデータを置き換えることができます。..

uが私はそのようなあなたのhtmlに行を追加するモデルからクローンを（）を使用することをお勧め

Answer 5

text methodについて知りたい場合：

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

あなたが行動を定義することができますあなたの行の一度だけ。あなたのDBへの更新のために

、あなたは私はあなたが上記のものの例を大好きだupdate() function by predrag.music