Изменение размера Colorbox при проверке формы (проверка JQuery) - PullRequest
Новая
       12

Изменение размера Colorbox при проверке формы (проверка JQuery)

1 голос
/ 16 января 2012

Ладно, так вот в чем дело:

Я вызываю форму в Colorbox через AJAX и настроил обратный вызов для обработки ее проверки, которая отлично работает.Единственная проблема заключается в том, что, когда я пытаюсь изменить размер поля, когда поля недопустимы (который генерирует метку с классом ошибки), он работает только со второй попытки.

Я вызываю метод resize для события click, и это работает только при втором щелчке.

Я подозреваю, что это потому, что он пытается изменить размер до создания меток ... Я не знаю, как обойти эту проблему.Любая помощь будет оценена. 

$(".colorbox").click(function(e) {
    e.preventDefault();

    var el = $(this),
        sdHref = (el.attr("data-sd-href") ? el.attr("data-sd-href") : el.attr("href")),
        sdTitle = (el.attr("data-sd-title") ? el.attr("data-sd-title") : el.attr("title")),
        sdIframe = (el.attr("data-sd-iframe") ? true : false),
        sdWidth = (el.attr("data-sd-width") ? el.attr("data-sd-width") : false),
        sdHeight = (el.attr("data-sd-height") ? el.attr("data-sd-height") : false);

    $.colorbox({
        href: sdHref,
        title: sdTitle,
        iframe: sdIframe,
        width: sdWidth,
        height: sdHeight,
        scrolling: false,
        onComplete: function() { // I validate the form once the content is loaded
            $("form").validate({
                rules: {
                    phone: {
                        minlength: 10,
                        maxlength:10,
                        digits: true                    
                    }
                }
            });         
        }
    });
});

$('body').click(function(event) { // Even bubbling works on clicking the button, but only on the second try...
   if ($(event.target).is('button[type=submit]')) {
     $.colorbox.resize();
   }
});

Ответы [ 2 ]

5 голосов
/ 13 июня 2013

мое решение: 

 $('#form_nuevo_almacen').validate({           
    rules: {
        nombre: {
            required: true,
        },
        clave: {
            required: true,
        }

    },
    messages: {
        nombre: {
            required: "Almacen requerido",
        },
        clave:{
            required:'Clave requerida',
        }
    },
     showErrors: function(errorMap, errorList) {
        this.defaultShowErrors();
        $.colorbox.resize();
    },
    submitHandler: function(form){
        form.submit();
        $.colorbox.close();
    }
});
1 голос
/ 16 января 2012

Я нашел решение: 

$(".colorbox").click(function(e) {
    e.preventDefault();
    var el = $(this),
        sdHref = (el.attr("data-sd-href") ? el.attr("data-sd-href") : el.attr("href")),
        sdTitle = (el.attr("data-sd-title") ? el.attr("data-sd-title") : el.attr("title")),
        sdIframe = (el.attr("data-sd-iframe") ? true : false),
        sdWidth = (el.attr("data-sd-width") ? el.attr("data-sd-width") : false),
        sdHeight = (el.attr("data-sd-height") ? el.attr("data-sd-height") : false);

    $.colorbox({
        href: sdHref,
        title: sdTitle,
        iframe: sdIframe,
        width: sdWidth,
        height: sdHeight,
        scrolling: false,
        onComplete: function() { // I validate the form once the content is loaded
            $("form").validate({
                rules: {
                    phone: {
                        minlength: 10,
                        maxlength:10,
                        digits: true                    
                    }
                },
                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        window.setTimeout('$.colorbox.resize()',10);
                    }
                }
            });         
        }
    });
});
...