1

混合html/jsajax応答でjavascriptコードにアクセスするのに問題があります。jQueryajaxdocは次のように述べています。

htmlが指定されている場合、HTMLが文字列として返される前に、取得されたデータ内に埋め込まれたJavaScriptが実行されます。

これは、HTMLの返信に簡単なスニペットを追加することで確認できます。

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

それでは、jsコードへのアクセスと1回限りの実行を維持するにはどうすればよいですか？モーダルログインを実装しようとしています（フォーム送信画面でのセッションタイムアウト時のデータ損失を防ぐため）。もちろん、ajaxのjsコードにアクセスして、電子メール/パスワードフィールドを検証し、ajaxがリモートサーバー上のユーザー資格情報を認証できるようにする必要があります。

モーダルログインのコーヒースクリプトスニペットは次のとおりです。

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

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

おそらく、成功したコールバックをpopAuth（）ajaxオプションに追加して、返されたjsコードを保存できますか？jQueryの「ライブ」ハンドラーはどうですか？残念ながら、このシナリオは期待するほど単純ではありません;-)私は$.getScriptオプションとして見ましたが、サーバー側がすでにhtml + jsをアセンブルし、元のajax呼び出しがそれをすべてプルダウンするため、htmlをjsから分離しないことを好みます一度に。（つまり、jsファイルコンテンツバンドルを送り返すための専用サーバー側コントローラーの作成は避けてください）

もちろん、この問題を回避するための代替ソリューションを受け入れています。たとえば、ログインフィールドとjsログイン検証コードをすべての画面（WordPressフロントエンドの背後にあるJVM CRUDアプリケーションであるため、すべての画面は基本的に認証が必要です）に非表示のdivに保存し、モーダルログインウィンドウを「ローカル」にポップできます。私は、リモートajaxコンテンツの面倒な1回限りのjs実行を回避すると思います。

とにかく、アイデアはありがたいです！クライアントサイドは素晴らしくシンプルで...ひどく複雑です;-)

4

1 に答える 1

0

さて、応答の真の大洪水をかわして、私は自分で刺します。

私が今理解しているように、混合html / jsコンテンツは1回限りで実行されるため、ajax応答jsコードをキャプチャして現在のスコープにバインドする機会が1回あります。

まず、元のajax呼び出し（つまり、潜在的な401の未承認ステータスを返すフォーム送信）で、モーダルログインのajaxセットアップのコンテキストを$（this）に設定します。これは、jquery検証とその他の共有jsコードを含む現在実行中のスコープです。モーダルログインajaxは動作するように送信します。

私の場合、fancyboxを使用して、コンテキストパラメータを追加すると次のようになります。

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

次に、親ウィンドウには必要なjavascriptの大部分が含まれているため、唯一の要件は、モーダルログインフォームのボタンクリックイベントを検証と$.ajax送信にバインドするjsファイルを作成することです。

# 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()

完了、すべて良好、動作;-)

于 2012-06-12T12:09:43.233 に答える