Question

我正在使用jQueryTools提供的模态表单。我想在我的一个页面上使用模态表单，使用此处提供的示例：http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

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

我的网页将在页面上显示动态数量的表单（示例使用硬编码数字2），因此能够使用硬编码索引索引到触发器数组 - I需要根据当前显示的表单确定要关闭的触发器。
我需要提交表单并从服务器获取JSON响应，然后使用响应更新页面中的元素。

这是我到目前为止（基于示例）。我遗漏了CSS等和＆lt;头＆gt;部分等，为了简洁起见。对于我的例子，我有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;
});

jQuery问题 - 我该怎么做？

1 个答案: