同一个jQuery对话框中的不同按钮

时间:2015-06-08 22:04:02

标签: javascript jquery jquery-ui button jquery-ui-dialog

我有一个#create-user按钮,打开一个带有2个按钮的对话框(提交,取消)。是否可以在打开相同对话框但具有不同按钮(编辑,删除,取消)的页面上添加另一个#edit-user按钮?到目前为止,这是我的代码:

$(function () {
var dialog, form,
        name = $("#name"),
        birthdate = $("#student-datepicker"),
        allFields = $([]).add(name).add(birthdate),
        tips = $(".validateTips");

    function addStudent() {
    var data = {
        'action': 'add_student',
        'name': name.val(),
        'birth': birthdate.val(),
        'add-student': true
    };



    var valid = false;
    allFields.removeClass("ui-state-error");

    if (valid) {
        $.post(ajaxurl, data, function (studentId) {
            dialog.dialog("close");
        });

    } else {

    }
}

dialog = $("#dialog-form").dialog({
    show: {effect: "fade", duration: 200},
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Submit": addStudent,
        ,
        Cancel: function () {
            dialog.dialog("close");
        }
    },
    close: function () {
        form[ 0 ].reset();
        allFields.removeClass("ui-state-error");
    }
});

form = dialog.find("form").on("submit", function (event) {
    event.preventDefault();
    addStudent();
});

$("#create-user").button().on("click", function () {
    dialog.dialog("open");
});

});

1 个答案:

答案 0 :(得分:0)

实际上我用不同的方式解决了......这是解决方案和我添加的代码:

$(function(){
dialog2= $(".dialog-form").dialog({
    show: {effect: "fade", duration: 200},
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,

});

$(".edit-student").button().on("click", function () {
    dialog2.dialog(
                    'option',
                    'buttons', [{
                    text: 'A brand new button!',
                    click: function () {
                        $(this).dialog('close');
                    }
                }]);
    dialog2.dialog("open");
    return false;
});});

我在按钮点击事件中返回false只是为了确保页面不会发布/刷新。