jquery - Passing Data Between PHP and Javascript -
what trying generate series of buttons php correspond names in mysql database. when user selects button display different text in overlay popup depending on button selected. i'm new php, jquery, etc. trying little simpler work (without database part). here 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 generate 2 buttons named user 1 , user 2. problem if click them slowly, text ("hello, one" or "hello, two") appears below buttons on page, not in popup. if click them fast enough however, works. know data getting passed there delay , i'm not sure where?
edit: here code popup (it not developed 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 dry... $newel = $el; $el = $wrapper = $('#' + el.id + '_wrapper'); positionpopup(el); return false; } // initialize on once if ($el.attr('data-popup-initialized')) { return false; } $el.attr('data-popup-initialized', 'true'); /** * set variables */ var triggerelement = '.' + el.id + options.opensufix; // class open popup /** * set other options related type: tooltip */ if (options.type == 'tooltip') { options.background = false; options.keepfocus = false; } /** * hide popups aren't hidden css , move top or bottom of <body> tag */ $el.css({ display: 'none' }); // append instead of prepend if document ready // if (((document.readystate === 'interactive') || (document.readystate === 'complete')) && !($.browser.msie && parsefloat($.browser.version) < 8)) { // $body.append(el); // } else { $body.prepend(el); // } /** * create background div , append top or bottom of 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 event 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 if popup 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 wrapper if (level[el.id] > 0) { $el.css({ zindex: (level[el.id] + 2) }); } // add z-index 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 set */ if (options.autoopen) { dopopup(el, 0); } }; // init /** * popup method * * @param el - popup element * @param order - element triggered 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 , focus $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 popup exceeds visible area – make 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 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);
never used before, see plugin modifying divs , creating new ones wrappers, etc. if modifying / generating div on fly perhaps there race condition. don't see setting options on popup() -- seems want {autoopen : true}
anyway, no race condition in fiddle i'm dynamically updating contents of 1 single div persists , used modal seems work fine.
fiddle
$('#modal').popup({autoopen : true}); the plugin seems have bug can instantiated added cloned element , destroy when hidden. if has reopen method use bug not see it.
$(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
Comments
Post a Comment