在PHP和Javascript之间传递数据

时间:2013-05-14 15:27:33

标签: php jquery

我要做的是使用PHP生成一系列按钮,这些按钮对应于MySQL数据库中的名称。当用户选择按钮时,它将根据所选按钮在叠加弹出窗口中显示不同的文本。我是PHP,jQuery等新手,所以现在我想尝试一些更简单的工作(没有数据库部分)。这是我的代码:

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

这将生成两个名为User 1和User 2的按钮。问题是如果我慢慢点击它们,文本(“Hello,One”或“Hello,Two”)只显示在页面上的按钮下方,而不是弹出窗口。如果我足够快地点击它们,它就可以了。所以我知道数据已经通过,但显然存在延迟,我不确定在哪里?

编辑:这是弹出窗口的代码(它不是由我开发的):

 /**
 * 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 个答案:

答案 0 :(得分:2)

之前从未使用过这个,但是我看到插件正在修改div并创建新的包装等等。如果你正在修改/生成div,那么可能存在竞争条件。此外,我看不到您在popup()上设置任何选项的位置 - 您似乎想要{autoopen : true}

无论如何,这个小提琴没有竞争条件,因为我正在动态更新一个单独的div的内容,这个div仍然存在并用作模态,因此它似乎工作正常。

Fiddle

$('#modal').popup({autoopen : true});

该插件似乎有一个错误,它只能被实例化,所以我将它添加到克隆元素并在隐藏时将其销毁。如果它有重新打开方法,那么使用我看不到的那个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