[英]JavaScript to PHP for Popup Window Content
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. 我需要帮助将Javascript与PHP文件连接在一起,以便可以从数据库中提取相关内容并将其放在弹出窗口的div中。 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.
地图和弹出窗口可以很好地工作,它们可以打开,但是我只是不知道如何将数据库中的内容插入div #popupcontent中。
Here is part of the JavaScript: 这是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. JavaScript / Ajax引用一个单独的HTML文件,其中记录了弹出标记。 Each marker / popup has the following HTML, one after each other in the same file.
每个标记/弹出窗口都有以下HTML,在同一文件中一个接一个。 In this instance the id references the land parcel identified as 97.
在这种情况下,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>
I believe I need to insert something like this in the JavaScript, but I'm not getting it to work. 我相信我需要在JavaScript中插入类似的内容,但是我没有使其正常工作。 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文件:
<?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>";
?>
The easiest solution would be to use the .load method of jQuery. 最简单的解决方案是使用jQuery的.load方法。
You will need to specify, eg, a php file that will return html. 您将需要指定例如将返回html的php文件。 Replace your
$.get
code with the following: 将
$.get
代码替换为以下内容:
$('.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; 这里要注意的一件事:由于您实际上是在此处添加一个参数对象作为
.load
的第二个参数,因此jQuery将使用POST方法。 therefore, in your php file, you need to change from $_GET
to $_POST
. 因此,在您的php文件中,您需要从
$_GET
更改为$_POST
。
If you want to keep using the GET method, then change the above code to the following: 如果要继续使用GET方法,则将上面的代码更改为以下代码:
$('.popupcontent').load('popup.php?id=id1');
I would recommend giving the popup content div an id, rather than class in this case. 在这种情况下,我建议给弹出内容div一个id,而不是class。 You are dealing with a unique item.
您正在处理一个独特的物品。 I'm referring to your current HTML, you should change it to the following:
我指的是您当前的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>
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. 上面的模式使您可以将popupcontent设为可以由其他弹出窗口使用的通用类。 The caveat is to add a different selector in your jQuery selector.
注意事项是在jQuery选择器中添加其他选择器。 In this case, I suggested
$('#97-box .popupcontent')
which will select the popupcontent div only under the html element with id: 97-box. 在这种情况下,我建议
$('#97-box .popupcontent')
仅在id为97-box的html元素下选择popupcontent div。 In this case, that is your popup window. 在这种情况下,这就是您的弹出窗口。
UPDATE: 更新:
OK THANKS TO RYAN I WAS ABLE TO SOLVE THIS. 好的,谢谢Ryan,我能够解决这个问题。 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. 这捕获了HTML中的ID。
PHP variable was: PHP变量为:
$var = $_GET['boxid'];
I hope this helps someone else. 我希望这可以帮助其他人。 Thank-you Ryan for your help on this.
谢谢Ryan在此方面的帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.