Проблема с лайтбоксом в Dojo - PullRequest
Новая
       33

Проблема с лайтбоксом в Dojo

0 голосов
/ 17 июня 2011

Я сделал собственный базовый лайтбокс с Dojo для использования с формами и данными.На самом деле не имею дело с изображениями.

Проблема, с которой я, похоже, сталкиваюсь, заключается в следующем.Когда Dojo делает вызов через AJAX для ajaxtb.php с определенным кодом, например;? f = логин или? f = зарегистрировать страницу загружена.Когда вы закрываете лайтбокс и пытаетесь просмотреть что-то другое, скажем: «f = вещи», лайтбокс будет показывать то, что было раньше, будь то?1003 *

Вот код для лайтбокса, и кто-нибудь может сказать мне, как его оптимизировать, поскольку он довольно избыточен на данный момент и очень прост. 

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

}

Спасибо

1 Ответ

2 голосов
/ 18 июня 2011

Вы можете использовать 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 like: 

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

Это подключится к #utm, который уже загружен, но работает только для #qpbox-stay.Он работает с событиями, похожими на jquery.live().См http://davidwalsh.name/delegate-event

...