Popups and Ajax?

[netfrugal]

I have a page that shows all the rows from my MySQL database for my contacts table.

I would like to replace the Address Column with only a small image.

With that image I'd like to only Scroll my mouse over it and have a quick Popup show what the address for that contact is.

Is there a way to do this with Ajax?

If so, would someone direct me to a tutorials that can teach me this?

thanks!

[ober]

AJAX cannot help you with pop-ups.  Javascript performs the pop-up, the information can be placed via JS or some other medium.

[artacus]

Here is some code I used before to display notes on a calendar. "getData()" is my generic ajax call that takes a url as a parameter and returns whatever was output by that url.
[code]
function fetchNotes(imgObj,calID) {
var n = getData('xml_cal_notes.php?cal_id='+calID);
var noteObj = document.getElementById('notes');
noteObj.innerHTML = n;
noteObj.style.top = imgObj.y + 'px';
noteObj.style.left = imgObj.x + 'px';
}

function clearContents(notesObj) {
notesObj.innerHTML = '';
}
[/code]

The notes were controlled by an image like so.
<img src='/resources/icons/b_view.png' align='top' onClick='fetchNotes(this,$row[cal_id]);' />

[ghgarcia]

This looks like exactly what I want to display mysql data with a mouseover or onclick. Is there any additional code required to get this to work. The following is what I'm attempting to do:

I have an application that shows a list of my users and allow the admin to update some information for each user. One of the options is to display all user information in a form by the press of a button (which requires a turn around to the server and a refresh of the screen) What I'd like to do is on a mouseover the user name go to the server and get the user's detailed information and display it as a pop up without refreshing the screen. You can check out the script by going to [url=http://lvbash.comp/phpfootball20/users.php]http://lvbash.comp/phpfootball20/users.php[/url].

If I can get this to work I will modify my site to do more Ajax. I just looking for a simple example that I can modify.

Thanks

[artacus]

You'll need the getData() function. Save it in a seperate file called ajax.js because if you start going down the ajax road, you'll end up using it alot :)
[code]
function getData(myPage) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open('GET',myPage, false);
req.send(null);

if (req.readyState==4) {
if(req.status==200) {
return req.responseText;
} else {
alert('There was a problem with the request.');
}
}
} //End getData();
[/code]

[ghgarcia]

Not totaly sure how to use the function you sent. I tried using the following but nothng happened.

[quote]<img src='./images/TBl.jpg' align='top' onClick='getData' /[/quote]

I also modified the function as follows:

[quote]function clearContents(notesObj) {
notesObj.innerHTML = '';
}
function getData(myPage) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open('GET',profile.php, false);
req.send(null);

if (req.readyState==4) {
if(req.status==200) {
return req.responseText;
} else {
alert('There was a problem with the request.');
}
}
} //End getData();[/quote]

Thanks

[artacus]

Nope leave getData alone. You'll call getData from another function, in this case fetchNotes()
[code]
//html stuff
<img src='./images/TBl.jpg' align='top' onClick='fetchNotes(this, userID);' />
<div id='notes' onClick='clearContents(this);'></div>

//javascript stuff
<script language='javascript'>
function fetchNotes(imgObj,userID) {
var n = getData('profile.php?userID='+userID);
var noteObj = document.getElementById('notes');
noteObj.innerHTML = n;
noteObj.style.top = imgObj.y + 'px';
noteObj.style.left = imgObj.x + 'px';
        notesOjb.style.display = 'inline';
}

function clearContents(notesObj) {
notesObj.innerHTML = '';
        notesObj.style.display = 'none';
}[/code]

[ghgarcia]

Thanks I've done as you suggested I now get errors on page not sure what is going on the following is my coding. I really appreciate the help I know I'm close and will work it out soon:

My Html:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Profile Test</title>

<script LANGUAGE='javascript'>

function getData(myPage) {
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            req = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        req.open('GET',myPage, false);
        req.send(null);

        if (req.readyState==4) {
                if(req.status==200) {
                        return req.responseText;
                } else {
                        alert('There was a problem with the request.');
                }
        }
}

