Блог

У меня есть карта с многочисленными маркерами на ней.

Мне нужна помощь в подключении моего 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-код, один за другим в том же файле. В этом случае идентификатор ссылается на земельный участок, идентифицированный как 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>"; 
?> 
  

Самым простым решением было бы использовать .метод загрузки jQuery.

Вам нужно будет указать, например, php-файл, который будет возвращать html. Замените свой $.get код следующим:

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

Здесь следует отметить одну вещь: из-за того, что вы добавляете здесь объект parameters в качестве второго параметра to .load , jQuery будет использовать метод POST ; поэтому в вашем php-файле вам нужно изменить с $_GET на $_POST .

Если вы хотите продолжать использовать метод GET, измените приведенный выше код на следующий:

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

В этом случае я бы рекомендовал присвоить элементу содержимого всплывающего окна идентификатор, а не класс. Вы имеете дело с уникальным элементом. Я имею в виду ваш текущий 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') , который будет выбирать popupcontent div только под html-элементом с id: 97-box. В данном случае это ваше всплывающее окно.

Обновить:

ХОРОШО, БЛАГОДАРЯ РАЙАНУ Я СМОГ РЕШИТЬ ЭТУ ПРОБЛЕМУ. Вот решение:

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

Переменная PHP была:

 $var = $_GET['boxid'];
  

Я надеюсь, что это поможет кому-то еще. Спасибо, Райан, за вашу помощь в этом.