Databases
StackOverflow2013
Postsdbo
POjQuery Facebox: Sends empty input field value
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Facebox: Sends empty input field value
    primarykey
    data
    text
    <p>I have facebox plugin to my jQuery, to make lightbox for me. I made a link that you click on and then a friend request form comes up in it.</p> <p>The form makes an ajaxcall when click on "Send request", but the 2 fields dont send anything of what you have written in it, it just sends empty value.</p> <p>But if its not inside the facebox lightbox then it works and sends the values in the ajax call.</p> <p>So something in the facebox.js is preventing the fields and send them empty values.</p> <p>How can i solve this?</p> <p>Here's facebox.js:</p> <pre><code> (function($) { $.facebox = function(data, klass) { $.facebox.loading() if (data.ajax) fillFaceboxFromAjax(data.ajax) else if (data.image) fillFaceboxFromImage(data.image) else if (data.div) fillFaceboxFromHref(data.div) else if ($.isFunction(data)) data.call($) else $.facebox.reveal(data, klass) } /* * Public, $.facebox methods */ $.extend($.facebox, { settings: { opacity : 0, overlay : true, loadingImage : 'images/loading.gif', closeImage : 'images/closelabel.png', imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], faceboxHtml : '\ &lt;div id="facebox" style="display:none;"&gt; \ &lt;div class="popup"&gt; \ &lt;table&gt; \ &lt;tbody&gt; \ &lt;tr&gt; \ &lt;td class="tl"/&gt;&lt;td class="b"/&gt;&lt;td class="tr"/&gt; \ &lt;/tr&gt; \ &lt;tr&gt; \ &lt;td class="b"/&gt; \ &lt;td class="body"&gt; \ &lt;div class="content"&gt; \ &lt;/div&gt; \ &lt;div class="footer"&gt; \ &lt;a href="#" class="close"&gt; \ &lt;img src="/facebox/closelabel.gif" title="close" class="close_image" /&gt; \ &lt;/a&gt; \ &lt;/div&gt; \ &lt;/td&gt; \ &lt;td class="b"/&gt; \ &lt;/tr&gt; \ &lt;tr&gt; \ &lt;td class="bl"/&gt;&lt;td class="b"/&gt;&lt;td class="br"/&gt; \ &lt;/tr&gt; \ &lt;/tbody&gt; \ &lt;/table&gt; \ &lt;/div&gt; \ &lt;/div&gt;' }, loading: function() { init() if ($('#facebox .loading').length == 1) return true showOverlay() $('#facebox .content').empty() $('#facebox .body').children().hide().end(). append('&lt;div class="loading"&gt;&lt;img src="'+$.facebox.settings.loadingImage+'"/&gt;&lt;/div&gt;') $('#facebox').css({ top: getPageScroll()[1] + (getPageHeight() / 10), left: 385.5 }).show() $(document).bind('keydown.facebox', function(e) { if (e.keyCode == 27) $.facebox.close() return true }) $(document).trigger('loading.facebox') }, reveal: function(data, klass) { $(document).trigger('beforeReveal.facebox') if (klass) $('#facebox .content').addClass(klass) $('#facebox .content').append(data) $('#facebox .loading').remove() $('#facebox .body').children().fadeIn('normal') $('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2)) $(document).trigger('reveal.facebox').trigger('afterReveal.facebox') }, close: function() { $(document).trigger('close.facebox') return false } }) /* * Public, $.fn methods */ $.fn.facebox = function(settings) { init(settings) function clickHandler() { $.facebox.loading(true) // support for rel="facebox.inline_popup" syntax, to add a class // also supports deprecated "facebox[.inline_popup]" syntax var klass = this.rel.match(/facebox\[?\.(\w+)\]?/) if (klass) klass = klass[1] fillFaceboxFromHref(this.href, klass) return false } return this.click(clickHandler) } /* * Private methods */ // called one time to setup facebox on this page function init(settings) { if ($.facebox.settings.inited) return true else $.facebox.settings.inited = true $(document).trigger('init.facebox') makeCompatible() var imageTypes = $.facebox.settings.imageTypes.join('|') $.facebox.settings.imageTypesRegexp = new RegExp('\.' + imageTypes + '$', 'i') if (settings) $.extend($.facebox.settings, settings) $('body').append($.facebox.settings.faceboxHtml) var preload = [ new Image(), new Image() ] preload[0].src = $.facebox.settings.closeImage preload[1].src = $.facebox.settings.loadingImage $('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() { preload.push(new Image()) preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') }) $('#facebox .close').click($.facebox.close) $('#facebox .close_image').attr('src', $.facebox.settings.closeImage) } // getPageScroll() by quirksmode.com function getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) { // Explorer 6 Strict yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; xScroll = document.body.scrollLeft; } return new Array(xScroll,yScroll) } // Adapted from getPageSize() by quirksmode.com function getPageHeight() { var windowHeight if (self.innerHeight) { // all except Explorer windowHeight = self.innerHeight; } else if (document.documentElement &amp;&amp; document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowHeight = document.body.clientHeight; } return windowHeight } // Backwards compatibility function makeCompatible() { var $s = $.facebox.settings $s.loadingImage = $s.loading_image || $s.loadingImage $s.closeImage = $s.close_image || $s.closeImage $s.imageTypes = $s.image_types || $s.imageTypes $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml } // Figures out what you want to display and displays it // formats are: // div: #id // image: blah.extension // ajax: anything else function fillFaceboxFromHref(href, klass) { // div if (href.match(/#/)) { var url = window.location.href.split('#')[0] var target = href.replace(url,'') $.facebox.reveal($(target).clone().show(), klass) // image } else if (href.match($.facebox.settings.imageTypesRegexp)) { fillFaceboxFromImage(href, klass) // ajax } else { fillFaceboxFromAjax(href, klass) } } function fillFaceboxFromImage(href, klass) { var image = new Image() image.onload = function() { $.facebox.reveal('&lt;div class="image"&gt;&lt;img src="' + image.src + '" /&gt;&lt;/div&gt;', klass) } image.src = href } function fillFaceboxFromAjax(href, klass) { $.get(href, function(data) { $.facebox.reveal(data, klass) }) } function skipOverlay() { return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null } function showOverlay() { if (skipOverlay()) return if ($('facebox_overlay').length == 0) $("body").append('&lt;div id="facebox_overlay" class="facebox_hide"&gt;&lt;/div&gt;') $('#facebox_overlay').hide().addClass("facebox_overlayBG") .css('opacity', $.facebox.settings.opacity) .click(function() { $(document).trigger('close.facebox') }) .fadeIn(200) return false } function hideOverlay() { if (skipOverlay()) return $('#facebox_overlay').fadeOut(200, function(){ $("#facebox_overlay").removeClass("facebox_overlayBG") $("#facebox_overlay").addClass("facebox_hide") $("#facebox_overlay").remove() }) return false } /* * Bindings */ $(document).bind('close.facebox', function() { $(document).unbind('keydown.facebox') $('#facebox').fadeOut(function() { $('#facebox .content').removeClass().addClass('content') hideOverlay() $('#facebox .loading').remove() }) }) })(jQuery); </code></pre> <p>Here's my form even though i doubt anything is wrong here as it works outside the box:</p> <pre><code> &lt;div id="addFriend" style="display: none;"&gt; &lt;div style="float:right; font-size: 14px;"&gt;Add &lt;strong&gt;&lt;?php echo $showU["full_name"]; ?&gt;&lt;/strong&gt; as friend &lt;/div&gt; &lt;div class="clearfloat"&gt;&lt;/div&gt; &lt;form id="FriendRequest" action="javascript:DoFriendRequest(&lt;?php echo $v["id"]; ?&gt;, &lt;? echo $showU["id"]; ?&gt;)" method="post"&gt; &lt;script type="text/javascript" charset="utf-8"&gt; $(document).ready(function(){ $("label").inFieldLabels(); }); &lt;/script&gt; &lt;table align="center" width="auto" border="0" cellpadding="5" cellspacing="5" style="margin: auto;"&gt; &lt;tr&gt; &lt;td style="padding: 10px;" align="center"&gt; Comment: &lt;/td&gt;&lt;td&gt; &lt;span class="field"&gt; &lt;input name="commentFriend" type="text" id="commentFriend" style="height: auto;"value="" size="22"&gt; &lt;/span&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt; &lt;td style="padding: 10px;" align="center"&gt; Message: &lt;/td&gt;&lt;td&gt; &lt;span class="field"&gt; &lt;input name="messageFriend" type="text" id="messageFriend" value="" size="22"&gt; &lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2" style="margin: auto; text-align: center;"&gt; &lt;input name="submit" type="submit" id="submit" value="Send request"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2" style="margin: auto; text-align: center;"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;div style="margin: auto; text-align: center; font-size: 16px; font-weight: bold;" id="insert_svar"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>DoFriendRequest()</p> <pre><code>function DoFriendRequest(BuID, uID){ $('#submit').attr('disabled', 'disabled'); var wrapperId = '#insert_svar'; $.ajax({ type: "POST", url: "misc/AddFriendRequest.php", data: { mode: 'ajax', BuID : BuID, uID : uID, message : $('#messageFriend').val(), comment : $('#commentFriend').val() }, success: function(msg){ $('#submit').removeAttr('disabled'); $(wrapperId).prepend(msg); $('#FriendRequest').fadeOut('slow'); $('#message').val(""); $('#comment').val(""); } }); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNick Craver
    1. USKarem
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Facebox: Sends empty input field value
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery Facebox: Sends empty input field value
      1. USKarem
      1. VTFavorite
    3. VO
      singulars
      1. POjQuery Facebox: Sends empty input field value
      1. USKarem
      1. VTBountyStart
    1. CODo you have this on a page somewhere so you can provide a link? That would be easier to test than rebuilding your page to test.
      singulars
      1. POjQuery Facebox: Sends empty input field value
      1. USJarrett Widman
    2. COCould you share the whole markup? I can't help you out if I don't have the whole source code. Sorry I was suppose to just leave a comment on your question but I don't have enough reputation to do so. I'll update this answer when I come up with one. As a temporary answer to your question, you might want to check this out. It might help - http://www.caiapps.com/stick-on-facebox/
      singulars
      1. POjQuery Facebox: Sends empty input field value
      1. USTerence Ponce
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload