Member Avatar for aneeshkurup

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

  • 2 Contributors
  • 1 Reply
  • 235 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for ~s.o.s~

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.