[英]Send PHP variable value to JavaScript popup window in same page
I want to send php variable value to JavaScript popup window. 我想将php变量值发送到JavaScript弹出窗口。 My JavaScript popup Code and PHP code is in the same page.
我的JavaScript弹出代码和PHP代码在同一页面中。 Within this same page, I want to call JavaScript popup with PHP variable value.
在同一页面中,我想用PHP变量值调用JavaScript弹出窗口。
So basically I have 2 different PHP variable values in a form of 2 buttons, user can click any button and I want only 1 popup window appears based on the PHP variable value. 因此,基本上我有2个按钮形式的2个不同的PHP变量值,用户可以单击任何按钮,并且我只希望基于PHP变量值出现一个弹出窗口。
Here is what I am doing in code: 这是我在代码中正在做的事情:
<!-- Calling same Popup window with diff ID -->
<a href="#login?h_id=123" data-toggle="modal" class="btn btn-large">Hire Person</a>
<!-- Calling same Popup window with diff ID -->
<a href="#login_hire?f_id=456" data-toggle="modal" class="btn btn-large">Hire <?php echo $array_other_new[1] ?></a>
But my Popup is not appearing if I do something like this href="#login?h_id=123"
as shown above. 但是,如果我执行如上所述的类似
href="#login?h_id=123"
,则不会显示我的弹出href="#login?h_id=123"
。 My Popup only appears when it calls like href="#login"
without any ?id=123
. “我的弹出窗口”仅在调用类似
href="#login"
没有任何?id=123
。
Now here is my Bootstrap based popup Code: 现在这是我基于Bootstrap的弹出代码:
<!-- LogIn for Hiring Popup Starts --> <div class="modal large hide fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="login"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>LogIn</h3> </div> <div class="modal-body"> <form method="post" onSubmit="javascript:void(0)"> <span id="status"></span> <input type="hidden" id="get_follow_id" value=""> <input type="hidden" id="get_hire_id" value="<?php echo $get_id ?>"> <div class="controls controls-row"> <label class="title">Email *</label> <input class="span3" type="text" placeholder="Email" id="email" /> </div> <div class="controls controls-row"> <label class="title">Password *</label> <input class="span3" type="password" id="pass" placeholder="Password" /> </div> <div class="controls controls-row"> <input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" /> <br><br> <a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> <!-- LogIn for Hiring Popup Ends -->
Please propose any working solution. 请提出任何可行的解决方案。
As I understand it, 据我了解,
If this is correct, I would use the link/button's data attributes for this. 如果正确,我将使用链接/按钮的数据属性 。 See the comments in the below for details:
有关详细信息,请参见以下注释:
Here is a working example 这是一个有效的例子
NOTE that I had to remove the hide
class from your modal div making it like <div class="modal large fade"....
as the modal would not appear otherwise 注意,我必须从模态div中删除
hide
类,使其类似于<div class="modal large fade"....
,否则模态将不会出现
Here's a quick look at what's needed to make this work see below for full code 快速浏览一下使此工作所需的全部代码,请参见下面的完整代码
jQuery jQuery的
$('body').on("click",".callModal", function() {
var f_id = $(this).data('f-id');
$('#get_hire_id').val( f_id );
});
*Note that the syntax for accessing data('f-id')
may vary depending on the version of jQuery you use and/or what browsers you need to support, I believe IE<11 has issues here....but where doesn't it.... *请注意,访问
data('f-id')
的语法可能会因您使用的jQuery版本和/或您需要支持的浏览器而异,我相信IE <11在这里存在问题。是不是...
php PHP
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
?>
All of the code used in my example: 我的示例中使用的所有代码:
<?php
// I dont know exactly how you create your page
// so i'm just gonna show you a simple example and wing it
$array_other_new=array("John Smith","James Jones", "William Baker", "Michael Frost", "Montey Python");
$array_other_new_hire_ids=array("123","456", "789", "012", "345");
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function() {
// listen for clicks on our links
$('body').on("click",".callModal", function() {
// when a user clicks a button
// get the id we stored in the button's
// data attribute
var f_id = $(this).data('f-id');
// note our attribute is `data-f-id` in the html
// but we access it by `.data('f-id')` here
// always leave the `data-` off
// set the value to our input
$('#get_hire_id').val( f_id );
// the normal link functionallity
// will open the modal as normal
});
});
</script>
</head>
<body>
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
}
// the important part here is data-f-id="'.$array_other_new_hire_ids[$i].'"
// this is where we store our php variable in the link's data-f-id property which we have just made up, cool huh?
// also note that we added the class `callModal` to the element so we can easily bind a function to them later
?>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
<div class="modal large fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>LogIn</h3>
</div>
<div class="modal-body">
<form method="post" onSubmit="javascript:void(0)">
<span id="status"></span>
<input type="text" id="get_follow_id" value="">
<input type="text" id="get_hire_id" value="">
unhid to show setting value<br>
<div class="controls controls-row">
<label class="title">Email *</label>
<input class="span3" type="text" placeholder="Email" id="email" />
</div>
<div class="controls controls-row">
<label class="title">Password *</label>
<input class="span3" type="password" id="pass" placeholder="Password" />
</div>
<div class="controls controls-row">
<input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
<br>
<br>
<a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
</body></html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.