jQuery Facebox: भेजता रिक्त इनपुट फ़ील्ड मान

Question

मैं मेरे लिए लाइटबॉक्स बनाने के लिए मेरी jQuery के facebox प्लगइन है,। मैंने एक लिंक बनाया है जिसे आप क्लिक करते हैं और उसके बाद एक मित्र अनुरोध फ़ॉर्म इसमें आता है।

प्रपत्र एक ajaxcall जब "अनुरोध भेजें" पर क्लिक करें, लेकिन 2 खेतों न क्या आप इसे में लिखा है की कुछ भी भेजने के लिए, यह सिर्फ रिक्त मान भेजता है बनाता है।

लेकिन इसकी नहीं facebox लाइटबॉक्स अंदर तो यह काम करता है और ajax कॉल में मान भेजता है।

तो 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); 

यहाँ मेरी फार्म है, भले ही मैं शक कुछ भी यहाँ गलत है, क्योंकि यह बॉक्स के बाहर काम करता है:

 <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()

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

Answer 1

समस्या इस लाइन पर है:

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

यह अपने तत्वों को क्लोनिंग कर रहा है, विशेष रूप से id="messageFriend" और id="commentFriend" जो समस्याएं आ रही हैं, क्योंकि वे चाहिए अद्वितीय होने की कर रहे हैं। #ID selectorमूल तत्व है जो अभी भी खाली (क्लोन लोगों मूल्यों आप के बाद कर रहे हैं है) की खोज कर रहा है।

इस को हल करने के मैं id विशेषताओं को दूर करेंगे और उनका name द्वारा बजाय लगता है ... और उसके बाद ही :visible हैं, जो वर्तमान में खुले 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, यह देखने के लिए कंसोल पर एक नज़र डालें कि यह वास्तव में मूल्यों को सबमिट कर रहा है।

Answer 2

प्रयास करें:

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