jQuery的问题 - 我该怎么做？

Question

我正在玩jQueryTools提供的模式表单。我想用我的网页上的一个模态形式，利用这里提供的示例：http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

我需要修改上面给出的原因如下的例子：

1. 我的网页会有一个动态页面上的表单数量（该示例使用硬编码数字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）

所以

$("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; 
});