how to invoke JS/ajax with no submit button on the page? - php

Question

i have a website page that contains only data of which one field gives the number of messages in your inbox, and i need to refresh this as new messages can some in at any time, so the user, while on this page can see there are new messages. how can i call my JS/ajax to do the refresh please?
i tried header("Refresh:10"); but client was not happy as it refreshes the whole page, he only wants the no of messages to refresh as they come in...can someone help please? thanks
my code for this page:
<?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
</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 " ";
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'>
</td>
</tr>
</table>
</div>
</div>
i added this for $new_mail_cnt:
echo $new_mail_cnt = '<script type="text/javascript">getMessages();</script>';
then i have:
<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>

Answer 1

AJAX is a technology which allows you to launch web requests to a server after the page is loaded. When using an AJAX request, the page does not have to reload (indeed, the user won't even notice a request is taking place).
You should launch an AJAX request to your server, which will check for any new messages.
To continuously check for new messages, you could create a timer using either the window.setTimeout, or the window.setInterval methods, to launch an AJAX request at designated periods.
Whilst I am not a big fan of promoting using libraries when a question does not mention any use of them, you may find that using one (such as jQuery), will greatly simplify the process of managing AJAX requests, as it comes with a complete module which does the hard work for you.
Regardless of whether you choose to use a library to perform your AJAX request or not, the workflow for the solution will be as follows:
On a timer (every 10 seconds say, launch an AJAX request) to a webpage on your server (e.g checkfornewmessages.php).
On your server, check for any new messages, and include what you want to display to the user in the output (e.g. the number of new messages, the title of the messages, whatever).
In your callback for your AJAX request, set the response of the AJAX call (which will contain the output you created in your PHP code), to the contents of one of the DOM elements on your page (e.g. <span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span>).

Answer 2

Try timer in javascript http://www.w3schools.com/js/js_timing.asp

Answer 3

I am assuming in your use_javascripts_for_form($search_form) you have a jQuery reference somewhere if not you can download it and include it in the headers
======NOTE UNTESTED======
Change the following line
<span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span>
to
<span class='spn_med_black_rbc'>You have <div id='newMessageDiv'><?php echo $new_mail_cnt ?></div> new </span>
Add something like the following into the HEAD tag
$(document).ready(function() {
$("#newMessageDiv").load
("newMessageCheck.php");
var refreshId = setInterval(function() {
$("#newMessageDiv").load('newMessageCheck.php?randval='+ Math.random());
}, 10000);
$.ajaxSetup({ cache: false });
});
This will attempt to refresh the div every 10 seconds with the contents of newMessageCheck.php, this file should just output a single value of just the amount of current new messages.

Answer 4

you put:
setTimeout(samefunction,milliseconds)
in the function that you want to auto-recharge and call the same
this create a infinite loop waiting x milliseconds