function fetchNotes(imgObj,userID) {
        var n = getData('profile.php?d='+userID);
        var noteObj = document.getElementById('notes');
        noteObj.innerHTML = n;
        noteObj.style.top = imgObj.y + 'px';
        noteObj.style.left = imgObj.x + 'px';
        notesOjb.style.display = 'inline';
}

function clearContents(notesObj) {
        notesObj.innerHTML = '';
        notesObj.style.display = 'none';
}

</script>
</head>
<body>

<DIV id='title'>
Profile Testing
</DIV>
<img src='TBl.gif' align='top' onClick='fetchNotes(this,"ghgarcia");' />
<div id='notes' onClick='clearContents(this);'></div>

</body>
</html>[/code]

My PHP coding this program works correctly as a stand alone:

profile.php:

[code]<?php
include 'db.php';

$d = $_GET['d'];

if ($d=='')
    echo 'Enter part name in search box';
else {
      $res = mysql_query("SELECT * FROM spread_users where user = '".$d."'");
      $row = mysql_fetch_object($res);
                if(!$row) $display = "User Not Found!";
                else
                {
                        $user = $row->user;
                        $name = $row->name;
                        $address = $row->address;
                        $city = $row->city;
                        $state = $row->state;
                        $zip = $row->zip;
                        $email = $row->email;
                        $phone = $row->phone;
                        $maillist = $row->maillist;
                }

      if (mysql_num_rows($res) > 0) {
          echo "User: $user <br>";
          echo "Name: $name <br>";
          echo "Email: $email <br>";
      }
      else {
            echo $display;
      }
}
?>[/code]

I'm sure it's something simple.

Thanks,
George

[artacus]

1) Don't post your db connection info on a public forum.
2) This line has a typo notesOjb.style.display = 'inline';
3) Try using alert("Response was: " + n); to see what you're getting back
4) Tell me what the error message is.

[ghgarcia]

Thanks I removed the db.php and changed it's contents. The display now works however the error is not showing you can test at [url=http://lvbash.com/bair/profile.html]http://lvbash.com/bair/profile.html[/url]

Thanks
George

[artacus]

You haven't fixed #2. Other than that it looks like you're good.

[ghgarcia]

Thanks I found the typo and changed the line to read:
[code]notesObj.style.display = 'inline';[/code]

I still get error on page in the status line but it displays the profile. However after I clear the profile display and click on the image again nothing happens. This is the code used to clear the display:
[code]<div id='notes' onClick='clearContents(this);'></div>
[/code]
I modified this line from:
[code]notesObj.style.display = 'none';[/code]
To:
[code]notesObj.style.display = 'inline';[/code]

And now I can erase the display entries but I still get the error on page. At this point I think that it is working.

Thanks again,
George

[artacus]

You STILL didn't fix the typo. There is no notesObj.

[ghgarcia]

Thanks I correct all ref. to notesObj to noteObj as follows:
[code]function fetchNotes(imgObj,userID) {
        var n = getData('displayprofile.php?d='+userID);
        var noteObj = document.getElementById('notes');
        noteObj.innerHTML = n;
        noteObj.style.top = imgObj.y + 'px';
        noteObj.style.left = imgObj.x + 'px';
        noteObj.style.display = 'inline';
        alert("Response was: " + n);
}

function clearContents(noteObj) {
        noteObj.innerHTML = '';
        noteObj.style.display = 'inline';
}
[/code]

Everything works however I still get the error on page when I move my mouse to he View button after the first display. You can check it out at [url=http://lvbash.com/phpfootball20/users.php]http://lvbash.com/phpfootball20/users.php[/url] My button looks like this:
[code]<input type="button" class="button" value="View User Data" onclick="fetchNotes(this,'<? echo $row->user; ?>');" />[/code]

Thanks even if we can't fix the error display it is working correctly thanks to your excellent help.

George

[artacus]

It works fine w/o any errors for me (FF 2)

[ghgarcia]

You are correct I only get the page error in ie 7.0 and not in ff 2.01.

Thanks again for all the help,
George