如何防止提交后立即关闭jQuery FancyBox？

我正在从jQuery的FancyBox中加载内联注册表单。然而，在提交表单后，该框会立即关闭，同时有一些反馈意见让我想在FancyBox中显示用户。此反馈在服务器端生成并打印在FancyBox中。如何防止提交后立即关闭jQuery FancyBox？

如何让箱子只在他们没有反馈时关闭？我正在考虑使用ajax刷新FancyBox本身，而不是刷新后的整个页面。但我只是无法弄清楚这是如何ajax $ .ajax（{类型，缓存，网址，数据，成功}）;工作......另外，它似乎没有从JavaScript中的'提交绑定'的反应。

我希望有人能帮助我解决这个问题。我在下面粘贴我的代码。如有任何疑问，请询问..

Thx提前！

这是JavaScript：

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#various1").fancybox({ 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'scrolling'   : 'no', 
       'titleShow'   : false, 
       'onClosed'   : function() { 
        $("#registration_error").hide(); 
       } 
      }); 
     }); 

     $("#registration_form").bind("submit", function() { 


      if ($("#registration_error").val() != "Registration succeeded!") { 
       $("#registration_error").show(); 
       $.fancybox.resize(); 
       return false; 
      } 

      $.fancybox.showActivity(); 

      $.ajax({ 
       type  : "POST", 
       cache  : false, 
       url   : "/data/login.php", 
       data  : $(this).serializeArray(), 
       success  : function(data) { 
        $.fancybox(data); 
       } 
      }); 

      return false; 
     });

这是直列形式，我显示在的fancybox：

<div style="display: none;"> 
     <div id="registration" style="width:227px;height:250px;overflow:auto;padding:7px;"> 
     <?php echo "<p id=\"registration_error\">".$feed."</p>"; ?> 
     <form id="registration_form" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"> 
      <p> 
       <label for="username">Username: </label> 
       <input type="text" id="login_name" name="username" size="30" /> 
      </p> 
      <p> 
       <label for="password">Password: </label> 
       <input type="password" id="pass" name="pw" size="30" /> 
      </p> 
      <p> 
       <label for="repeat_password">Repeat password: </label> 
       <input type="password" id="rep_pass" name="rep_pw" size="30" /> 
      </p> 
      <p> 
       <input type="submit" value="Register" name="register" id="reg" /> 
      </p> 
      <p> 
       <em></em> 
      </p> 
     </form> 
     </div> 
    </div>

来源

2010-06-06 Dimitri

我用的fancybox的AJAX部分..

$.ajax({ 
        type  : "POST", 
        cache  : false, 
        url   : "data/register.php", 
        data  : $(this).serializeArray(), 
        success  : function(data) { 
         data = $.parseJSON(data); 

        if (data.feedback == "Registration succeeded!") { 
         $.fancybox("Welcome, "+data.name+"! You can now log in."); 
         $.fancybox.resize(); 
        } 
        else{ 
         $("#registration_error").html(data.feedback); 
        } 
       } 
      });

在register.php文件中，我检查了数据是否正确，并提出了一些反馈。我将register.php中的反馈放在JSON对象中，我可以在我的主页中的ajax的'success'选项中使用它（请参阅上文）。如果反馈是积极的，我做了fancybox，如果没有，我把反馈放在注册表单中的div #registration_error中。

我register.php文件的代码如下所示：

$feed = ""; 

// Put post vars in php vars 
$username = $_POST[username]; 
$password = $_POST[pw]; 
$rep_password = $_POST[rep_pw]; 

// Check if php vars are not empty and check if the username doesn't exist in my user.class 
if(!empty($username) && !empty($password) && !empty($rep_password)) 
{ 
    $user = new User(); 

    $user->Username = $username; 
    $user->Password = $password; 
    $user->Password2 = $rep_password; 

    try 
    { 
     $user->Save(); 
     $feed .= "Registration succeeded!"; 
    } 
    catch(Exception $e) 
    { 
     $feed = $e->getMessage(); 
    } 
} 
else 
{ 
    $feed = "Please fill in all the fields!"; 
} 

// Feedback for fancybox 
$output = array(); 

$output['name'] = $username; 
$output['feedback'] = $feed; 

// Send JSON 
$output = json_encode($output); 
print $output;

希望这将帮助你！

GRtz！

来源

2010-06-10 11:02:21 Dimitri

我做到了这一点。

如果设置了$ _POST ['xxx']，我基本上会触发一个打开窗体的链接。

首先jQuery的函数打开一个表单，如果一个元素id = form被点击。第二个函数会调用元素id = triger_form来打开相同的表单。

$(document).ready(function() { 

$("a#form").fancybox({ 
    'hideOnContentClick': false 
}); 
$("a#triger_form").fancybox().trigger('click')({ 
    'hideOnContentClick': false 
});

}）;

if($_POST['refer_submit'] == TRUE) {

echo''; }

来源

2010-08-11 21:10:21

在iframe打开的fancybox，这里是submition之后打印的代码：

<script type='text/javascript'> 
    $(document).ready(function(){ 
    parent.document.location.reload(); 
    parent.jQuery.fancybox.close(); 
    }); 
</script>

来源

2010-09-14 07:27:01 Olivier

如何防止提交后立即关闭jQuery FancyBox？

回答

相关问题