Jquery가 새 데이터베이스 항목을 업데이트 할 때 새 테이블 행을 업데이트 할 수 있습니까?

Question

PHP/mysql을 사용하여 채워진 기본 HTML 테이블이 있습니다. 누구든지 새 행을 내 데이터베이스에 jQuery를 사용하여 삽입 할 때 테이블의 맨 위에 새 테이블 행을 업데이트하거나 삽입하는 방법을 제안 할 수 있습니까?

내가 봤했지만 사람 만이 나를 도울 수 있다면 사업부 예컨대 :

$(document).ready(function(){ 

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

}); 

나는 그것을 감사 정말 줄을 업데이트하는 방법을 찾을 수 있습니다.

Answer 1

자바 스크립트는 데이터베이스에서 푸시 알림을받을 수 없으므로 지정한 예가 정확합니다.

그러나 데이터가 변경되었는지 여부를 알려주는 AJAX를 통해 Javascript로 일부 값을 반환 한 다음 해당 결과를 보여주는 페이지 부분을 새로 고치는 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); 

이 코드는 /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 :

당신은 아약스 요청에 대해이 코드를 사용할 수 있습니다 이것은 당신이 이러한 유형의 솔루션을 구현할 수있는 방법 그냥 아주 일반적인 예입니다

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

?> 

당신의 필요합니다. U 귀하의 입력 문자열을 웹 사이트에 요소를 변경할 수 있습니다

Answer 4

..

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