Dojoライトボックスの問題

Question

私はフォームとデータで使用するDojoでカスタムの基本ライトボックスを作った。画像などを扱っているわけではありません。

私が直面しているような問題はこれです。 DojoがAJAXを介してajaxtb.phpに特定のコードなどを使用してコールすると、 ？f = loginまたは？f =ページがロードされていることを登録します。ライトボックスを閉じて別の言い方を試してみると、ライトボックスにはそれ以前の状態が表示されますか？f =ログインするか、これまでのところ、？f = stuffが読み込まれるまで表示されます。

ライトボックスのコードもありますが、現時点ではかなり冗長で非常に基本的なので、最適化する方法を教えてください。

dojo.ready(function(){ 

    #loads logout confirmation  
    dojo.query("#jsLogoutPromp").connect("onclick", function(){ 

           dojo.byId("qpbox-title-text").innerHTML = "Logout Confirmation"; 

           dojo.query("#qpbox-content").style("display", "block"); 
           dojo.query("#qpbox-overlay").style("display", "block"); 

           dojo.xhrGet({ 
           url: "ajaxtb.php?f=logout", 

           load: function(newContent) { 
           dojo.byId("utm").innerHTML = newContent; 
           }, 
           // The error handler 
           error: function() { 
           // Do nothing -- keep old content there 
           } 
           }); 

    }); 

    #loads options to upload profile photo 
    dojo.query("#jsUserPhotoPromp").connect("onclick", function(){ 

           dojo.byId("qpbox-title-text").innerHTML = "Upload Photo"; 

           dojo.query("#qpbox-content").style("display", "block"); 
           dojo.query("#qpbox-overlay").style("display", "block"); 

           dojo.xhrGet({ 
           url: "ajaxtb.php?f=display_pic", 

           load: function(newContent) { 
           dojo.byId("utm").innerHTML = newContent; 
           }, 
           // The error handler 
           error: function() { 
           // Do nothing -- keep old content there 
           } 
           }); 

    });  

    #closes everything when clicked well technically hides everything   
    dojo.query("#qpbox-close").connect("onclick", function(){ 


           dojo.query("#qpbox-content").style("display", "none"); 
           dojo.query("#qpbox-overlay").style("display", "none"); 


    }); 

    #shows up for logout only, same as above code, but does not work since the original id is included in ajax.php?f=logout 
    dojo.query("#qpbox-stay").connect("onclick", function(){ 


           dojo.query("#qpbox-content").style("display", "none"); 
           dojo.query("#qpbox-overlay").style("display", "none"); 


    }); 

}); 

すべてをクローズする機能は、qpbox-closeおよびqpbox-stayです。技術的には、両方ともライトボックスを隠すことができません。もう一つの問題はqpbox-stayです。 qpbox-stay idはajax.php？f = logoutにあり、クリックするとライトボックスが閉じないので、問題は何か分からない。ここ

は、あなたはすべてのコンテンツを削除するには、ライトボックスを表示する前にdojo.empty(dojo.byId('utm'))を使用することができますajax.php

if($_GET['f'] == 'logout') { 

echo ' 
<p>Are you sure you want to exit right now?</p> 
<br> 
<button type="submit">Logout</button> <a href="#meminipost" id="qpbox-stay" onClick="return false;" style="float: right;">No, I wana Stay</a> 
'; 

} 

おかげ

Answer 1

ためのコードです。

また、コードをかなりリファクタリングすることもできます。両方のクリックハンドラは基本的に同じことを行います。だから関数でそれらをリファクタリングしないのはなぜですか？

dojo.ready(function() { 
    function showLightBox(title, url) { 
    var utm = dojo.byId('utm'); 

    dojo.empty(utm); 

    dojo.byId("qpbox-title-text").innerHTML = title; 
    dojo.style(dojo.byId("qpbox-content"), "display", "block"); 
    dojo.style(dojo.byId("qpbox-overlay"), "display", "block"); 

    dojo.xhrGet({ 
     url: url, 
     load: function(newContent) { 
     utm.innerHTML = newContent; 
     }, 
     // The error handler 
     error: function() { 
     // Do nothing -- keep old content there 
     } 
    }); 
    } 

    function hideLightBox() { 
    dojo.style(dojo.byId("qpbox-content"), "display", "none"); 
    dojo.style(dojo.byId("qpbox-overlay"), "display", "none"); 
    } 

    dojo.connect(dojo.byId('jsLogoutPromp'), 'onclick', function() { 
    showLightBox("Logout Confirmation", "ajaxtb.php?f=logout"); 
    }); 

    // ... 

    dojo.connect(dojo.byId('qpbox-close'), 'onclick', hideLightBox); 

}); 

あなたは試してみて、あなたがコンテンツをロードした、または道場1.6を使用して、あなたのようなNodeList.delegateを使用できるかどう後#qpbox-stayに接続することができます。

dojo.require('dojox.NodeList.delegate'); 
dojo.query('#utm').delegate('#qpbox-stay', 'onclick', hideLightBox); 

ある#utmに接続すること既にロードされていますが、#qpbox-stayの場合のみ動作します。 jquery.live()に似た、イベントのバブリングで動作します。 http://davidwalsh.name/delegate-event