Dojo灯箱问题

我用Dojo制作了一个定制的基本灯箱，用于表单和数据。不是真的处理图像之类的

我似乎面临的问题是这个。当Dojo使用特定代码通过AJAX调用ajaxtb.php时，例如？f=登录或？f=注册页面已加载。当我关闭灯箱并尝试查看不同的内容时，例如？f=内容灯箱将显示之前的内容？f=登录或其他内容，直到？f=内容完全加载为止

这是lightbox的代码，也有人可以告诉我如何优化它，因为它目前非常冗余，而且非常基本

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关闭和qpbox停留。从技术上讲，两者都只隐藏灯箱而不关闭。另一个问题是qpbox停留。qpbox stay id位于ajax.php？f=logout中，单击它不会关闭灯箱，因此不确定它有什么问题

下面是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>
';

}

if（$\u GET['f']=='logout'）{
回声'
您确定要立即退出吗



注销
';
}

---

谢谢

在显示灯箱之前，您可以使用

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

，或者如果使用Dojo 1.6，您可以使用

节点列表.委托

，如：

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

它将连接到已加载的

#utm

，但仅适用于

#qpbox stay

。它使用事件冒泡，类似于

jquery.live（）

。看