弹框模块1（Bootstrap Modal）ajax modal触发

弹框模块内的确定按钮不用绑定函数

// 触发按钮
<div class="am-btn-group am-btn-group-xs">
    <button type="button"
            class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
            data-am-popover="{content: '运行', trigger: 'hover focus'}"
            onclick="run_test('{{ foo.id }}', '/api/run_test/', 'project')">
        <span class="am-icon-bug"></span></button>
    <button type="button"
            class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
            data-am-popover="{content: '编辑', trigger: 'hover focus'}"
            onclick="edit('{{ foo.id }}','{{ foo.project_name }}', '{{ foo.responsible_name }}'
                    , '{{ foo.test_user }}','{{ foo.dev_user }}', '{{ foo.publish_app }}'
                    , '{{ foo.simple_desc }}', '{{ foo.other_desc }}')"> <span
            class="am-icon-pencil-square-o"></span></button>
    <button type="button"
            class="am-btn am-btn-default am-btn-xs am-text-danger am-round"
            data-am-popover="{content: '删除', trigger: 'hover focus'}"
            onclick="invalid('{{ foo.id }}')"><span
            class="am-icon-trash-o"></span></button>
</div>



// 刚开始隐藏的弹框
<div class="am-modal am-modal-confirm" tabindex="-1" id="select_env">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">弹框名称</div>
        <form class="form-horizontal">

            <div class="form-group">
                <label class="control-label col-sm-3"
                       style="font-weight: inherit; font-size: small ">环境:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="env_name" name="env_name">
                        <option value="">默认环境</option>
                        {% for foo in env %}
                            <option value="{{ foo.base_url }}">{{ foo.env_name }}</option>
                        {% endfor %}

                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-3" for="report_name"
                       style="font-weight: inherit; font-size: small ">报告名称：</label>
                <div class="col-sm-8">
                    <input name="report_name" type="text" id="report_name" class="form-control"
                           placeholder="默认命名" value="" readonly>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-3"
                       style="font-weight: inherit; font-size: small ">执行方式:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="mode" name="mode">
                        <option value="true">同步</option>
                        <option value="false">异步</option>
                    </select>
                </div>
            </div>

        </form>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>





//JS脚本
<script type="text/javascript">
        function edit(id, pro_name, responsible_name, test_user, dev_user, publish_app, simple_desc, other_desc) {
            $('#index').val(id);
            $('#project_name').val(pro_name);
            $('#responsible_name').val(responsible_name);
            $('#test_user').val(test_user);
            $('#dev_user').val(dev_user);
            $('#publish_app').val(publish_app);
            $('#simple_desc').val(simple_desc);
            $('#other_desc').val(other_desc);
            $('#my-edit').modal({
                relatedTarget: this,
                onConfirm: function () {
                    update_data_ajax('#list_project', '/api/project_list/1/')
                },
                onCancel: function () {
                }
            });
        }

        function invalid(name) {
            $('#my-invalid').modal({
                relatedTarget: this,
                onConfirm: function () {
                    del_data_ajax(name, '/api/project_list/1/')
                },
                onCancel: function () {
                }
            });
        }

        $('#mode').change(function () {
            if ($('#mode').val() === 'false') {
                $('#report_name').removeAttr("readonly");
            } else {
                $('#report_name').attr('readonly', 'readonly');
            }
        });

        function run_test(mode, url, type) {
            if (mode === 'batch') {
                if ($("input:checked").size() === 0) {
                    myAlert("请选择项目！");
                    return;
                }
            }
            $('#select_env').modal({
                relatedTarget: this,
                onConfirm: function () {
                    var data = {
                        "id": $("#project_list").serializeJSON(),
                        "env_name": $('#env_name').val(),
                        "type": type,
                        'report_name': $('#report_name').val()
                    };
                    if (mode !== 'batch') {
                        data["id"] = mode;
                    }
                    if ($('#mode').val() === 'true') {
                        if (mode === 'batch') {
                            var json2map = JSON.stringify(data['id']);
                            var obj = JSON.parse(json2map);
                            obj['env_name'] = data['env_name'];
                            obj['type'] = data['type'];
                            post('/api/run_batch_test/', obj);
                        } else {
                            post('/api/run_test/', data);
                        }
                    } else {
                        $.ajax({
                            type: 'post',
                            url: url,
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            success: function (data) {
                                myAlert(data);
                            },
                            error: function () {
                                myAlert('Sorry，请重试!');
                            }
                        });
                    }
                },
                onCancel: function () {
                }
            });
        }

        $('#select_all').click(function () {
            var isChecked = $(this).prop("checked");
            $("input[name^='project']").prop("checked", isChecked);
        })
 </script>



//ajax函数
function update_data_ajax(id, url) {
    var data = $(id).serializeJSON();
    $.ajax({
        type: 'post',
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (data) {
            if (data !== 'ok') {
                myAlert(data);
            }
            else {
                window.location.reload();
            }
        },
        error: function () {
            myAlert('Sorry请重试!');
        }
    });
}