2010-08-16 4 views
2

이 코드를 실행하면 페이지가 자동으로 반복됩니다. 나는 또한 그것을 리프레시 할 필요가있다. 이와 같이사이트의 AJAX refresh ruining 레이아웃

:

Image

EDITED 코드 아래 :

<?php include 'config.php' ?> 
<script language="javascript"> 
function createRequestObject() { 

    var req; 

    if(window.XMLHttpRequest){ 
     // Firefox, Safari, Opera... 
     req = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
     // Internet Explorer 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     // There is an error creating the object, 
     // just as an old browser is being used. 
    alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP"); 
    } 

    return req; 

} 

// Make the XMLHttpRequest object 
var http = createRequestObject(); 

function sendRequest(page) { 

    // Open PHP script for requests 
    http.open('get', page); 
    http.onreadystatechange = handleResponse; 
    http.send(null); 

} 

function handleResponse() { 

    if(http.readyState == 4 && http.status == 200){ 

     // Text returned FROM the PHP script 
     var response = http.responseText; 

     if(response) { 
     // UPDATE ajaxTest content 
     document.getElementById("msgstatus").innerHTML = response; 
     } 

    } 

} 


function repeatloop() 
{ 
sendRequest('test.php'); // replace "inbox-status.php" with your php page's url 
setTimeout("repeatloop()", 10000); 
} 

var replacementDiv = document.createElement("div"); 
replacementDiv.innerHTML = response; 
document.getElementById("msgstatus").innerHTML = replacementDiv.firstChild.innerHTML; 

window.onload=function() { 
repeatloop(); 
} 
</script> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head><body> 

<?php // Collet Latest Posts 

$query = " 
    SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname 
    FROM Wall 
    INNER JOIN Users ON Wall.UserID = Users.UserID 
    ORDER BY Wall.MessageID DESC 
    LIMIT 20;"; 
$result = mysql_query($query) or die('Invalid query: ' . mysql_error()); 

// Collet Post User 
    ?> 
    <div id ="container"> 
     <div id="insideleft"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="profile.php">Edit Profile</a></li> 
       <li><a href="wall.php">Community Wall</a></li> 
       <li><a href="logout.php">Logout</a></li> 
      </ul> 
     </div> 
     <div id="insideright"> 
      <h1>Community Wall</h1> 
      <br /> 
      <div id="postcontainer"> 
       <form method="post" action="wall.php" name="wallpost" id="wallpost"> 
        <input type="text" name="message" id="message" class="message" /> 
        <input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br /> 
       </fieldset> 
       </form> 
      </div> 
      <span id="msgstatus"> 
      <?php while ($row = mysql_fetch_assoc($result)) { ?> 
      <div id="messagecontainer"> 
      <img class="pic" src="dummy.gif"> 
      <p class="messageposter"> 
      <?php echo "<b>{$row['Forename']} {$row['Surname']}</b><br />"; ?> 
      </p> 
      <p class="message"> 
      <?php echo stripslashes($row['Message']); ?> 
      </p> 
      </div> 
      </span> 
<?php 
} ?> 

답변

0

첫째 - 마이클 지적, 당신은 MSG의 상태를 사업부를 사용한다 : 두 번째

- 예제 파일을 가정이 test.php라고, 당신은 다시 페이지의 전체 내용을로드하는 msgstatus 하위 요소 (SQL이 아닌). 브라우저가 실행 가능한 코드를 AJAX 응답에 게시 할 수 없다는 점을 제외하고 실제로이 작업을 무한대로 수행 할 것입니다. 따라서 두 번째 임베디드 계층은 무시됩니다.

나는 코드를 단순화했다고 가정하지만 게시 한 내용을 기반으로 업데이트 된 코드는 다음과 같습니다. 약간의 스타일 차이가 있습니다 (무시해도 좋습니다)!) 단락에서 개행을 처리 할 때 을 p.MESSAGEPOSTER에 포함 시켰습니다 (그래서 제거했습니다).

<?php 

include 'config.php' 

function latestPosts() { 
    $query = " 
    SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname 
    FROM Wall 
    INNER JOIN Users ON Wall.UserID = Users.UserID 
    ORDER BY Wall.MessageID DESC 
    LIMIT 20;"; 

    $result = mysql_query($query) or die('Invalid query: ' . mysql_error()); 

    while ($row=mysql_fetch_assoc($result)) { 
     echo "<div id=\"messagecontainer\"> 
    <img class=\"pic\" src=\"dummy.gif\"> 
    <p class=\"messageposter\"> 
     <b>".$row["Forename"]." ".$row["Surname"]."</b> 
    </p> 
    <p class=\"message\"> 
     ".stripslashes($row["message"]." 
    </p> 
</div>\n"; 
    } 
} 


//Test for AJAX on the post - only output the values. 
if ($_REQUEST['ajax']==1) { 
    latestPosts(); 
    exit(); 
} 


?> 
<script language="javascript"> 
function createRequestObject() { 

    var req; 

    if(window.XMLHttpRequest){ 
     // Firefox, Safari, Opera... 
     req = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
     // Internet Explorer 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     // There is an error creating the object, 
     // just as an old browser is being used. 
    alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP"); 
    } 

    return req; 

} 

// Make the XMLHttpRequest object 
var http = createRequestObject(); 

