0

我用 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>
';

}

谢谢

4

1 回答 1

2

您可以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

于 2011-06-18T00:01:27.370 回答