JQuery衝突Ajax驗證消息返回位置

我遇到了我的jQuery表單問題。如果你看看我創建表單的這個fiddle，你會注意到，在創建輸入字段後，然後刪除，警報消息開始彈出下一個元素（在他們最初放置的位置下面）。JQuery衝突Ajax驗證消息返回位置

澄清：如果用戶還沒有輸入任何信息，警報會彈出正確的位置（浮動在輸入框右側紅色文本中）。但是，如果用戶輸入了信息，然後將其刪除，那麼ajax警報（「此字段是必需的」）會彈出錯誤的地方，並顯示在下面的字段中。要查看問題，請正確輸入所有字段，然後刪除您的姓名。電子郵件字段中彈出消息「此字段是必需的」，但它屬於名稱字段。

控制的驗證是JS：

$(document).ready(function() { 
    $('#commentForm').validate({ 
     submitHandler: function(form) { 
      $.ajax({ 
       type: 'POST', 
       url: 'process.php', 
       data: $(this).serialize(), 
       success: function(returnedData) { 
        $('#commentForm').append(returnedData); 
       } 
      });   
      return false; 
     }, 
     errorPlacement: function(error, element) { 
       error.insertAfter(element).position({ 
        my:'right top', 
        at:'right top', 
        of:element   
       }); 
     } 
    }); 
});

編輯1：使用jQuery NoConflict模式沒有解決這個問題。這似乎是兩個插件如何協同工作的問題。

編輯2：這個問題實際上有兩種解決方案。一種是將jquery UI腳本包含在頭部，從而使其「位置」實用程序能夠在「右上方」對齊錯誤消息。

另一種解決方案，如通過幾個其他貢獻者指出的，是要修改的CSS設置

form p { 
    position: relative; /* This ensures error label is positioned within the p tag */ 
} 
label.error { 
    top: 0; /* This ensures that it lines up with the top of the input */ 
    right:90px; 
    color: red; 
    position:absolute; 
}

感謝所有的輸入的。

來源

2012-03-09 Nick B

看起來像一個造型問題，我（但同樣，一切都做:)有使用不當的位置是：絕對的，其中，順便說一句，取消了浮動：左 - http://jsfiddle.net/kmJ87/17/

如果你真的堅持position：絕對（在完整的css中有更多的樣式，就像一個漂亮的box信息可能？），你可以通過添加position來修復它：相對於父元素（在這種情況下爲段落） - http://jsfiddle.net/kmJ87/18/

來源

2012-03-15 01:39:59

只是爲了澄清插件之間沒有衝突http://jsfiddle.net/AstDerek/ kmJ87/19/ – 2012-03-15 09:17:21

許多JavaScript庫使用$作爲函數或變量名稱，就像jQuery一樣。在jQuery的情況下，$是jQuery的別名，所以所有功能都可以在不使用$的情況下使用。如果我們需要在jQuery中使用另一個JavaScript庫，我們可以通過調用jQuery.noConflict（）;將$ back控件返回給另一個庫。

看到這裏的例子：

jQuery.noConflict(); 
(function($) 
    { 
    // your code goes here 
}) 
(jQuery);

用它嘗試

來源

2012-03-09 18:57:44

你能編輯的jsfiddle來說明如何將在這種情況下使用noconflict？ – 2012-03-10 00:38:33

noConflict不是解決這個問題的方法，因爲它似乎是由兩個jQuery插件的交互產生的。爲$賦予不同的值並不能解決這個問題。謝謝。任何其他想法都非常歡迎 – 2012-03-11 22:20:03

我們可以聲明的document.ready法兩種方法

$（文件）。就緒（函數（）{

//我們的代碼來這裏

}）; 這裏$是全球變量並引用jQuery對象。
jQuery的（文件）。就緒（函數（$）{

//我們的代碼來這裏

}）; //這裏$是本地變量，並且指jQuery對象。

檢查此鏈接的第五點：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

來源

2012-03-13 11:07:04