function sendRequest(page,vars) { 

    // Open PHP script for requests 
    http.open('get', page+'?'+vars); 
    http.onreadystatechange = handleResponse; 
    http.send(null); 

} 

function handleResponse() { 

    if(http.readyState == 4 && http.status == 200){ 

     // Text returned FROM the PHP script 
     var response = http.responseText; 

     if(response) { 
     // UPDATE ajaxTest content 
     document.getElementById("msgstatus").innerHTML = response; 
     } 

    } 
} 


function repeatloop() 
{ 
    sendRequest('test.php','ajax=1'); // replace "inbox-status.php" with your php page's url 
    setTimeout("repeatloop()", 10000); 
} 

window.onload=function() {repeatloop();} 
</script> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head><body> 
    <div id ="container"> 
     <div id="insideleft"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="profile.php">Edit Profile</a></li> 
       <li><a href="wall.php">Community Wall</a></li> 
       <li><a href="logout.php">Logout</a></li> 
      </ul> 
     </div> 
     <div id="insideright"> 
      <h1>Community Wall</h1> 
      <br /> 
      <div id="postcontainer"> 
       <form method="post" action="wall.php" name="wallpost" id="wallpost"> 
        <input type="text" name="message" id="message" class="message" /> 
        <input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br /> 
       </fieldset> 
       </form> 
      </div> 
     <div id="msgstatus"> 
<?php 
//Output the current posts - you may not even want to do this since AJAX will fill it in right after load 
latestPosts();?> 
     </div> 
    <!-- ... we have some truncating! --> 
?> 

몇 가지 다른 점 : 당신이 AJAX 솔루션려고하는 경우에

, 당신은 시작 HTML에서 빈 상자를 떠나는 것을 고려할 수 있습니다 (() 드롭 latestsPosts을, 라인 (118)에서), 및 페이지가 렌더링되면 목록을로드하십시오.

이 현재 코딩하는 방법은, 전체 목록은 AJAX에 의해 다시로드 10 초마다, 당신은 (아마도 ID로?) 최신 게시물을 추적하고 AJAX 명령에 다시이 통과 할 수 있도록 다음 중 하나를

  1. 변경 사항이있을 때만 업데이트가 제공됩니다.(JS 응답 처리는 빈 리턴을 무시합니다. 현재 코드는 상태를 공백으로 겹쳐 씁니다.)
  2. 새 항목 만 제공됩니다. JS 응답 처리는 기존 msgstatus 객체에 새로운 응답을 추가합니다. 이것은 당신이하지 POST 동사를 사용한다 동적 AJAX 스크립트이기 때문에

는 (- http.open 라인에 +'?'+vars 대신 몸에 있어야 그것은 또한 당신이 변수를 게시하는 방법을 일부 변경 필요). 기술적으로 GET을 사용하면 브라우저가 결과를 캐시 할 수 있습니다. 특히 인터넷 익스플로러에서이 사실을 알 수 있습니다 (아이러니 컬하게도 다른 사람들은 그렇지 않지만 W3C 스펙을 따랐습니다). 짧은 이야기 - 일부 사용자는 메시지가 최신 상태로 유지되지 않는다고 불평 할 수 있습니다.

0

스팬 블록 레벨 요소를 포함 할 수 - 스팬 없음 된 div.

response 값에 id="msgstatus" 범위가 포함 된 것처럼 보입니다. 따라서 innerHTML = reponse에서 수행중인 작업은 해당 요소의 새 버전을 추가하는 것입니다. 당신이 당신의 AJAX 스크립트의 응답을 변경하지 않으려면

, 당신은 시도 할 수 :

var replacementDiv = document.createElement("div"); 
replacementDiv.innerHTML = response; 
document.getElementById("msgstatus").innerHTML = replacementDiv.firstChild.innerHTML; 

예 : http://jsfiddle.net/TdmuL/

+0

안녕하세요. 도움에 감사드립니다. 새로 고침이 작동하지 않지만 코드에 추가했습니다. – ritch

+0

위의 수정 된 게시물. – ritch

0

음 ...... 내가 읽어 보지 않았 당신의 모든 게시물,하지만 레이아웃의 일부만로드해야하는 아약스를 통해 무언가를로드 할 때 ... 전체 레이아웃 자체가 아니라면, 그것은 틀린 ........ 효과를 얻습니다. 당신의 경우처럼.

그래서 당신은 PHP를 사용하고 있기 때문에, 아약스 요청을 필터링 한 후 출력 만 다시 필요한 부분 자바 스크립트를 시도 ...........

0

당신은 별도의 PHP를 만들 수하려고 파일을 귀하의 아약스 코드 및 해당 코드를 iframe 안에 넣어 특정 간격 동안 iframe 새로 고침 시간을 설정하십시오. 이 방법으로 특정 부분을 새로 고치고 db에서 값에 액세스 할 수 있습니다.

0

내 의견으로는 JavaScript를 사용하여로드하려는 컨텐츠 (PHP로 작성)가 test.php와 분리되어 test.php에 다시 포함 된 경우 더 좋을 것입니다. 그렇게하면 test.php가 더 깨끗해지고 새 파일에 Ajax 요청이 생겨서 문제가 해결 될 수 있습니다.

관련 문제