2011-08-23 139 views
1

我有一個網站頁面,其中只包含一個字段給出收件箱中郵件數量的數據,而且我需要隨時刷新這些郵件,以便用戶在此頁面上可以看到有新消息。我怎麼能打電話給我的JS/ajax來做更新?如何調用頁面上沒有提交按鈕的JS/ajax?

我試過header(「Refresh:10」);但客戶並不滿意,因爲它刷新了整個頁面,他只希望消息不要刷新,因爲他們進來...有人可以幫忙嗎?感謝

我這個頁面代碼:

<?php use_stylesheets_for_form($search_form) ?> 
<?php use_javascripts_for_form($search_form) ?> 
<div id='div_longgray_gradient2'> 
<div id='div_float_img'> 
<br/> 
<table width='96%' border='0'> 
<tr> 
    <td colspan='2' align='right'> 
    <form action="<?php echo url_for('profiles/search') ?>" method="post" > 
     <table> 
     <tr> 
     <td> 
     <span class='spn_med_lightblue_rbc'>Profile Search &nbsp;&nbsp; 
     </span> 
     <?php echo $search_form['uc_other']->render(array('default')); ?>  </td> 
     <td><input class='submit_img' type="image" src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td> 
    </tr> 
      </table> 
      </form> 
    </td> 
    </tr> 
    <tr> 
    <td rowspan='2' width='40px' align='left'> 
     <img src='/images/rainbow/arrow.png'> 
    </td> 
    <td align='left'> 
     <span class='spn_big_black_rbc'>WELCOME <?php echo $usr_profile->getName() ?></span> 
    </td> 
    <td align='left'> 
    <?php  
     if (0) 
     { 
     // $filename = $usr_profile->getMsisdn(); 
     $filename = $usr_profile->getProfilePicPath(); 
     if ($filename && file_exists($filename)) 
     {     
      $source = imagecreatefromjpeg($filename); 
     } 
     else 
     {     
      $filename = $usr_profile->getDefaultProfilePicPath(); 
      $source = imagecreatefromjpeg($filename); 
      echo "<span class='spn_big_black_rbc'>You have not uploaded an image yet</span>";     
     } 

    } 
    if($usr_profile->existsProfilePic()==FALSE) 
    { 
     echo "<span class='spn_big_black_rbc'>You have not uploaded an image yet</span>";  
     echo "</br>";   
    } 

    if($usr_profile->checkForMissingInfo()== 1) 
    { 
     echo "<span class='spn_big_black_rbc'>You have some missing info</span>"; 
     echo "&nbsp;&nbsp;&nbsp;&nbsp;"; 
     echo link_to('Edit','profile/edit','class=link_medium'); 
    } 
    ?> 

    </td> 
</tr> 
<tr> 
<td align='left'> 
    <span class='spn_med_lightblue_rbc'>TO RAINBOW</span> 
    <span class='spn_med_black_rbc'>CODE</span> 
    <span class='spn_med_lightblue_rbc'>...SHINE ON</span> 
    </td> 
    <td> 
    </td> 
</tr> 
</table> 
<br/> 
<table class='table_border_light' width='820px'> 
<tr> 
    <td class='td_header_blue' colspan='3' align='left'> 
     <span class='spn_big_black_rbc'> 
     MY FEEDS 
     </span> 
    </td> 
    <td class='td_header_blue' colspan='3' align='left'> 
     <span class='spn_big_black_rbc'> 
      RAINBOWCODE NEWS 
     </span> 
    </td> 
</tr> 
<tr> 
    <td valign='top' colspan='3' width='50%' align='left'>    
    <span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span> 
    <?php echo link_to('Messages','messagebox/list','class=link_medium_blue'); ?>  
     </br> 
     <span class='spn_med_black_rbc'>You have 
      <?php 
       echo sizeof($block_records); 
      ?> blocked users </span> 
    </td> 
    <td valign='top'colspan='3' width='50%' align='left'> 
      <ul>     
      <li> 
       <a href="http://spreadsheets.google.com/a/miranetworks.net/spreadsheet/viewform?formkey=dEVlYTdJTzZiU0JPTnZqYWlZQTJRZ0E6MQ" class='link_medium_blue'> Rate us! Complete the online questionnaire</a></b> 
      </li> 
      <?php 
       foreach($news as $news_item) 
       { 
        echo "<li>".$news_item->getNews(). "</li>"; 
        $newsId = $news_item->getId(); 
        if ($newsId == 1) 
        { 
         //some echos here to display text 
        } 
       } 
      ?> 
      </ul> 
    </td> 
