Dojo灯箱问题

Question

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

我似乎面临的问题是这样的。例如，当 Dojo 通过 AJAX 使用特定代码调用 ajaxtb.php 时； ?f=login 或 ?f=register 页面已加载。当您关闭灯箱并尝试查看不同的内容时，比如 ?f=stuff ，灯箱将显示之前的内容，无论是 ?f=login 还是其他什么，它都会显示，直到 ?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 中，单击它时不会关闭灯箱，因此不确定它有什么问题。

这是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 ，或者如果使用 Dojo 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