7

JQuery UI Tabs ウィジェットで構成される Web ページがあります。タブ ウィジェットは、AJAX 経由でタブを読み込みます。タブページの 1 つ (名前はDescriptionPage ) に、ajaxForm プラグインを介して送信されるフォームがあります。

<div id="tabs">
    <ul>
        <li>
           <a href="DescriptionPage">Description Page</a>
        </li>
    </ul>
</div>

これは私のDescriptionPageの内容です。

<form id="myForm">
  <!-- Form elements goes here -->
</form>

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').parent().empty().append(response);
    });
  });
</script>

フォームが送信されると、フォームとスクリプトの両方で同じDescriptionPageが返されます。そのため、フォームの内容はサーバー側の応答に置き換えられます。応答には検証メッセージも含まれます。

問題は、シナリオ全体が Chrome と Firefox でうまく機能することです。しかし Internet Explorer 8 では、奇妙な問題が発生します。

タブが最初に読み込まれると、javascript が正常に実行されます。ユーザーがフォームを送信して応答が送信されると、IE は「JQuery が定義されていません」と言って JavaScript の実行に失敗します。

ajax経由でロードされたコンテンツ内でIEがJQueryの呼び出しに失敗するのはなぜですか? 回避策はありますか?

PS:スクリプトをhtmlから分離することを考えましたが、それはまったくオプションではありません:(

P.S2: 私の javascript と CSS ファイルは、愚かな IE のためにめちゃくちゃになりました。

4

5 に答える 5

1

これは Internet Explorer 6 で動作するようです:

index.html:

<html><head></head><body>

<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.form.js"></script>
<script>
    jQuery('#container').load('DescriptionPage.html');
</script>

</body></html>

DescriptionPage.html:

<form id="myForm">
    <input type="submit" />
</form>

<script>
    $(function() {
        $('#myForm').ajaxForm(function(response) {
            $('#myForm').parent().empty().append(response);
        });
    });
</script>
于 2011-03-19T03:21:10.843 に答える
1

参照してください: jQuery 1.6.1、IE9、および SCRIPT5009: '$' は未定義です

ユーザー ID "Black" は、私にとって正しい方向性を提供してくれました。

ダイアログで .AjaxForm を使用してアップロードしていました。その後、その Form を別の AjaxForm に置き換えます。次に、「$ is undefined」または「jQuery is undefined」というバグがありました。主な理由は、2 番目のダイアログに「render :layout => false」を適用したことです。そのため、すべての js ライブラリ ( jQuery を含む) が正しく読み込まれていません。

そのため、2 番目のダイアログの一部について、追加する必要があります。

于 2012-06-18T08:24:23.540 に答える
0

次のようなことを試して、問題が解決するかどうかを確認してください。

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').empty().append($(response).children('form').html());
    });
  });
</script>

これがすべきことは、既存のフォームの内容を、応答で返された要素の内容に置き換えることです。フォーム要素全体を置き換えて JS を再度実行する代わりに。問題を回避できる場合があります。

于 2011-03-24T21:43:08.947 に答える