Lightbox - 요청 AJAX - 페이지의 여러 버튼으로 오버레이하기

Question

David Walsh가 다음과 같은 라이트 박스 오버레이를 사용하여 페이지의 여러 버튼에 대한 클릭 기능에서 벗어나는 오버레이를 만듭니다.

http://davidwalsh.name/facebook-lightbox

내가 가진 문제는이 코드를 호출 페이지 당 하나 개의 입력 ID를 가진를 위해 내장되어 있다는 것입니다. 나는 php while 루프에서 여러 개의 버튼을 만들 때 이렇게 만들 필요가있다. 그리고 while 루프의 객체 id를 가진 숨겨진 입력 필드와 javascript를 호출하는 버튼 입력 필드를 생성한다.

<script> 
    window.addEvent('domready',function(){ 

     document.id('add').addEvent('click',function(){ 

      ajaxFace = new LightFace.Request({ 
       url: 'ajax.php', 
       buttons: [ 
        { title: 'Add A Person', event: function() { 
              alert('hi!'); 
              }, 
              color: 'green' }, 
        { title: 'Cancel', event: function() { this.close(); } } 
       ], 
       request: { 
        data: { 
         day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
        }, 
        method: 'post' 
       }, 
       title: 'Add a name to this person' 
      }).open(); 

     }); 
    });  
</script> 

일부 헤더 것을 : 여기

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" /> 

가 호출하는 자바 스크립트입니다 :

이

내가 while 루프를 통해 각 시간에 생성하고자하는 폼 객체의 유형입니다 :

<link rel="stylesheet" href="../Assets/lightface.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script> 
<script src="../Source/LightFace.js"></script> 
<script src="../Source/LightFace.Request.js"></script> 
    <!-- this was the code that in the html doc to begin with in DW's code --> 
<script src="../Source/addpersonlightbox.js"></script> 

아약스가 object_id를받은 PHP 파일에 게시하고 싶습니다. uld는 그 PHP 스크립트 내에서 다른 모든 것을 할 수 있습니다.

js의 document.id를 클래스 또는 rel과 함께 변경해야한다고 생각합니다. 여기에 무엇을 넣을 지에 대한 도움이 필요합니다.

request: { 
       data: { 
        day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
       }, 
       method: 'post' 
      }, 

는 또한 나는 ID = "PERSONNAME"처럼. 내가있는 PHP 변수를 넣어 ID 이외의 무언가를 가지고 두 개의 입력 필드를 변경할 필요가 있다고 생각하지만, 나는 그것이 클래스해야하는지 모르거나하지 않습니다 델 또는 ​​다른 것. 그렇다면 자바 스크립트로 어떻게 작동하는지 모르겠습니다.

미리 감사드립니다.

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" /> 

Answer 1

우물. 수업을 사용하십시오. 그러면 왜 대답을 알게되는지 물어보십시오. :)

var attachLightFace = function() { 

    new LightFace.Request({ 
     url: 'ajax.php', 
     buttons: [ 
      { 
      title: 'Add A Person', 
      event: function() { 
       alert('hi!'); 
      }, 
      color: 'green'}, 
     { 
      title: 'Cancel', 
      event: function() { 
       this.close(); 
      }} 
     ], 
     request: { 
      data: { 
       name: this.getPrevious().get("value").clean() 
      }, 
      method: 'post' 
     }, 
     title: 'Add a name to this person' 
    }).open(); 

}; 


document.getElements('button.submit').addEvent('click', attachLightFace); 

이 제출 한 유형의 모든 버튼에 연결하고 그들이 입력 앞에 경우 작동합니다, 요청에 전달되는 값입니다.

의 단점은 많은 이벤트 핸들러의 공간이 부족하다는 것입니다.

document.id('container').addEvent('click:relay(button.submit)', attachLightFace)과 같은 위임을 사용할 수도 있습니다.이 이벤트는 앞으로있을 단추가 있을지도 모르는 단추를 처리 할 단일 이벤트를 추가합니다.