1

これは、jQuery Ajax ウィザードの 1 つです。jQuery 1.7.2を使用していますが、1.5.1も試しました...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

メイン ページは、外部 (同じドメイン) JS ファイルを読み込みます。クリック イベントからのコールバックでは、ログイン フォームを投稿してログインするための AJAX 呼び出しを行います。認証呼び出しから返されたパラメーター (JSON) に基づいて、コンテンツとナビゲーション バーをメイン ドキュメントに .load します。

    $("#loginForm_submit").click(function() {
    var action = $("#loginForm").attr('action');
    var form_data = {
        sbgusername: $("#sbgusername").val(),
        sbpassword: $("#sbpassword").val()
    };              

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(loginData){
            if(loginData.success == true){ 
                // this will be moved into a loop to laod multiple apps into one page. For testing
                // all arrays only have value
                var webapps = loginData.webapps; //array
                var webappservers = loginData.webappservers; //array 
                var webappscripts = loginData.webappscripts; //array
                var webAppContent = webappservers[0] + '  #' + webapps[0] + 'Content'; 
                // webAppContent = 'api/wpapp.cfm #wpContent';
                var webAppNav = webappservers[0] + '  #' + webapps[0] + 'Nav';
                // webAppNav = 'api/wpapp.cfm #wpNav';
                var scriptURL = webappscripts[0];
                // scriptURL = 'api/wpBase.js';
                var scriptLoad = webapps[0] + 'Load'; 
                // scriptLoad = 'wpLoad';
                $("#sbcore").load(webAppContent); //sbcore is div in main document
                $("#nav").load(webAppNav); //nav is div in main document
                $.ajaxSetup({ cache: false },{async:false});
                $.getScript(scriptURL, function(data, textStatus, jqxhr) {
                   window[scriptLoad](); //because getScript loads methods into global context from what I can tell
                });
                $.ajaxSetup({ cache: false },{async:true});
            }
            else
            {   alert(loginData.message);
                }
        },
        error: function(errorData){
            alert("Server couldn't be reached. Please Try again.");
        }

    });
    return false;               

});

ロードされたナビゲーションバーは次のようになります。

<div id="menu">
<ul>
    <li id="nw-menu-dashboard" class="first"><a href="#" accesskey="1" title="">Home</a></li>
    <li ><a id="nw-menu-privatearticles" href="#" accesskey="2" title="">Articles</a></li>
</ul>

scriptLoad によって scriptURL として読み込まれる JS は次のとおりです (同じドメインから読み込まれることに注意してください)。

    function nwLoad() {
    //alert("nwBase.js ran");
    nwLoadMenu();
}
function nwLoadMenu() {
      //alert("here");
      $("#nw-menu-dashboard").on("click",function() { 
          //e.preventDefault();
          alert("doDashboard");
      });   
      $("#nw-menu-privatearticles").on("click",function() { 
          //e.preventDefault();
          alert("doPrivateArticles");
      });
}

したがって、これは奇妙なことです。すぐ上の//alert("nwBase.js ran"); または のコメント//alert("here");を外すと、メニューが div にバインドされ、メニュー クリック アラートが必要に応じて機能します。ただし、上記のように、バインディングの前にアラートがないと機能しません。.click、.live、を使用してバインディングを試みました。

同期、待機などのロードを試みましたが、機能しません。何か案は？

4

2 に答える 2

0

関数のコメントを外した後、alertすべてが必要なようになるのは有線ではありません。
OK ボタンを押さなかった時点で、メニューが読み込まれ、CLICK 関数が正しくバインドされているためです。応答が来たら関数を
呼び出します- コールバック関数または defered オブジェクトを使用してください!nwLoadMenu

于 2012-08-03T10:27:25.920 に答える
0

（の代わりに）コールバックを介して待機ビットを再試行することをお勧めしますsetTimeout。

于 2012-08-03T17:50:36.277 に答える