Сообщения проверки JJuery Conflict Ajax Место возврата - PullRequest
Новая
       21

Сообщения проверки JJuery Conflict Ajax Место возврата

4 голосов
/ 09 марта 2012

У меня проблема с формой jquery.Если вы посмотрите на это fiddle , где я создаю свою форму, вы заметите, что после того, как поле ввода создано, а затем удалено, предупреждающие сообщения начинают появляться на следующем элементе (ниже того места, где они изначально размещены).

Для пояснения: если пользователь еще не ввел какую-либо информацию, оповещения всплывают в правильном положении (всплывают справа от поля ввода красным цветом).Однако, если пользователь ввел информацию, а затем удаляет ее, предупреждение 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 в заголовок, тем самым позволяя его утилите 'position' выравнивать сообщения об ошибках в правой верхней части.

Другое решение, как отметили некоторые другие авторы, заключается в изменении 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;
}

Спасибо за все введенные данные.

Ответы [ 5 ]

3 голосов
/ 17 марта 2012

Проблема частично заключается в объявлениях 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, браузер все еще пытается float элемент (что снова приводит к тому, что браузер позиционируетсверху вниз на следующую строку).

Решение (пока) состоит в том, чтобы удалить объявление float и объявить top из 0 в стилях label.error. 

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; как элементы с абсолютным позиционированием удаляются из обычного потока документов и позиционируются (абсолютно) к ближайшему нестатически позиционированному элементу-ответчику.

В этом случае их нет, поэтому <label class="error" /> элементы абсолютно расположены на <body />.Таким образом, последняя часть решения состоит в том, чтобы сделать элементы p нестатически расположенными (поскольку именно в этом случае ошибки должны быть абсолютно точно размещены).

Окончательный 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;
}

Обновленная (и работающая) скрипка.

3 голосов
/ 15 марта 2012

Похоже, проблема стилей для меня (но, опять же, все делает :) с неправильно использованной позицией: absolute, которая, между прочим, отменяет float: left - http://jsfiddle.net/kmJ87/17/

Если вы действительно привязаны к позиции: абсолютная (больше стиля в полном CSS, например, может быть, красивое окно сообщения?), Вы можете исправить это, добавив позицию: относительно родительского элемента (в данном случае параграфа) - http://jsfiddle.net/kmJ87/18/

2 голосов
/ 17 марта 2012

Javascript jcps не должен иметь никакого влияния на страницу, так как он определяет только объект и фактически нигде не используется (пока).Когда я возился с кодом, у меня также возникали проблемы, даже если jcps javascript был закомментирован.

Казалось, что у браузера возникли проблемы с размещением метки в абзаце, изменив абзацы наdiv с положением относительно и добавление top 0px к стилю ошибок стало более стабильным.Я заметил, что у валидатора все еще есть некоторые периодически возникающие проблемы, возможно, вызванные некоторыми незначительными ошибками.

Это версия, с которой я закончил на данный момент: http://jsfiddle.net/kmJ87/20/

1 голос
/ 13 марта 2012

Мы можем объявить document.ready метод двумя способами

  1. $ (документ) .ready (function () {

    // наш код приходит сюда

    });Здесь $ является глобальной переменной и ссылается на объект jQuery.

  2. jQuery (документ) .ready (функция ( $ * 1022)*) {

    // Наш код приходит сюда

    });// Здесь $ - локальная переменная и ссылается на jQuery объект.

Проверьте 5-ую точку этой ссылки: http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

0 голосов
/ 09 марта 2012

Многие библиотеки JavaScript используют $ как имя функции или переменной, так же как и jQuery.В случае jQuery $ - это псевдоним для jQuery, поэтому все функции доступны без использования $.Если нам нужно использовать другую библиотеку JavaScript наряду с jQuery, мы можем вернуть управление $ back другой библиотеке с помощью вызова jQuery.noConflict ();

, см. Пример здесь: 

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

попробуй с этим

...