JQuery вопрос - как мне это сделать?

Question

Я играю с модальными формами, доступными в jQueryTools. Я хочу использовать модальные формы на одной из моих страниц, используя приведенный ниже пример: http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

Мне нужно изменить приведенный выше пример по следующим причинам:

1. Моя веб-страница будет иметь динамическое количество форм на странице (в примере используется жестко закодированное число 2), и поэтому она может индексироваться в массив триггеров, используя жестко закодированный индекс - необходимо определить, какой триггер закрыть, основываясь на текущей отображаемой форме.

2. Мне нужно отправить форму и получить ответ JSON от сервера, а затем использовать этот ответ для обновления элемента на странице.

Это то, что я имею до сих пор (на примере). Я упустил CSS и т. Д., А также раздел и т. Д., Для краткости. В моем примере у меня есть 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;
});