如何在成功的服務器響應後關閉Colorbox，但保持打開狀態以顯示錯誤

我遇到問題了解如何在出現錯誤/失敗登錄時保持打開colorbox模式疊加，但關閉它，並在成功時刷新父窗口提交表格。這應該與Digg登錄過程大致相同，即模式疊加層保持打開並且頁面頂部出現錯誤。但是，我的代碼中直接在我的表單頂部顯示了錯誤的間隔。說到代碼...如何在成功的服務器響應後關閉Colorbox，但保持打開狀態以顯示錯誤

服務器端：

我用笨在服務器端，但希望PHP人們會得到的想法：

<div class="login_box clearfix" id="login_box"> 
<div class="left"> 
    <?php if (validation_errors()): ?> 
     <?php echo $template['partials']['notices']; ?> 
    <?php endif; ?> 

    <?php echo form_open('users/login', array('id'=>'login')); ?> 

     <label for="email" class="inlined"><?php echo lang('user_email'); ?></label> 
     <input type="text" id="email" name="email" maxlength="120" class="input-text"/> 

     <div class="password_holder"> 
      <label for="password" class="inlined"><?php echo lang('user_password'); ?></label> 
      <input type="password" id="password" name="password" maxlength="20" class="input-text" /> 

      <?php echo anchor('users/reset_pass', 'Forgot?', array('class' => 'inline-anchor'));?> 
     </div> 

     <div class="submit_holder"> 
      <input type="submit" value="<?php echo lang('user_login_btn') ?>" name="btnLogin" class="button gray"/> 

      <input type="checkbox" id="remember_me" name="remember" value="1" /> 
      <label for="remember_me" class="checkbox-label"><?php echo lang('user_remember'); ?></label> 
     </div> 

    <?php echo form_close(); ?> 

    <div class="bottom"> 
     <p>Don't have an account? <?php echo anchor('register', 'Create one.');?></p> 
    </div> 
</div> 

<div class="vr"></div> 

<div class="right"> 
    // Reasons to register go here. 
</div>

前端代碼 - 這是儘可能使用Colorbox，我無法弄清楚如何讓我的提交錯誤重新觸發colorbox，但確保它關閉並刷新成功登錄後的父窗口。目前，它幾乎以我想要的方式運作，但仍然遙遙無期。

$('#loginButton').colorbox({ 
    transition:'elastic', 
    speed:600, 
    initialWidth: 100, 
    initialHeight: 100, 
    width: 670, 
    height: 290, 
    scrolling: false, 
    overlayClose: false, 
    href: $(this).attr('href'), 
});

來源

2011-03-30 dnyce

我不使用任何顏色框更由於它的大小，我覺得它的API有點不可思議。您可能想了解一下http://flowplayer.org/tools/demos/overlay/index.html – Treffynnon 2011-03-30 08:19:42

您如何提交表單？與jquery.submit（）？在您想要關閉之前，什麼操作關閉了colorbox模式？ – kevtrout 2011-03-30 11:23:45

@Treffynnon：我必須檢查一下。 @kevtrout：通過爲my.localsite.com/login提供由Codeigniter提供的相應HTML響應，將表單加載到colorbox中。在後端，我有一個變量設置，讓腳本知道請求是否通過AJAX進行。由於html被加載到colorbox中，因此提交表單會自動關閉colorbox並重新加載父頁面。不過，我認爲這僅僅是巧合，我試圖弄清楚它是如何工作的。但它不是通過jquery.submit提交的。 – dnyce 2011-03-30 16:50:27

周圍挖了好幾天後，我通過這個答案通過教程米什搗爛通過讀取彩盒主頁上的常見問題解答絆倒了。

這裏的主要原因是我試圖將一個完整的HTML文檔加載到colorbox中，當時我應該使用iframe或調用了我試圖拉入Colorbox的確切元素。另一個問題是，我不得不利用Colorbox提供的onComplete回調再次調用Colorbox，這是通過prepForm函數完成的。

希望這個代碼可以幫助別人誰碰到這個問題絆倒：

 function prepForm(){ 

     $("#login").ajaxForm({ 
      dataType: 'json', 
      success: function(data){ 

       if (data.success === false) { 
        $.fn.colorbox({ 
         transition:'elastic', 
         speed:600, 
         width: 670, 
         height: 290, 
         scrolling: false, 
         overlayClose: false, 
         html: data.result, 
         onComplete: prepForm, 
         href:$(this).attr('href')+" div#login_box", 
        }); 
       } else { 
        location.reload(true); 

        // Reload the parent and close Cbox 
        $.fn.colorbox.close(); 
       } 
      }, 
     }); 
    } 

    $('#loginButton').click(function(e){ 
     e.preventDefault(); 

     $(this).colorbox({ 
      transition:'elastic', 
      speed:600, 
      width: 670, 
      height: 290, 
      scrolling: false, 
      overlayClose: false, 
      onComplete: prepForm, 
      href:$(this).attr('href')+" div#login_box", 
     }); 
    });

來源

2011-04-01 20:50:12 dnyce

如何在成功的服務器響應後關閉Colorbox，但保持打開狀態以顯示錯誤

回答

相關問題