jQuery 질문 - 어떻게해야합니까?

Question

jQueryTools에서 사용할 수있는 모달 형식을 가지고 놀고 있습니다.

이

1. 내 웹 페이지가있을 것이다 : 나는 다음과 같은 이유로 위의 주어진 예를 수정해야 http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

   : 나는 여기에 제공된 예제를 사용하여 내 페이지 중 하나에 모달 폼을 사용하려면 페이지의 동적 수 (이 예에서는 하드 코드 번호 2를 사용함)를 사용하므로 하드 코딩 된 색인을 사용하여 트리거 배열에 색인을 생성 할 수 있습니다. 현재 닫혀있는 트리거를 결정해야합니다. 표시 양식.

2. 양식을 제출하고 서버에서 JSON 응답을받은 다음 응답을 사용하여 페이지의 요소를 업데이트해야합니다.

이것은 내가 지금까지 (예제를 기반으로 한) 것입니다. 나는 간결함을 위해서 CSS 등과 < head> 섹션 등을 생략했다. 내 예를 들어, 나는 3 버튼/형태를 가지고 있지만, 이러한 동적으로 생성됩니다, 그래서 방아쇠를 닫 사용할 인덱스를 결정하는 일반적인 방법을 찾을 필요가 :

<!-- the triggers --> 
<p> 
    <button class="modalInput" rel="#prompt1">User input1</button> 
    <button class="modalInput" rel="#prompt2">User input2</button> 
    <button class="modalInput" rel="#prompt3">User input3</button> 
</p> 


<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt1"> 
    <div>This is form 1</div> 
    <form> 
     <input> 
     <button type="submit"> OK </button> 
     <button type="button" class="close"> Cancel </button> 
    </form> 
</div> 

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt2"> 
    <div>This is form 2</div> 
    <form> 
     <input> 
     <button type="submit"> OK </button> 
     <button type="button" class="close"> Cancel </button> 
    </form> 
</div> 

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt3"> 
    <div>This is form 3</div> 
    <form> 
     <input> 
     <button type="submit"> OK </button> 
     <button type="button" class="close"> Cancel </button> 
    </form> 
</div>  
<script> 
$(document).ready(function() { 

var triggers = $(".modalInput").overlay({ 

    // some mask tweaks suitable for modal dialogs 
    mask: { 
     color: '#ebecff', 
     loadSpeed: 200, 
     opacity: 0.9 
    }, 

    closeOnClick: false 
}); 

$("form").submit(function(e) { 

    // close the overlay 
    /* I need to determine the correct trigger index for the current form - but how ? */ 
    triggers.eq(UNKNOWN).overlay().close(); 

     //This is how I think to POST the form and receive JSON response (is this right?) 
     $.post("test.php", $(this).serialize(), 
       function(data){ 
        alert(data); 
       }, 'json' 
      ); 
    // do not submit the form 
    return e.preventDefault(); 
}); 

}); 
</script> 

Answer 1

사용 JQuery와 index(element) 방법. .

는

triggers.eq($('form').index(this)).overlay().close(); 

이 트리거와 형태의 같은 번호가 있다고 가정합니다 .. - 형태에 대해

코드를 제출 그들은 무시받을
serialize() 그냥 괜찮 작은 딸꾹질을 제외하고 잘하지만, 당신이 당신의 입력 상자에 이름이 필요하거나 ..

(또한 당신이 제출 기능에서 false를 반환해야합니다) so

$("form").submit(function(e) { 

    // close the overlay 
    /* I need to determine the correct trigger index for the current form - but how ? */ 
    triggers.eq($('form').index(this)).overlay().close(); 

    //This is how I think to POST the form and receive JSON response (is this right?) 
    $.post("test.php", $(this).serialize(), 
      function(data){ 
       alert(data); 
      }, 'json' 
     ); 
    // do not submit the form 
    return false; 
});