Как вызвать JS / AJAX без кнопки отправки на странице? - PullRequest
1 голос
/ 23 августа 2011

У меня есть страница веб-сайта, которая содержит только данные, одно поле которых содержит количество сообщений в вашем почтовом ящике, и мне нужно обновить ее, так как новые сообщения могут появляться в любое время, поэтому пользователь, находящийся на этой странице, можетвижу, есть новые сообщения.как я могу вызвать мой 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>

Ответы [ 4 ]

0 голосов
/ 10 декабря 2011

вы помещаете:

setTimeout(samefunction,milliseconds)

в функцию, которую вы хотите автоматически перезарядить и вызываете ту же самую

, это создает бесконечный цикл, ожидающий x миллисекунд

0 голосов
/ 23 августа 2011

AJAX - это технология, которая позволяет запускать веб-запросы к серверу после загрузки страницы. При использовании AJAX-запроса страница не должна перезагружаться (действительно, пользователь даже не заметит, что запрос выполняется).

Вам следует запустить запрос AJAX на ваш сервер, который проверит наличие новых сообщений.

Чтобы постоянно проверять наличие новых сообщений, вы можете создать таймер, используя методы window.setTimeout или window.setInterval , чтобы запускать запрос AJAX в назначенные периоды.

Хотя я не большой поклонник продвижения использования библиотек, когда в вопросе не упоминается их использование, вы можете обнаружить, что использование таких библиотек (таких как jQuery ) значительно упростит процесс управления AJAX запрашивает, так как поставляется с полным модулем , который делает тяжелую работу за вас.

Независимо от того, решите ли вы использовать библиотеку для выполнения вашего 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 голосов
/ 23 августа 2011

Я предполагаю, что в вашем 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 });
    });

Это попытается обновить div каждые 10 секунд с содержимым newMessageCheck.php, этот файл должен просто вывести единственное значение только количества текущих новых сообщений.

0 голосов
/ 23 августа 2011

Попробуйте таймер в javascript http://www.w3schools.com/js/js_timing.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...