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>"; 
?>

What exactly is your question? We can't write this for you, as you've provided exactly NOTHING in the way of useful data on what your server-side script should do in the way of generating data for your client-side stuff. — Marc B
– Marc B, Commented Oct 17, 2011 at 3:47
Ok points taken. I've tried to edit the question to make it more meaningful. Please let me know if you understand what I am looking for. Thank you — Jonathan Tonge
– Jonathan Tonge, Commented Oct 17, 2011 at 4:00

Ryan · Accepted Answer · 2011-10-17 05:09:05Z

3

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

You will need to specify, e.g., 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.

edited Oct 17, 2011 at 5:09

answered Oct 17, 2011 at 4:06

Ryan

1,5579 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jonathan Tonge Over a year ago

Awesome. Thank you so much for your time and help. This got the content in there. Any idea how to properly reference the id at the top of the PHP file? This is not working: $id=$_GET["id"];

Ryan Over a year ago

You can add a params object as the second argument to .load. I will update my answer with an example of that.

Jonathan Tonge Over a year ago

I will definitely upvote you as the .load did work.. thank you so much

Ryan Over a year ago

Wait, I forgot to mention one thing. If you add an object as the second parameter of .load, then jQuery will use the POST method. Therefore, in php, you will need to use $_POST['id'].

Ryan Over a year ago

I just learned, by perusing the internet, that if you want to use the GET method, instead, don't use the second argument of .load. Instead, just pass the parameters in the url as a normal query string, e.g., .load('popup.php?id=id1');. That should do the trick.

Jonathan Tonge · Accepted Answer · 2012-10-02 19:05:04Z

0

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.

edited Oct 2, 2012 at 19:05

answered Oct 17, 2011 at 17:46

Jonathan Tonge

1,52819 silver badges25 bronze badges

Collectives™ on Stack Overflow

JavaScript to PHP for Popup Window Content

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related