在PHP和Javascript之间传递数据
[英]Passing Data Between PHP and Javascript
问题描述
What I am trying to do is generate a series of buttons with PHP which correspond to names in a MySQL database. 
我要做的是用PHP生成一系列按钮，这些按钮对应于MySQL数据库中的名称。 When the user selects the button it will display different text in an overlay popup depending on the button selected. 当用户选择按钮时，它将根据所选按钮在叠加弹出窗口中显示不同的文本。 I'm fairly new to PHP, jQuery, etc. so for now I am trying to get something a little simpler to work (without the database part). 我是PHP，jQuery等新手，所以现在我想尝试一些更简单的工作（没有数据库部分）。 Here is my code: 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery.popupoverlay.js"></script>
</head>
<body>
<?php
echo "<form name=\"idpass\" method=\"post\">";
echo "<div>";
echo "<button name=\"button\" id=\"button1\" value=\"One\" class=\"One_open\" onchange=\"this.form.submit();\">User 1</button>";
echo "<button name=\"button\" id=\"button2\" value=\"Two\" class=\"Two_open\" onchange=\"this.form.submit();\">User 2</button>";
echo "</div>";
echo "</form>";
if(!isset($_POST["button"]))
{
echo "click something";
}
else
{
$buttonSelection = $_POST["button"];
echo "<div id=\"" . $buttonSelection ."\">";
echo "Hello, " . $buttonSelection;
echo "</div>";
}
?>
<script>
$(function()
{
$("button").click(function()
{
var me = $(this);
$('#'+me.val()).popup();
});
});
</script>
</body>
</html>
This will generate two buttons named User 1 and User 2. The problem is if I click them slowly, the text ("Hello, One" or "Hello, Two") simply appears below the buttons on the page, not in the popup. 这将生成两个名为User 1和User 2的按钮。问题是如果我慢慢点击它们，文本（“Hello，One”或“Hello，Two”）只显示在页面上的按钮下方，而不是弹出窗口中。 If I click them fast enough however, it works. 如果我足够快地点击它们，它就可以了。 So I know the data is getting passed but there is obviously a delay and I'm not sure where? 所以我知道数据已经通过，但显然存在延迟，我不知道在哪里？
EDIT: Here is the code for the popup (it was not developed by me): 编辑：这是弹出窗口的代码（它不是由我开发的）：
/**
* jQuery Popup Overlay
*
* @version 1.4.0
* @requires jQuery v1.7.1+
* @link http://vast-eng.github.com/jquery-popup-overlay/
* @author Ivan Lazarevic
*/
;(function($) {
var level = [];
var lastclicked = [];
$.fn.popup = $.fn.popup = function(customoptions) {
var $body = $('body'),
$window = $(window),
$document = $(document),
$el,
$newel,
$wrapper,
options = {},
blurhandler,
focushandler,
defaults = {
type: 'overlay',
action: 'click',
background: true,
color: 'black',
opacity: '0.4',
horizontal: 'center',
vertical: 'center',
escape: false,
blur: true,
fade: 250,
opensufix: '_open',
closesufix: '_close',
keepfocus: true,
reposition: false,
autozindex: false,
};
var init = function(el) {
if(!$(el).attr('id')){
$(el).attr('id', 'j-popup-' + parseInt(Math.random() * 100000000));
}
lastclicked[el.id] = false;
level[el.id] = 0;
$el = $(el);
options = $.extend({}, defaults, customoptions);
/**
* Repositioningtion parameter
*/
if (options.reposition === true) {
// @TODO - not so DRY...
$newel = $el;
$el = $wrapper = $('#' + el.id + '_wrapper');
positionpopup(el);
return false;
}
// initialize on only once
if ($el.attr('data-popup-initialized')) {
return false;
}
$el.attr('data-popup-initialized', 'true');
/**
* Set variables
*/
var triggerelement = '.' + el.id + options.opensufix; // class that will open popup
/**
* Set other options that are related for type: tooltip
*/
if (options.type == 'tooltip') {
options.background = false;
options.keepfocus = false;
}
/**
* Hide popups that aren't already hidden with CSS and move it to the top or bottom of the <body> tag
*/
$el.css({
display: 'none'
});
// append instead of prepend if document is ready
// if (((document.readyState === 'interactive') || (document.readyState === 'complete')) && !($.browser.msie && parseFloat($.browser.version) < 8)) {
// $body.append(el);
// } else {
$body.prepend(el);
// }
/**
* Create background div and append to the top or bottom of the body tag
*/
if ((options.background) && (!$('#' + el.id + '_background').length)) {
// Append instead of prepend if possible
var popupback = '<div id="' + el.id + '_background" class="popup_background"></div>';
// if (((document.readyState === 'interactive') || (document.readyState === 'complete')) && !($.browser.msie && parseFloat($.browser.version) < 8)) {
// $body.append(popupback);
// } else {
$body.prepend(popupback);
// }
$('#' + el.id + '_background').css({
backgroundColor: options.color,
opacity: options.opacity,
position: 'fixed',
top: '0',
right: '0',
bottom: '0',
left: '0',
display: 'none'
});
}
/**
* Positioning overlay
*/
if (options.type == 'overlay') {
$el.css({
display: 'inline-block',
textAlign: 'left',
position: 'relative',
verticalAlign: 'middle'
}).addClass('popup_content');
$el.wrap('<div id="' + el.id + '_wrapper" class="popup_wrapper" />');
$wrapper = $('#' + el.id + '_wrapper');
$wrapper.css({
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
display: 'none',
textAlign: 'center'
});
$wrapper.append('<div class="popup_align" />');
$('.popup_align').css({
display: 'inline-block',
verticalAlign: 'middle',
height: '100%'
});
// overlay horizontal
if (options.horizontal == 'right') {
$wrapper.css('text-align', 'right');
} else if (options.horizontal == 'left') {
$wrapper.css('text-align', 'left');
}
// overlay vertical
if (options.vertical == 'bottom') {
$el.css('vertical-align', 'bottom');
} else if (options.vertical == 'top') {
$el.css('vertical-align', 'top');
}
$newel = $el;
$el = $wrapper;
}
/**
* add data-popup-order attribute
*/
$(triggerelement).each(function(i, item) {
$(item).attr('data-popup-order', i);
});
/**
* Defining on which event to open/close popup
*/
if (options.action == 'click') {
// open
$(triggerelement).click(function(e) {
if ($el.is(':hidden')) {
var or = $(this).attr('data-popup-order');
dopopup(el, or);
e.preventDefault();
}
});
//
$('.' + el.id + options.closesufix).click(function(e) {
hidePopUp(el);
e.preventDefault();
});
} else if (options.action == 'hover') {
$(triggerelement).mouseenter(
function() {
dopopup(el, $(this).attr('data-popup-order'));
});
$(triggerelement).mouseleave(
function() {
hidePopUp(el);
});
} else {
$(triggerelement).mouseover(
function() {
dopopup(el, $(this).attr('data-popup-order'));
});
$(triggerelement).mouseout(
function() {
hidePopUp(el);
});
}
/**
* Close popup on ESC key (binded only if a popup is open)
*/
if (options.escape) {
$(document).keydown(function(e) {
if (e.keyCode == 27 && $el.css('display') == 'block') {
hidePopUp(el);
}
});
}
/**
* Repositioning popup when window resize
*/
$(window).bind('resize', function() {
if (options.type != 'tooltip') {
positionpopup(el);
}
});
/**
* Z-index calculation
*/
if (options.autozindex === true) {
var maxZIndex = Math.max(0, Math.max.apply(null, $.map($.makeArray(document.getElementsByTagName("*")), function(v) {
return parseFloat($(v).css("z-index")) || null;
})));
level[el.id] = maxZIndex;
// add z-index to the wrapper
if (level[el.id] > 0) {
$el.css({
zIndex: (level[el.id] + 2)
});
}
// add z-index to the background
if (options.background) {
if (level[el.id] > 0) {
$('#' + el.id + '_background').css({
zIndex: (level[el.id] + 1)
});
}
}
}
/**
* Automaticaly open popup on start, if autoopen option is set
*/
if (options.autoopen) {
dopopup(el, 0);
}
}; // init
/**
* Popup method
*
* @param el - popup element
* @param order - element which triggered this method
*/
var dopopup = function(el, order) {
var clickplace = order;
/**
* beforeopen Callback
*/
callback(options.beforeopen, clickplace);
// remember last clicked place
lastclicked[el.id] = clickplace;
// show popup
if (options.fade) {
$el.fadeIn(options.fade, function() {
$(document).on('click', blurhandler);
$(document).on('focusin', focushandler);
});
} else {
$el.show();
setTimeout(function() {
$(document).on('click', blurhandler);
$(document).on('focusin', focushandler);
}, 0);
}
// position
positionpopup(el, clickplace);
// show background
if (options.background) {
if (options.fade) {
$('#' + el.id + '_background').fadeIn(options.fade);
} else {
$('#' + el.id + '_background').show();
}
}
/**
* Keep focus inside dialog box
*/
if (options.keepfocus) {
// make overlay holder div focusable and focus it
$newel.attr('tabindex', -1).focus();
focushandler = function(e) {
if (!$(e.target).parents().andSelf().is('#' + el.id)) {
$newel.focus();
}
};
}
/**
* onOpen Callback
*/
callback(options.onOpen, clickplace);
/**
* Close popup on blur
*/
if (options.blur) {
blurhandler = function(e) {
if (!$(e.target).parents().andSelf().is('#' + el.id)) {
hidePopUp(el);
}
};
}
};
/**
* Position popup
*
* @param el
*/
var positionpopup = function(el, clickplace) {
clickplace = clickplace || 0;
// TOOLTIP
if (options.type == 'tooltip') {
$el.css({
'position': 'absolute'
});
var $link = $('.' + el.id + options.opensufix + '[data-popup-order="' + clickplace + '"]');
var linkOffset = $link.offset();
// tooltip horizontal
if (options.horizontal == 'right') {
$el.css('left', linkOffset.left + $link.outerWidth());
} else if (options.horizontal == 'left') {
$el.css('right', $(window).width() - linkOffset.left);
} else {
$el.css('left', linkOffset.left + ($link.outerWidth() / 2) - ($(el).outerWidth() / 2) - parseFloat($(el).css('marginLeft')) );
}
// tooltip vertical
if (options.vertical == 'bottom') {
$el.css('top', linkOffset.top + $link.outerHeight());
} else if (options.vertical == 'top') {
$el.css('bottom', $(window).height() - linkOffset.top);
} else {
$el.css('top', linkOffset.top + ($link.outerHeight() / 2) - ($(el).outerHeight() / 2) - parseFloat($(el).css('marginTop')) );
}
// OVERLAY
} else if (options.type == 'overlay') {
// if height of the popup exceeds the visible area – make the popup scrollable
if ($window.height() < ($newel.outerHeight() + parseFloat($newel.css('marginTop')) + parseFloat($newel.css('marginBottom')))) {
$el.css({
position: 'absolute',
top: $window.scrollTop()
});
} else {
$el.css({
position: 'fixed',
top: '0'
});
}
}
};
/**
* Hide popup
*
* @param {DOM Object} el
*/
var hidePopUp = function(el) {
// hide background
if (options.background) {
if (options.fade) {
$('#' + el.id + '_background').fadeOut(options.fade);
} else {
$('#' + el.id + '_background').hide();
}
}
// unbind event for blur when popup closes
if (options.blur) {
$(document).off('click', blurhandler);
}
if (options.keepfocus) {
$(document).off('focusin', focushandler);
// focus opening link on popup close
$('.' + el.id + options.opensufix).focus();
}
// hide popup
if (options.fade) {
$el.fadeOut(options.fade);
} else {
$el.hide();
}
/**
* onClose callback
*/
callback(options.onClose, lastclicked[el.id]);
};
/**
* Callbacks calls
*
* @param func - callback function
* @param clickplace
*/
var callback = function(func, clickplace) {
var cp = $('.' + $el.attr('id') + options.opensufix + '[data-popup-order="' + clickplace + '"]');
if (typeof func == 'function') {
func(cp);
}
};
this.each(function() {
init(this);
});
}; //fn.popup
})(jQuery);
1 个解决方案
解决方案1
2 已采纳 2013-05-14 16:24:25
Never used this before, but I see that the plugin is modifying the divs and creating new ones as wrappers, etc. If you are modifying / generating the div on the fly then perhaps there is a race condition. 从来没有使用过这个，但我看到插件正在修改div并创建新的包装等等。如果你正在修改/生成div，那么也许存在竞争条件。 Also i don't see where you are setting any options on popup() -- it seems that you want {autoopen : true} 此外，我没有看到你在popup()上设置任何选项 - 似乎你想要{autoopen : true}
Anyway, no race condition in this fiddle as I'm dynamically updating the contents of one single div that persists and used as the modal so it seems to work fine. 无论如何，这个小提琴没有竞争条件，因为我正在动态更新一个单独的div的内容，这个div持续存在并用作模态，所以它似乎工作正常。
Fiddle 小提琴
$('#modal').popup({autoopen : true});
The plugin seems to have a bug where it can only be instantiated so I added it to a cloned element and destroy it when hidden. 该插件似乎有一个错误，它只能被实例化，所以我将它添加到克隆元素并在隐藏时将其销毁。 If it has a reopen method then use that bug I could not see it. 如果它有重新打开的方法然后使用我无法看到它的bug。
$(function () {
var destroyModal = function(){
$(this).remove();
}
$("button").click(function () {
var me = $(this);
$('.modal').clone().text( me.val() )
.popup({autoopen : true, onclose : destroyModal});
return false;
}); // end click
}); // end ready
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在PHP和JavaScript之间传递数据？ - Passing data between PHP and JavaScript?
使用Javascript在框架之间传递数据 - Passing data between frames with Javascript
在PHP中的类之间传递数据 - Passing data between classes in PHP
在PHP文件之间传递数据 - Passing data between PHP files
在c和php之间传递数据 - Passing data between c and php
将数据从PHP传递到JavaScript - Passing data from PHP to JavaScript
传递多数据 php 和 javascript - passing multi data php and javascript
将数据从 PHP 传递到 JavaScript - Passing data from PHP to JavaScript
在php和javascript之间传递utf-8字符串 - Passing utf-8 strings between php and javascript
在 PHP 和 Javascript 之间传递变量时遇到问题 - Trouble passing variables between PHP and Javascript
相关标签