Juery-UI modal dialog и неясности

[alia]

Здравствуйте.
Ситуация такая:
вызываю модальный диалог в который грузится другая страничка(форма)
в общем файле скриптов написана функция(универсально для диалогов)

function showUrlInDialog(url, title){
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog({modal: true,width: 'auto', title: title }).dialog('open');
    }
  });
}

Со странички вызывается как

<a onclick="showUrlInDialog('/user/register/', 'Регистрация'); return false;" href=#>

Скажите пожалуйста как мне в случае ошибки в форме- вернуть ошибки ajax'ом в этот же диалог без его закрытия. Если форма забита правильно- она закрывается. Но если есть ошибка- форма открывается во весь экран.
Незнаю, правильно ли объяснила..
Подскажите как ошибки отображать в этом же окне диалога.

Спасибо.

[DjDiablo]

Всё что я пока вижу из кода, это то что при нажатии кнопки регистрации, у вас появится форма в модальном окне. Об остальном ваш код не говорит нечего. говоря словами Линукса Торвальдса - Слова ничто, покажите мне код )))

Короче суть задачи в полной мере не ясна. Толи у вас уже есть отправка формы по ajax толи нет, толи вы уже принимаете данные о результатах валидации, то ли только хотите принимать. Вы хотите/ уже принимаете коды ошибок (в формате json к примеру), или в случае ошибки принимаете готовый хтмл код который заменит содержимое диалога. Как называется плагин с диалогом которым вы пользуетесь и т.д.

что касается доступа к содержимому контейнера модального окна.
В большинстве плагинов переменная tag. не будет указывать на содержимое открытого окна.
Если отсутствуют штатные средства по управлению содержимого диалога, а плагин модифицировать не хочется или не можется . То как вариант попробуй создать именованный контейнер внутри окна, чтобы затем к нему обращаться.

function showUrlInDialog(url, title){
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html("<div id='myWin'>"+data+"</div>").dialog({modal: true,width: 'auto', title: title }).dialog('open');
    }
  });
}
.................
// теперь где то там далеко меняем содержимое диалогового окна.
$("#myWin").html ("Кажется ваш коврик прохудился ");

[alia]

Я извиняюсь если чтото неточно написала.
Плагин- Модальный диалог Jquery-UI. Да, по нажатию кнопки всплывает окно, куда грузится форма. Отправка формы не аяксом, простой submit.
Если форма правильно заполнена- идет отправка и окно закрывается, все хорошо.
Но если в форме ошибки, то эта форма открывается с ошибками на весь экран, а хочется в случае ошибки показывать в этом же всплывшем окне.
То есть в случае ошибки надо принимать html который заменит содержимое модального диалога.
Объяснила как смогла...

[DjDiablo]

Ну я как смог понять так и отвечаю )))
Форму придётся передовать используя асинхронный запрос методом get
По задумке должно проканать для любой cms

//создадим диалог до открытия (необязательно)
//просто создание диалога только ради открытия, это ни совсем верная практика
var tag = $("<div></div>");
tag.dialog({modal: true,width: 'auto', title: title })

// ваш метод
function showUrlInDialog(url, title){

  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog('open');
      tag.find("mySubmit").click(function(){
          sendForm(tag,"#myForm","test.php");
          return false; 
      })   

    }
  });
}

//sendForm сериализует форму и отправляет её асинхронным запросом
// негативный результат отображает в окне, а в случае удачи окно закрывает

function sendForm(win,form,url){
      //get или post вам нужен я не знаю, я пример для get написал
      // метод по get запросу передаёт сериализованную форму и ждёт ответа
      $.get(url+"?"+$(form).serialize(),function(data){

           // давайте условимся если есть ошибки то сервер вернёт нам   следующий код 
           // <div class="errorLog"> тут наши ошибки </div> 
           // причём этот код может находится внутри 
           // другого кода, скрипту должно бытль паралельно
           // Конечно вы необязаны применять $(data), если вы можете вернуть страницу только с ошибками без стороннего кода,  
           // то возвращайте только её, и работайте с data напрямую

            // достанем содержимое элемента с классом .errorLog из data
            var errLog=$(data).find(".errorLog").html();  

            // если в errLog есть что-то, это значит есть ошибки
            if (errLog.length>0){
                //установим текст в диалог 
                //tag-указывающий на диалоговое окно должен быть доступен    
                // в вашем примере tag это локальная переменная и вне функции showUrlInDialog  она будет недоступна.   
                win.html (errLog);
           }         
            // если всё отлично и errorlog пустой тогда закрываем окно
           else {  
               win.dialog('close');
           }            
      })       
}

