2010-02-02 7 views
2

작업 대기열을 포함하는 데이터베이스 테이블이 있습니다. 별도의 프로그램이 이러한 작업을 처리합니다. 사용자가 대기열의 진행 상태를 볼 수있는 웹 페이지를 제공하고 싶습니다. 테이블을 쿼리하고 JSON 형식으로 반환하는 서버 측 스크립팅은 문제가되지 않습니다.jQuery - 작업 큐 폴링

jQuery와 에 대한 정보를 읽었습니다. 시각적 큐를 만드는 데이 플러그인을 사용하는 것이 가능한지 궁금합니다 (기본 설명은 큐의 항목 당 행이있는 하나의 열 테이블입니다). 완료된 작업은 다음 번에 제거됩니다. 투표 할 시간이야. 내가 말했듯이, 서버 측 스크립트는 문제가되지 않는다. 나는 이런 종류의 UI/애니메이션 주위에서 머리를 맞을 수가 없다. 추가 정보를 얻으려면 팁을 주시면 감사하겠습니다. 잘못된 트리를 완전히 짖어 내고 싶다면 나에게도 알려주십시오.

미리 감사

답변

8

에 나는 PeriodicalUpdater 플러그인에 익숙하지 않은,하지만 난 당신이라면, 나는 단순히 자바 스크립트의 "의 setTimeout"기능을 사용으로 보일 것이다. setTimeout을 사용하면 지정된 간격으로 함수를 실행할 수 있습니다. 상황에 관련이 예를 들어

은 여기를 참조 :

<script type="text/javascript"> 

setTimeout("updateTable();", 5000); 

function updateTable() 
{ 
    $.post("/your_script.php", {}, function(result) { 

      $("#my_table").html(result); 

    }); 
    setTimeout("updateTable", 5000); 
} 

</script> 

주 : 1 초 1000 밀리가 있습니다를, 그 기능은 5 초마다 해고하도록 설계되어 있으므로. 또한

...

나는 당신의 큐 테이블의 각 항목은 그와 관련된 고유 한 ID를 가지고 있으리라 믿고있어. , 즉

<table> 
<tr id='q1'><td>Queue Item 1</td></tr> 
<tr id='q2'><td>Queue Item 2</td></tr> 
<tr id='q3'><td>Queue Item 3</td></tr> 
<tr id='q4'><td>Queue Item 4</td></tr> 
<tr id='q5'><td>Queue Item 5</td></tr> 
</table> 

를 대기열 테이블에 테이블의 항목이 동일한 ID를 각 행을 지정 : 기본 HTML 페이지 내에서, 나는 테이블과 같이 출력 할 것이다. 그런 다음 AJAX 호출에서 결과를 반환하면 대기열 항목 중 하나라도 완료되었는지 확인할 수 있습니다. 있을 경우 다음과 같이 할 수 있습니다.

$("#q1").fadeOut("fast"); 
+0

당신은 내가 가지고 제공 : <스크립트 유형 = "텍스트를/javascript "> setTimeout ("updateTable(); ", 10000); updateTable 함수() { $ .post ("test.pl"{} 함수 (결과) { \t \t $ ("# txtJSON") 발 (결과). \t \t $ ("# jobtable ").html (결과); }}); setTimeout ("updateTable();", 10000); } <표 아이디 = '#의 jobtable'> <입력 유형 = '텍스트'ID = 'txtJSON'> 내가 JSON을 얻을 같은 : { "MYDATA" [ \t { "REC_NO": "107045", "JOB_ID": "1", "JOB_TEXT" "태스크 1"} \t { "REC_NO": "107046", "JOB_ID": "1" , "JOB_TEXT": "작업 2"} \t} 하지만 $ ("# jobtable"). html (result)은 테이블을 생성하지 않습니다. –

0

긴 폴링이 필요하지 않습니다. setInterval을 사용하여 큐를 새로 고치려면 정기적 인 ajax 호출 만 있으면됩니다. 서버를 호출 할 때마다, 당신은 전체 기존의 큐를 얻을 현재 큐에 비교하고, 더 이상 존재하는 것들을 제거 : 예를 바탕으로

<script type="text/javascript"> 
var old_result = {}; 
setInterval(function(){ 
    $.post(YOUR_URL, {}, function(result) { 
     //compare result with old_result 
     //remove missing elements using an animation on that row 
     //set old_result to result 
    }); 
}), 5000); 

</script>