JavaScript到PHP彈出窗口內容

Question

我有一個地圖上有許多標記。

我需要幫助連接我的Javascript和我的PHP文件，所以我可以從數據庫中提取相關內容並將其放入彈出窗口的div內。地圖和彈出窗口工作良好，他們打開，但我只是不知道如何從數據庫插入內容到div #popupcontent。

這裏是JavaScript的一部分：

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

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

中的JavaScript/AJAX引用在彈出標記記錄一個單獨的HTML文件。每個標記/彈出窗口具有以下HTML，在同一個文件中一個接一個。在這種情況下，ID引用地塊確定爲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> 

我相信我需要插入在JavaScript這樣的事情，但我沒有得到它的工作。你認爲你能幫助我嗎？

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

這是服務器側PHP文件：

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

的最簡單的解決辦法是使用jQuery的.load方法。

您將需要指定，例如，將返回HTML的PHP​​文件。用以下替換您$.get代碼：

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

這裏有一點要注意：由於要添加一個參數對象這裏的第二個參數.load，jQuery將使用POST方法;因此，在您的php文件中，您需要將$_GET更改爲$_POST。

如果你想使用GET方法，以保持，那麼上面的代碼更改爲以下：

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

我會推薦給彈出內容的div一個id，而不是階級在這種情況下。你正在處理一個獨特的項目。我指的是你目前的HTML，您應將其更改爲以下：

<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> 

如果您在具有多個共享此行爲的彈出式窗口的計劃，那麼你可以做的是這個：

<-- 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>}); 

上述模式允許您將popupcontent設置爲可供其他彈出窗口使用的通用類。需要注意的是在jQuery選擇器中添加一個不同的選擇器。在這種情況下，我建議使用$('#97-box .popupcontent')，它將僅在id：97-box的html元素下選擇popupcontent div。在這種情況下，這是您的彈出窗口。

Answer 2

更新：

OK謝謝賴恩我可以解決這個問題。這裏是解決方案：

//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()    
      }); 
     } 

這個在html中發現了id。

PHP變量是：

$var = $_GET['boxid']; 

我希望這可以幫助別人。感謝您Ryan在這方面的幫助。