Question

我制作了一个带有Dojo的自定义基本灯箱，用于表单和数据。没有真正处理图像等。

我似乎面临的问题是这个。当Dojo使用特定代码通过AJAX调用ajaxtb.php时; ？f =登录或？f =注册页面已加载。当你关闭灯箱并尝试查看不同的东西时？f =东西灯箱会显示它之前的情况吗？f =登录或者什么，它会显示它直到？f = stuff完全加载。< / p>

以下是灯箱的代码，也可以告诉我如何优化它，因为它目前非常冗余且非常基础。

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

Dojo灯箱问题

1 个答案: