jquery ui按钮在对话框中显示和隐藏

jquery ui按钮在对话框中显示和隐藏,jquery,jquery-ui,Jquery,Jquery Ui,我已经在我的对话框中添加了3个按钮,在我的对话框中我有3个选项卡,我想显示和隐藏按钮的功能点击的选项卡 对话框的代码如下所示 $('a.open_dialog_edit').click(function(e) { //e.preventDefault(); var tabsDiv=$('<div />').appendTo('body').load($(this).attr('href'),function(){ //$

我已经在我的对话框中添加了3个按钮,在我的对话框中我有3个选项卡,我想显示和隐藏按钮的功能点击的选项卡

对话框的代码如下所示

        $('a.open_dialog_edit').click(function(e) {
        //e.preventDefault();
        var tabsDiv=$('<div />').appendTo('body').load($(this).attr('href'),function(){
        //$('#tabs').tabs();


        var editor = $('.textarea').wysihtml5().data("wysihtml5").editor.setValue(getCustomText($('select#state').val(), $('input#contactname.required').val()));

        var dialog = $('#tabs').tabs(
                {
                    select: function(ev, ui) {
                        //Setup Buttons to each Tab
                        switch(ui.index) {
                        case 0:
                            $('.ui-dialog-buttonpane').find("button:contains('Email Senden')").hide();

                        break;

                        case 1:
                            $('.ui-dialog-buttonpane').find("button:contains('Speichern')").hide();

                        break;

                    }

                  }        
            }).dialog({ 

            title: $(this).attr('title'),
            modal: true,
            draggable: false,
            width: 800,
            position: 'top',
            buttons: 
                [{
                text: "Speichern",
                "class": "btn btn-primary",
                click: function () {
                    $.ajax({
                           type: "POST",
                           url: 'action.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Der Datensatz wurde gespeichert!'); // show response from the php script.
                           },
                            error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });
                },

            }, {
                text: "Email Senden",
                "class": "btn btn-primary",
                click: function () {
                    $.ajax({
                           type: "POST",
                           url: 'mailer.php',
                           data: $("#contactform").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Das Email wurde geschickt!'); // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });
                },
                text: "Rechnung herunterladen",
                "class": "btn btn-primary",
                click: function() {

                    $.ajax({
                           type: "POST",
                           url: 'docsx.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {

                               window.location.href ='rechnung.docx'; // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });

                    }
            }],

            close: function() {
                tabsDiv.remove() // so I can reload again
                location.reload(true);
//              allFields.val( "" ).removeClass( "ui-state-error" );


            },
        });

        $('select#state').on('change',function() {  
            $('ul.wysihtml5-toolbar').remove();
            alert($('select#state').val());
        $('.textarea').wysihtml5().data("wysihtml5").editor.setValue(getCustomText($('select#state').val(), $('input#contactname.required').val()));

    });

}); 

        return false;

});

例如:如果单击第一个选项卡,则应隐藏sen电子邮件按钮

,您可以绑定tabselect事件,然后使用其索引访问选项卡,如下所示

   $('#tabs').bind('tabsselect',function(event, ui) {
            if(ui.index==2){

将“发送邮件”功能放在您喜欢使用的选项卡索引上,如图所示,一种方法是首先存储对话框元素

var dialog = $('<div />').appendTo('body').load($(this).attr('href')).dialog({

更新:在隐藏想要隐藏的按钮之前,需要先显示所有其他按钮。

隐藏和显示按钮可以使用css和jquery实现。例如,在创建对话框时,为每个按钮指定一个唯一的类:

类别:myButton1

然后使用jquery显示或隐藏:

$'.myButton1'。显示;
$'.myButton1'。隐藏

您好,谢谢您的反馈,我仍然不知道如何处理这个问题,如果我在对话框中输入一个变量,它就会中断everything@user1659575,我没有看到您的代码中有任何错误。但您没有设置选项卡选择选项。所以我不确定什么东西坏了?几乎可以正常工作了只是每次点击的按钮都不好渲染它们在三次点击后消失了我更新了我的代码也许你可以帮我是的,我忘了你需要先再次显示隐藏的按钮。从代码中可以看到:$'.ui对话框按钮pane'.findbutton.show.filter:包含'Email Senden'。hide;非常感谢,以及如何使它在对话框打开时初始化,它在已经单击选项卡时工作
$("#tabs").tabs(select:function(ev, ui){
    switch(ui.index) {
        case 1:
             dialog.find("button").show().filter(":contains('Send Email')").hide();
        break;

    }
    //alternatively can do this if the tabs and buttons are in the same order
    //lots of ways to do this...
    dialog.find("button").show().eq(ui.index).hide();
});