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です。技術的には、両方ともライトボックスを非表示にするだけで、閉じません。もう1つの問題は、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 後で接続を試みることができます。Dojo1.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 に答える