0

我有一个模态，当单击提交时会执行 ajax 发布，但现在我想选择关闭模态，但只要我单击“关闭”，它仍然会执行 ajax 发布。单击“关闭”按钮后，我不想发布 ajax 帖子。我不确定如何处理这种情况。

模态

<div id="ModelView" class="modal hide fade" data-backdrop="static">
    <div class="modal-header">
        <button id="close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Add Session</h3>
    </div>
    <div class="modal-body">
        <input type="hidden" id="rateId" />
        <table class="table">
            <tr>
                <td>Client</td>
                <td>
                    <select id="clientSelect">
                    </select>
                </td>
            </tr>
            <tr>
                <td>Lessons</td>
                <td>
                    <select id="SelectLessonCounter">
                        <option value="1">1</option>
                        <option value="1.5">1.5</option>
                        <option value="2">2</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>From</td>
                <td>
                    <div class="input-append bootstrap-timepicker-component">
                        <input id="from" size="16" type="text" readonly="true" />
                        <span class="add-on">
                            <i class="icon-time"></i>
                        </span>
                    </div>

                </td>
            </tr>
            <tr>
                <td>Till</td>
                <td>
                    <div class="input-append bootstrap-timepicker-component">
                        <input id="till" size="16" type="text" readonly="true" />
                        <span class="add-on">
                            <i class="icon-time"></i>
                        </span>
                    </div>

                </td>

            </tr>
            <tr>
                <td>Subject</td>
                <td>
                    <select id="subjectSelect">
                    </select>
                </td>
            </tr>
            <tr>
                <td>Type</td>
                <td>
                    <select id="typeSelect">
                        <option value="<%# (int)Genius.Models.Enums.RateType.Tutoring %>">Tutoring </option>
                        <option value="<%# (int)Genius.Models.Enums.RateType.Couching %>">Couching </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input id="dontCount" type="checkbox" />
                    Don't Count
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <a id="btnDoneEdit" href="#" data-dismiss="modal" class="btn btn-success">Done</a>
    </div>
</div>

阿贾克斯邮报

$("#ModelView").modal("show").on("hidden", function (a, b, c) {

                    if (a.target.localName != 'div')
                        return;

                    var d = {
                        id: 0,
                        SubjectId: $("#subjectSelect").val(),
                        ClientId: $("#clientSelect").val(),
                        From: f + " " + $("#from").val(),
                        Till: f + " " + $("#till").val(),
                        DontCount: $("#dontCount").is(":checked"),
                        Type: $("#typeSelect").val(),
                        LessonCounter: $("#SelectLessonCounter").val()
                    }


                    $.ajax({
                        type: "POST",
                        url: "Api/UpdateTimeTable.ashx",
                        data: JSON.stringify(d),
                        success: function (response, status, xhr) {
                            var ct = xhr.getResponseHeader("content-type") || "";
                            if (ct.indexOf('json') > -1) {
                                window.location = window.location;
                            }
                            if (ct.indexOf('text') > -1) {
                                alert(response);
                                window.location = window.location;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("There seems to be a problem. " + errorThrown);
                        }
                    });

                });
4

3 回答 3

2

不要将 ajax 调用绑定到 on('hidden') 事件，而是绑定到提交按钮上的 click 事件。

[更新]（我不知道模态插件，但它应该是这样的：）

$("#ModelView").modal("show");

             /*EDIT*/ 
            $(document).on( "click", '#btnDoneEdit', function(e){
              e.preventDefault();
            /*EDIT end */


                var d = {
                    id: 0,
                    SubjectId: $("#subjectSelect").val(),
                    ClientId: $("#clientSelect").val(),
                    From: f + " " + $("#from").val(),
                    Till: f + " " + $("#till").val(),
                    DontCount: $("#dontCount").is(":checked"),
                    Type: $("#typeSelect").val(),
                    LessonCounter: $("#SelectLessonCounter").val()
                }


                $.ajax({
                    type: "POST",
                    url: "Api/UpdateTimeTable.ashx",
                    data: JSON.stringify(d),
                    success: function (response, status, xhr) {
                        var ct = xhr.getResponseHeader("content-type") || "";
                        if (ct.indexOf('json') > -1) {
                            window.location = window.location;
                        }
                        if (ct.indexOf('text') > -1) {
                            alert(response);
                            window.location = window.location;
                        }
                    $("#ModelView").modal("hide");

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("There seems to be a problem. " + errorThrown);
                    }
                }); 


            });
于 2013-06-12T11:19:05.100 回答
0

然后，您应该为 ajax 帖子创建一个自己的函数，并将其绑定到按钮的 onclick 事件：

<input type="Button" value="Done" onclick="ajaxCall()" />

...

function ajaxCall()
{
$.ajax({...)};
}
于 2013-06-12T11:38:40.040 回答
0

我已经修复了我的模式，我稍微改变了我的 jquery，它现在工作正常。

$("#ModelView").modal("show").on(
    //$(document).on("click", '#btnDoneEdit', function (e) {
    $('#btnDoneEdit').click(function (e) {
                        // e.preventDefault();
                        alert("Hi");
                        //if (a.target.localName != 'div')
                        //    return;

                        var d = {
                            id: 0,
                            SubjectId: $("#subjectSelect").val(),
                            ClientId: $("#clientSelect").val(),
                            From: f + " " + $("#from").val(),
                            Till: f + " " + $("#till").val(),
                            DontCount: $("#dontCount").is(":checked"),
                            Type: $("#typeSelect").val(),
                            LessonCounter: $("#SelectLessonCounter").val()
                        }

                        $.ajax({
                            type: "POST",
                            url: "Api/UpdateTimeTable.ashx",
                            data: JSON.stringify(d),
                            success: function (response, status, xhr) {
                                var ct = xhr.getResponseHeader("content-type") || "";
                                if (ct.indexOf('json') > -1) {
                                    window.location = window.location;
                                }
                                if (ct.indexOf('text') > -1) {
                                    alert(response);
                                    window.location = window.location;
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert("There seems to be a problem. " + errorThrown);
                            }
                        });

                    })
                );
于 2013-06-13T08:00:37.520 回答