jQuery: обработка смешанного ответа html/js ajax

Question

Возникли проблемы с доступом к коду JavaScript в смешанном ответе html / js ajax. JQuery AJAX Doc заявляет:

Если указан html, любой встроенный JavaScript внутри извлеченных данных выполняется до того, как HTML возвращается в виде строки.

Что я могу подтвердить, добавив простой фрагмент в ответ HTML:

<script type="text/javascript"> alert($(this)); </script>

Как тогда сохранить доступ к js-коду против одноразового выполнения?? Попытка реализовать модальный вход в систему (чтобы предотвратить потерю данных при тайм-ауте сеанса в экранах отправки формы). Конечно, мне нужно иметь доступ к js-коду ajax'd, чтобы затем проверять поля электронной почты / пароля и ajax аутентифицировать учетные данные пользователя на удаленном сервере.

Вот модальный логин coffeescript:

# submit form
$.ajax
  success: (data) -> ...
  error: (data) ->
    popAuth(data.responseText) if(data.status == 401)

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    title: title
  })

Возможно, я смогу добавить успешный обратный вызов в опции aAax popAuth() для хранения возвращенного js-кода? Как насчет jQuery "живого" обработчика? К сожалению, этот сценарий не так прост, как можно было бы надеяться;-) Я видел $.getScript как вариант, но предпочел бы не отделять html от js, так как на стороне сервера уже собираются html + js, а исходный вызов ajax все это обрабатывает за один раз. (т.е. не создавайте выделенный серверный контроллер для отправки пакета содержимого файла js)

Я, конечно, открыт для альтернативных решений, чтобы обойти эту проблему. Например, я мог бы хранить поля входа в систему и код проверки входа в систему js на каждом экране (приложение CRV JVM, находящееся за внешним интерфейсом WordPress, поэтому каждый экран в основном требуется для аутентификации) в скрытом div, а затем открывать модальное окно входа в систему "локально", которое Я предполагаю, что обойдется надоедливое одноразовое выполнение js удаленного контента ajax.

Во всяком случае, идеи ценятся! клиентская сторона удивительно проста и... ужасно сложна;-)

Answer 1

Хорошо, отгоняя истинный поток ответов, я сам нанесу удар.

Насколько я понимаю, поскольку смешанное html/js-содержимое выполняется по одному, у нас есть один шанс перехватить js-код ответа ajax и связать его с текущей областью действия.

Во-первых, в исходном вызове ajax (то есть, при отправке формы, которая возвращает потенциальный 401 не авторизованный статус) установите контекст настройки ajax модального входа в систему в виде $(this), текущей выполняемой области действия, которая содержит проверку jquery и другой общий js-код, необходимый для модальный логин ajax представь на работу.

В моем случае, используя fancybox, добавив контекстный параметр, он теперь выглядит так:

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    context: $(@)
    title: title
  })

Затем, поскольку родительское окно содержит большую часть необходимого javascript, единственным требованием является создание файла js, который связывает событие нажатия кнопки модальной формы входа в систему с проверкой и отправкой $.ajax.

# login.coffee
jQuery ->
  $('#loginSubmit').click (e) ->
    e.preventDefault()
    isValid = $('#loginForm').validate().form()
    if isValid
      $('#spinner').show()
      $.ajax
        data: $('#loginForm').serialize()
        success: (data) ->
          $('#status').fadeOut()
          location.href = '/foo'
        error: (data) ->
          $('#status > div').html( data.responseText )
          $('#status').fadeIn()
        complete: () ->
          $('#spinner').hide()

Готово, все хорошо, работает;-)