感謝您的意見。你能告訴我如何編輯jsfiddle來解決這個問題嗎？因爲我實際上並沒有使用$（document）.ready（function（）{在該版本中。 – 2012-03-14 01:35:27

@NickB：這不是jQuery的問題，這是CSS的問題，你有自定義的css類label.error。評論這個類，你可以找到每一件事情工作正常（錯誤文本顏色可能是黑色的，但錯誤顯示在正確的地方） – 2012-03-14 06:54:12

jcps javascript不應該對頁面有任何影響，因爲它只定義了一個對象，並且實際上並未在任何地方使用（尚）。當我擺弄代碼時，即使jcps javascript被註釋掉，我也遇到了問題。

似乎瀏覽器在段落內的標籤佈局有問題，通過將段落更改爲相對位置的div，並將top 0px添加到錯誤樣式，使事情變得更加穩定。我注意到驗證器仍然存在一些間歇性問題，可能是由一些小錯誤引起的。

這是我結束了與現在的版本：http://jsfiddle.net/kmJ87/20/

來源

2012-03-16 23:02:32 Trax72

問題在於部分在CSS聲明：

/* Begin first declaration for <label class="error" /> */ 
label.error { 
    color: red; 
    position:absolute; 
} 
/* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/ 
label.error { 
    float: left; /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */ 
    right: 30px; /* Useless declaration (for now) as "right" is used wih "position" not "float". */ 
    color: #ff714d; 
    position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */ 
    font-family: 'subhead', helvetica, verdana; 
    letter-spacing: 1px; 
    text-transform: lowercase; 
}

由於position: absolute;是最後的聲明（在位置V浮動聲明），元素絕對定位。

問題的第一部分是，由於top資產並沒有宣佈和標籤的display是block，瀏覽器持倉前的下一行（這是頂部將是一個靜態的流）。

問題的第二部分是，自從聲明瞭float以來，瀏覽器仍然嘗試使用該元素（它也會在瀏覽器將頂部放在下一行的位置）。

解決方案（迄今爲止）是在label.error樣式中刪除float聲明並聲明top的0。

label.error { 
    color: red; 
    position:absolute; 
} 

label.error { 
    top: 0;  /* Replaces "float: left;" and fixes the display. */ 
    right:30px; 
    color: #ff714d; 
    position: absolute; 
    font-family: 'subhead', helvetica, verdana; 
    letter-spacing: 1px; 
    text-transform: lowercase; 
}

或單一聲明：

label.error { 
    color: red; 
    position: absolute; 
    right: 30px; 
    top: 0; 
    color: #ff714d; 
    position: absolute; 
    font-family: 'subhead', helvetica, verdana; 
    letter-spacing: 1px; 
    text-transform: lowercase; 
}

更新代碼此提出的最後一個問題，這是所有錯誤消息現在出現在文檔的最頂端。

這是由position: absolute;聲明引起的，因爲絕對定位的元素將從常規文檔流中移除並且（絕對地）定位到最接近非靜態定位的anscestor元素。

在這種情況下，沒有這樣的<label class="error" />元素絕對定位到<body />。因此，解決方案的最後一部分就是使得元素非靜態定位（因爲這是錯誤應該絕對定位的地方）。

最後CSS：

p { 
    position: relative; 
} 

label.error { 
    color: red; 
    position: absolute; 
    right: 30px; 
    top: 0; 
    color: #ff714d; 
    position: absolute; 
    font-family: 'subhead', helvetica, verdana; 
    letter-spacing: 1px; 
    text-transform: lowercase; 
}

Updated (and working) fiddle.

來源

2012-03-17 00:15:33 pete

是的謝謝。CSS是這個問題的一個解決方案通過添加表單p {position：relative;}和label.error {top：0;} – 2012-03-18 21:15:59

給你帶來了賞金，但另一個人因爲他是第一個指出這是一個css問題，我實際上已經想出了自己的想法，但是我很欣賞你提供的細節。 – 2012-03-18 21:18:28

JQuery衝突Ajax驗證消息返回位置

回答

相關問題