Dojo燈箱問題

Question

我用Dojo製作了一個自定義的基本燈箱，用於表單和數據。沒有真正處理圖像等。

我似乎面臨的問題是這樣的。例如，Dojo使用特定的代碼通過AJAX調用ajaxtb.php時， ？f =登錄或？f =註冊頁面被加載。當你關閉燈箱，並試圖查看不同的說法時，f = stuff會顯示燈箱以前的狀態嗎？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 =註銷中，點擊時它不關閉燈箱，所以不知道它有什麼問題。

這裏是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.empty(dojo.byId('utm'))代碼。

此外，你可以重構你的代碼很多。兩個點擊處理程序基本上都是一樣的。那麼爲什麼不重構它們呢？

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); 

}); 

你可以嘗試連接到#qpbox-stay後，你已經加載的內容，或者如果使用道場1.6，你可以使用NodeList.delegate這樣的：

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

將連接到#utm這是已經加載，但僅適用於#qpbox-stay。它適用於事件冒泡，類似於jquery.live()。見http://davidwalsh.name/delegate-event