Hai all,

<span >Test_Ajax</span>

On mouse over of Test_Ajax I want display a tooltip which display the value of a variable (which is declered in php file).

For doing this task how should I co-ordinate ajax, js, php and html files

Pretty simple:
- Create a minimalistic HTML document
- Attach a handler to the onclick event listener which performs all the work
- Make a asynchronous call [using XHR or XMLHttpRequest object] to the server
- Retrieve the data in case the request is successful and show it to the user

For making async calls it would be simpler if you used some sort of library to abstract away the boilerplate code. A sample untested snippet:

<!--
Show a tooltip
Copyright (C) 2008  sos aka Sanjay

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript" src="AjaxRequest.js"></script>
    <script type="text/javascript">
      function showTooltip(evt) {
        evt = evt || window.event;
        var elem = evt.srcElement || evt.target;
        setTitle(elem);
      }

      function setTitle(elem) {
      // For making Ajax calls, I'll be using the Ajaxtoolbox
      // library which makes using Ajax a breeze <http://www.ajaxtoolbox.com/>
      // To know more about Ajax, read
      // <http://www.adaptivepath.com/ideas/essays/archives/000385.php>
      // and
      // <http://www.jibbering.com/2002/4/httprequest.html>
      AjaxRequest.get({
          'url': 'something.php',
          'onSuccess':
            function(req) {
              elem.title = req.responseText;
            },
          'onError':
            function(req) {
              alert('Error!\nStatusText='+req.statusText+'\nContents='+req.responseText);
            }
        });
      }
</script>
</head>
<body id="bdy">
  <form id="frm" name="frm" action="#">
    <div onmouseover="showTooltip(event);">SOME CONTENT TO BE REPLACED USING DOM</div>
  </form>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.