</tr> 
<tr> 
    <td colspan='3' align='left'> 
     <span class='spn_big_black_rbc'> 
     MOOD BAROMETER 
     <?php echo link_to('how does it work?','util/barometer','class=link_medium_blue'); ?> 
     </span> 
     <?php 
      include_component('profile','moodmetershow'); 
     ?> 
    </td> 
    <td colspan='3' align='left'> 
     <?php 
      include_component('profile','moodmeter'); 
     ?> 
    </td> 
</tr> 
<tr> 
    <td colspan='3' align='left'> 
    &nbsp; 
    </td> 
</tr> 
</table> 
</div> 
</div> 

我加入這個爲$ new_mail_cnt:然後

echo $new_mail_cnt = '<script type="text/javascript">getMessages();</script>'; 

我有:

<script language="JavaScript" type="text/javascript"> 
    var receiveReq = getXmlHttpRequestObject(); 
    var mTimer; 

    function getXmlHttpRequestObject() 
    { 
     if (window.XMLHttpRequest) 
     { 
      return new XMLHttpRequest(); 
     } 
     else if(window.ActiveXObject) 
     { 
      return new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     else 
     { 
      document.getElementById('p_status').innerHTML = 
      'Status: Cound not create XmlHttpRequest Object.' + 
      'Consider upgrading your browser.'; 
     } 
    } 

    function getMessages() 
    { 
     receiveReq = getXmlHttpRequestObject(); 
     if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
     {      
      receiveReq.open("POST", 'getMessage.php', true); 
      receiveReq.onreadystatechange = handleReceiveMessage(); 
      receiveReq.send(null); 
      document.getElementById('new_messages').innerHTML = receiveReq.responseXML; //not sure here 
     } 
     mTimer = setTimeout('getMessage();',2000); 
    } 

    function handleReceiveMessage() 
    { 
     if (receiveReq.readyState == 4) 
     { 
      var chat_div = document.getElementById('div_chat'); 
      var xmldoc = receiveReq.responseXML; 
      var message_nodes = xmldoc.getElementsByTagName("message"); 
     } 
    }  
</script> 

回答

0

AJAX是一種允許您在頁面加載後啓動對服務器的Web請求的技術。當使用AJAX請求時,頁面不必重新加載(實際上,用戶甚至不會注意到請求正在發生)。

您應該啓動一個AJAX請求到您的服務器,它將檢查任何新消息。

要不斷地檢查新郵件,你可以使用任何的window.setTimeoutwindow.setInterval方法,推出在指定時段AJAX請求創建一個定時器。

雖然我不是推廣使用庫的忠實粉絲,但當問題沒有提及它們的使用時,您可能會發現使用一個(例如jQuery)將大大簡化管理AJAX請求的過程,因爲它附帶complete module這對你來說很辛苦。

無論您選擇使用庫來執行你的AJAX請求與否,工作流程的解決方案如下:

  1. 一個計時器(每10秒說,推出一個AJAX請求)到您服務器上的網頁(例如checkfornewmessages.php)。
  2. 在您的服務器上,檢查是否有新消息,並在輸出中包含要顯示給用戶的內容(例如,新消息的數量,消息的標題等等)。
  3. 對於您的AJAX請求,在您的回調中,將AJAX調用(其中包含您在PHP代碼中創建的輸出)的響應設置爲頁面上某個DOM元素的內容(例如<span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span>) 。
+0

謝謝請看到一些代碼,我添加...所有這些代碼只是爲了更新/刷新$ new_mail_cnt?哎呀! –

0

我在你use_javascripts_for_form($ search_form)假設你有一個jQuery的引用,如果沒有什麼地方可以下載它,它包含在頭

======注意UNTESTED === ===

更改以下行

 <span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span> 

 <span class='spn_med_black_rbc'>You have <div id='newMessageDiv'><?php echo $new_mail_cnt ?></div> new </span> 

添加類似下面的進入HEAD標籤

 $(document).ready(function() { 
     $("#newMessageDiv").load 
    ("newMessageCheck.php"); 
     var refreshId = setInterval(function() { 
      $("#newMessageDiv").load('newMessageCheck.php?randval='+ Math.random()); 
     }, 10000); 
     $.ajaxSetup({ cache: false }); 
    }); 

這將嘗試刷新股利每10秒newMessageCheck.php的內容,這個文件應該只是量只輸出一個值當前的新消息。

+0

謝謝你,我會嘗試這個 –

+0

在newMessageCheck.php對不起一定會發生什麼,但我做了一個教程,並與得如此不明白了一切尚未...謝謝 –

+0

的newMessageCheck.php應該只是輸出的單數($掙扎new_mail_cnt)相同的方式,得到了在當前文件 – ChrisK

0

你就把:

setTimeout(samefunction,milliseconds) 

的功能要自動充值和調用相同

此創建一個無限循環,等待X毫秒