За отсутствие ошибок в коде не ручаюсь, основная задача была донести идею.
Ещё есть плагин ajaxForm , думаю его тоже можно приспособить.

[alia]

Спасибо большое. Вы правильно направление подсказали.
Вот такой у меня окончательный вариант получился(c учетом что теперь ответ приходит в JSON):

function showUrlInDialog(url, title){
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog({modal: true,
        buttons     : {
            Ok: function() {
		$.post(url, $("#f").serialize(),function(datar) {
		    $("#f").find('.error').remove();
		    if (datar.success == true) { tag.html(data).dialog('close'); } 
		    else { display_form_errors(datar['data'], $('#f'));}
	    });
            },
            Cancel: function() {
                tag.html(data).dialog('close');
                return false;
            }
        },      
      width: 'auto', title: title }).dialog('open');
    }
  });
}

function display_form_errors(errors, $form) {
    for (var k in errors) {
        $form.find('input[name=' + k + ']').after('<div class="error">' + errors[k] + '</div>');
    }
}

Вот только последнее непонятное осталось- почему когда форму так вызываешь один раз и закрываешь- если вызвать еще раз - уже прилетающие в JSON ошибки не отображаются.

[DjDiablo]

Красиво получается )))
могу только дополнить.
1) я сильно против практики, когда диалог создаётся каждый раз для отображения и по выполнении своей миссии не уничтожается. Это во мне си плюс плюшник бунтует наверное если уж вы создаёте диалог то будте любезны не просто закрыть его, а унечтожить через destroy.

2) мне кажется в обработчике cancel, html(data) лишний.

[alia]

C destroy пробовала. Любопытно что открыв форму в диалоге и закрыв ее и открыв еще раз- при нажатии на Ок(послать)- в консоли видно что никакие данные из формы не отправляются кроме crsf-токена и captcha. Форма постится, но данный не передаются. При первом открытии все красиво.
Пришлось дописать после уничтожения диалога window.location.reload(), тогда повторное открытие(для пользователя) выглядит правильно. В форме jquery не подгружается, проблема непонятной остается почему повторный вызов не работает как надо.

html(data) с обработчика убрала, да работает и без него нормально.

[DjDiablo]

в порядке эксперемента
вместо доступа к форме по $("#f")
попробуйте tag.find(#f)

Просто такое ощущение, что у тебя несколько обьектов с идентификатором #f в dom появляется.

Это предположение конечно только. К сожалению сейчас смотреть исходники виджета, времени особо нет.
Чтобы проверить это предположение по простому.
в html к элементу c id #f добавте ещё класс test,
а при закрытии или открытии окна считайте сколько элементов с классом test у вас в дум. Если при открытии окна количество увеличивается, тогда считайте что проблему обнаружили. Ещё отладчиком в браузере думаю можно тупо посмотреть что с html происходит )))

[alia]

Вы абсолютно правы. При уничтожении диалога #f не убирается с DOM.
Вот исправленный вариант:

function showUrlInDialog(url, title){
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog({modal: true,
        buttons     : {
            Ok: function() {
		$.post(url, $("#f").serialize(),function(datar) {
		$("#f").find('.error').remove();
		if (datar.success == true) {
		    tag.dialog('destroy');
            	    $("#f").remove();
		    window.location.reload(); }
		else { display_form_errors(datar['data'], $('#f'));}
	    });
            },
            Cancel: function() {
                tag.dialog('destroy');
                $("#f").remove();
                return false;
            }
        },      
      width: 'auto', title: title }).dialog('open');
    }
  });
}

function display_form_errors(errors, $form) {
    for (var k in errors) {
        $form.find('input[name=' + k + ']').after('<div class="error">' + errors[k] + '</div>');
    }
}

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