如何「突圍」一個jQuery彩盒

如果我有一個jQuery colorbox()使用iframe，並且在那（例如，登錄表格）<form>，則：如何「突圍」一個jQuery彩盒

如果提交的形式是不成功（如必填字段爲空），那麼該表應在iframe
如果表單成功（如密碼正確），該周邊網頁小號重新顯示與錯誤應重新加載結果

只有服務器請求可以知道提交是否成功（例如，因此無法在<form>標記上使用target=參數。（因爲必須在請求頁面上設置響應的成功尚不明確的地方）。

應該如何實現這一目標？現在我做到以下幾點：

的<form>沒有特別的「目標」，即其結果顯示在iframe

如果表單提交不成功，重新顯示在iframe的形式（在簡單情況下）

如果表單提交成功，則在包含Javascript的iframe中顯示「響應」頁面以刷新整個頁面。

的JavaScript看起來像下面（的wicket:id="link"意味着web框架增加了一個href=的鏈接，指定所生成的頁面應顯示在整個瀏覽器窗口）。

<a wicket:id="link" id="linkToSuccessPage" target="_top"></a> <script> $(function() { top.$.colorbox.close(); top.location.href = document.getElementById("linkToSuccessPage").getAttribute("href"); }); </script>

這種方法的麻煩首先是感覺不夠雅緻，但卻產生了奇怪的視覺效果。彩盒首先關閉，然後發生這種重定向。另一個選項是不關閉colorbox，但是當重定向發生時，colorbox的內容被替換爲空白頁面。

有沒有更好的方法？這一定是一個常見問題，必須有一個通用的優雅解決方案？

P.S.我必須使用colorbox的iframe方法（而不是JQuery將表單放在頁面中的<div>中），原因如下：我使用的Web框架（Wicket）將表單提交給相對URL 。 <form>中的相對URL與包含表單的頁面的URL（= colorbox內容）相關。如果使用<div>，則將此表單插入到具有不同URL的周圍頁面中，因此表單提交中的相對URL不起作用。

來源

2012-02-26 Adrian Smith

我認爲你仍然可以在不使用iframe的情況下做到這一點，這將允許你爲你的colorbox窗口使用內聯內容。雖然這個建議可以適用於iframe，但使用內聯內容時它會更清晰。

首先，使用this jQuery ajax form plugin來管理表單提交的流程。這將允許您管理您的成功/錯誤代碼，而無需像前面提到的那樣加載任何額外內容，刷新頁面或重新加載表單。在你docReady，實例化的Ajax表單是這樣的：

$('#login').ajaxForm({ 
    beforeSubmit: onSubmitForm, 
    error: onServerResponse, 
    success: onServerResponse, 
    url: "site.com" 
});

然後你只需做你需要在這些回調3做（所有父頁面的上下文）的東西。由於您在此定義網址，因此無論窗口的操作屬性如何，都無關緊要。事實上，表單的html代碼不會改變，除非現在您可以省略action屬性。

通過使用內嵌式彩盒，在保持其數據狀態（如果有）的情況下切換它們很容易。首先，假設我們給所有的顏色框鏈接的類名「colorboxLink」，我們也需要這樣的docReady：

$(".colorboxLink").colorbox({ 
    inline:true 
});

而且在一個隱藏的div，設置所有colorboxes（其中一個是你的形式）：

<div style="display:none"> 
    <form id="login" method="post"> 
     Username: <input type="text" name="username" /> <br> 
     Password: <input type="password" name="password" /> 
     <input type="submit" value="Go" /> 
    </form> 

    <div id="error"> 
     Error message.<br> 
     <a class="colorboxLink" href="#login">&laquo; Back</a> 
    </div> 
</div>

所以，第一個顏色框窗將有一個鏈接打開，後退/前進/其他窗口可以通過colorboxes（如示「錯誤」內部鏈接來打開DIV），並開功能中的彩盒：

$.colorbox({ 
    open:true, 
    href: "#error", 
    inline:true 
});

因爲colorbox從未完全關閉，所以在更改窗口時也可以避免該閃爍。

查看this jsfiddle的完整示例。

來源

2012-02-28 01:43:48 Donamite

如何「突圍」一個jQuery彩盒

回答

相關問題