jQuery Facebox:发送空输入字段值

时间：2022-11-13 18:50:21

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.

我有facebox插件到我的jQuery，为我制作lightbox。我做了一个链接，你点击，然后一个朋友请求表格出现在里面。

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.

当单击“发送请求”时，表单会发出一个ajaxcall，但这两个字段不会发送任何您在其中编写的内容，它只发送空值。

But if its not inside the facebox lightbox then it works and sends the values in the ajax call.

但是如果它不在facebox lightbox中，那么它就可以工作并在ajax调用中发送值。

So something in the facebox.js is preventing the fields and send them empty values.

在facebox中。js正在阻止字段并将空值发送给它们。

How can i solve this?

我怎么解决这个问题?

Here's facebox.js:

facebox.js:

    (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  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \
              <td class="tl"/><td class="b"/><td class="tr"/> \
            </tr> \
            <tr> \
              <td class="b"/> \
              <td class="body"> \
                <div class="content"> \
                </div> \
                <div class="footer"> \
                  <a href="#" class="close"> \
                    <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </div> \
              </td> \
              <td class="b"/> \
            </tr> \
            <tr> \
              <td class="bl"/><td class="b"/><td class="br"/> \
            </tr> \
          </tbody> \
        </table> \
      </div> \
    </div>'
    },

    loading: function() {
      init()
      if ($('#facebox .loading').length == 1) return true
      showOverlay()

      $('#facebox .content').empty()
      $('#facebox .body').children().hide().end().
        append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')

      $('#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 && 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 && 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('<div class="image"><img src="' + image.src + '" /></div>', 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('<div id="facebox_overlay" class="facebox_hide"></div>')

    $('#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);

Here's my form even though i doubt anything is wrong here as it works outside the box:

这是我的表格，尽管我怀疑这里有什么问题，因为它在盒子外面工作:

        <div id="addFriend" style="display: none;">
                <div style="float:right; font-size: 14px;">Add <strong><?php echo $showU["full_name"]; ?></strong> as friend </div>
                <div class="clearfloat"></div>

<form id="FriendRequest" action="javascript:DoFriendRequest(<?php echo $v["id"]; ?>, <? echo $showU["id"]; ?>)" method="post">

        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
  $("label").inFieldLabels();
});
    </script> 
                <table align="center" width="auto" border="0" cellpadding="5" cellspacing="5" style="margin: auto;">
                <tr>
                <td style="padding: 10px;" align="center">
                Comment: </td><td>
                <span class="field">

                <input name="commentFriend" type="text" id="commentFriend" style="height: auto;"value="" size="22"> 
                </span>
                </td></tr><tr>
                <td style="padding: 10px;"  align="center">
                Message:
                </td><td> 
                <span class="field">

                <input name="messageFriend" type="text" id="messageFriend" value="" size="22">
                </span>
                </td>
                </tr>
                <tr>
                <td colspan="2" style="margin: auto; text-align: center;">
                <input name="submit" type="submit" id="submit" value="Send request">
                </td>
                </tr>

                <tr>
                                <td colspan="2" style="margin: auto; text-align: center;">
                </td>
                </tr>
                </table>
                </form>

                <div style="margin: auto; text-align: center; font-size: 16px; font-weight: bold;" id="insert_svar"></div>
    </div>

DoFriendRequest()

DoFriendRequest()

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("");
        }
     });
}

2 个解决方案

#1

4  

The problem is on this line:

问题就在这条线上:

$.facebox.reveal($(target).clone().show(), klass)

It's cloning your elements, specifically id="messageFriend" and id="commentFriend" which is causing issues since they're supposed to be unique. The #ID selector is finding the original elements which are still empty (the cloned ones have the values you're after).

它正在克隆您的元素，特别是id=“messageFriend”和id=“commentFriend”，这将导致问题，因为它们应该是惟一的。#ID选择器正在查找仍然为空的原始元素(克隆的元素具有您要的值)。

To resolve this, I would remove the id attributes and find them by name instead...and then only find the :visible ones, which would be the currently open facebox, like this:

为了解决这个问题，我将删除id属性并通过名称查找它们…然后只找到:可见的，也就是当前打开的facebox，像这样:

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 : $('input[name=messageFriend]:visible').val(),
      comment : $('input[name=commentFriend]:visible').val() 
    },
    success: function(msg){
      $('#submit').removeAttr('disabled');
      $(wrapperId).prepend(msg);
      $('#FriendRequest').fadeOut('slow'); 
      $('#message, #comment').val("");
    }
  });
}

You can try the updated version here, take a look at the console to see it is indeed submitting the values now.

您可以在这里尝试更新的版本，查看控制台，看看它是否确实正在提交值。

#2

1  

Try:

试一试:

$("target:last").serialize()

#1

4  

The problem is on this line:

问题就在这条线上:

$.facebox.reveal($(target).clone().show(), klass)

It's cloning your elements, specifically id="messageFriend" and id="commentFriend" which is causing issues since they're supposed to be unique. The #ID selector is finding the original elements which are still empty (the cloned ones have the values you're after).

它正在克隆您的元素，特别是id=“messageFriend”和id=“commentFriend”，这将导致问题，因为它们应该是惟一的。#ID选择器正在查找仍然为空的原始元素(克隆的元素具有您要的值)。

To resolve this, I would remove the id attributes and find them by name instead...and then only find the :visible ones, which would be the currently open facebox, like this:

为了解决这个问题，我将删除id属性并通过名称查找它们…然后只找到:可见的，也就是当前打开的facebox，像这样:

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 : $('input[name=messageFriend]:visible').val(),
      comment : $('input[name=commentFriend]:visible').val() 
    },
    success: function(msg){
      $('#submit').removeAttr('disabled');
      $(wrapperId).prepend(msg);
      $('#FriendRequest').fadeOut('slow'); 
      $('#message, #comment').val("");
    }
  });
}

You can try the updated version here, take a look at the console to see it is indeed submitting the values now.

您可以在这里尝试更新的版本，查看控制台，看看它是否确实正在提交值。

#2

1  

Try:

试一试:

$("target:last").serialize()
标签：

相关文章