JavaScript to PHP for Popup Window Content

Question

I have a map with numerous markers on it.

I need help connecting my Javascript with my PHP file so I can pull the relevant content from the database and put it inside the div of a popup window. The map and the popups work well, they open, but I just don't know how to insert content from the database into the div #popupcontent.

Here is part of the JavaScript:

        function showPopup(id, leftbul, topbul){
            map.find(settings.popupSelector).fadeOut(); 
            var boxid = '#' + id + '-box';

            $(boxid).fadeIn();      
            $(settings.popupCloseSelector).click(function(){
            $(this).parent().fadeOut()              
            });
        }

The JavaScript/Ajax references a seperate HTML file where the popup markers are recorded. Each marker / popup has the following HTML, one after each other in the same file. In this instance the id references the land parcel identified as 97.

<a href="javascript:void(0)" id="97" class="bullet" style="color: rgb(0,0,0);font-size: 13px;" rel="222-156">97</a> 
<div class="popup" id="97-box" style="top:158px;left:220px;"> 
    <h3>97</h3> 
    <div class="popupcontent"> 
        <p>Insert my database content here </p> 
    </div>
    <a class="close" href="javascript:void(0)">Close</a> 
</div> 

I believe I need to insert something like this in the JavaScript, but I'm not getting it to work. Do you think you can help me here?

$.get("popup.php", (id),
function( data ) {
var content = $( data ).find( '#content' );
$( "#popupcontent" ).empty().append( content );
}

This is the server side PHP file:

<?php 
$id=$_GET["id"];
// Connects to your Database 
mysql_connect("mysql.url.com", "username", "password") or die(mysql_error()); 
mysql_select_db("database_name") or die(mysql_error()); 
$data = mysql_query("SELECT * FROM inventory WHERE lot_number = '".$id."'";) 
or die(mysql_error()); 
Print "<table border cellpadding=3 font-size:8px width:200px>"; 
while($info = mysql_fetch_array( $data )) 
{ 
Print "<tr>"; 
Print "<th>Lot number:</th> <td>".$info['lot_number'] . "</td></tr> "; 
Print "<th>Sales Status:</th> <td>".$info['lot_status'] . "</td> "; 
Print "<th>Model Built:</th> <td>".$info['model'] . "</td></tr> "; 
Print "<th>Lot Size:</th> <td>".$info['lot_size'] . " </td></tr>"; 
Print "<th>Frontage:</th> <td>".$info['lot_frontage'] . " </td></tr>";
Print "<th>Depth:</th> <td>".$info['lot_depth'] . " </td></tr>";
Print "<th>Premium:</th> <td>".$info['lot_premium'] . " </td></tr>";
Print "<th>Features:</th> <td>".$info['lot_features'] . " </td></tr>";
Print "<th>Restrictions:</th> <td>".$info['lot_restrictions'] . " </td></tr>";
Print "<th>Move-in Date:</th> <td>".$info['lot_move_date'] . " </td></tr>";
} 
Print "</table>"; 
?> 

Answer 1

The easiest solution would be to use the .load method of jQuery.

You will need to specify, eg, a php file that will return html. Replace your $.get code with the following:

    $('.popupcontent').load('popup.php', {id: <your_id_here});

One thing to note here: due to the fact that you are adding a parameters object here as the second parameter to .load , jQuery will use the POST method; therefore, in your php file, you need to change from $_GET to $_POST .

If you want to keep using the GET method, then change the above code to the following:

    $('.popupcontent').load('popup.php?id=id1');

I would recommend giving the popup content div an id, rather than class in this case. You are dealing with a unique item. I'm referring to your current HTML, you should change it to the following:

    <div class="popup" id="97-box" style="top:158px;left:220px;"> 
        <h3>97</h3> 
        <div id="popupcontent"> 
            <!-- RETURNED TABLE FROM PHP FILE WILL GO HERE --> 
        </div>
        <a class="close" href="javascript:void(0)">Close</a> 
    </div>

If you are planning on having a number of popups that share this behavior, then what you can do is this instead:

    <-- HTML FILE -->
    <div class="popup" id="97-box" style="top:158px;left:220px;"> 
        <h3>97</h3> 
        <div class="popupcontent"> 
            <!-- RETURNED TABLE FROM PHP FILE WILL GO HERE --> 
        </div>
        <a class="close" href="javascript:void(0)">Close</a> 
    </div>

    // javascript file
    $('#97-box .popupcontent').load('popup.php', {id: <your_id_here>});

The above pattern allows you to make popupcontent a generic class that can be used by other popups. The caveat is to add a different selector in your jQuery selector. In this case, I suggested $('#97-box .popupcontent') which will select the popupcontent div only under the html element with id: 97-box. In this case, that is your popup window.

Answer 2

UPDATE:

OK THANKS TO RYAN I WAS ABLE TO SOLVE THIS. Here is the solution:

//find
        function showPopup(id, leftbul, topbul){
            map.find(settings.popupSelector).fadeOut(); 
            var boxid = '#' + id + '-box';

//open

            $(boxid).fadeIn();
//added this 
            $('.popupcontent').load('popup.php?boxid=' + id);

//close
            $(settings.popupCloseSelector).click(function(){
            $(this).parent().fadeOut()              
            });
        }

This caught the id's in the html.

PHP variable was:

$var = $_GET['boxid'];

I hope this helps someone else. Thank-you Ryan for your help on this.