How to get php variable from url (href link) in javaScript and generate a small popup window on mouseover with passed php data

Question

I am totally new to JavaScript or jQuery. Actually I am developing a web application under which I need to access some data in url format and I want to display a small popup window on mouseover event on this url and on occurrence of this event, url will pass three different php data IDs to javascript. Then small popup window will get some related data from mysql with the help of those passed IDs.

Please help on this issue, I need a solution urgently. Any help will be highly appreciated.

Answer 1

The answers to all of these questions are already here on SO. Break your problem down into smaller steps and you will find it:

• How to call a script with mouseover
• How to make a modal dialog using JavaScript + CSS
• How to pass data between JavaScript and PHP

Answer 2

The easiest solution is to use ajax. Here is a sample implementation:

1. The url link should contain the data you want to send to the server and would look like:

   <a href="yourURL" onclick="sendURL2Srvr(this);">link text</a>

2. create a javascript section to receive the server response in a popup. This should roughly look like:

   <script>
     http = false;
   
   
     if (window.ActiveXObject) {
       http = new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if (window.XMLHttpRequest ) {
       http = new XMLHttpRequest();
     }
     function sendURL2Srvr(elem) {
       http.abort();
       http.onreadystatechange=function() {
         var popupW=window.createPopup();
         if(http.readyState == 4) {
           if (http.status != 200)
             error('Something went wrong!');
           else
             popupW.innerHTML=http.responseText;
         }
       }
       http.open("GET", elem.href, true);
       http.send(null);        
     }
   </script>
   

3. It is up to the server to dissect the received REQUEST and send the data back. This now becomes a pure php question.