동적으로 jQuery UI 변경 대화상자 버튼 텍스트

동적으로 jQuery UI 변경 대화상자 버튼 텍스트

저는 jQuery UI Dialog 박스를 ax form submit에 사용하고 있습니다.사용자가 저장 버튼을 클릭하고 ajax 호출이 완료되면 저장 버튼의 텍스트를 대기하도록 변경합니다.제발 도와주세요

비록 그 질문이 매우 오래되었지만, 저는 답이 매우 간단하다고 생각하고 여기서 주어지지 않았습니다.

• 버튼의 아이디를 설정해서 사용하시면 됩니다.
• 모든 대화 버튼은 jQuery UI 버튼이므로 사용할 수 있습니다.$().button()버튼을 수정하는 기능.

자바스크립트 코드는 다음과 같습니다.

$('#dialog').dialog({
    buttons:[{
        id: 'buttonId',
        click: function() {
            // your function
        }]
});
$('#buttonId').button('option', 'label', 'Please wait...');

buttons 옵션과 함께 .dialog()를 사용한다고 가정하면, 사용자 정의 클래스를 제출 버튼에 할당한 다음 span(ui-button-text)에 할당된 클래스를 통해 내부 버튼 텍스트를 대상으로 지정할 수 있습니다.

    $("#dialog-test").dialog({
        title: "My dialog",
        buttons:
            [
              {
                  text: "Submit",
                  click: function() {
                    $(".my-custom-button-class > .ui-button-text").text("Please Wait..."); 
                    $("#some-form").submit();
                  },
                  'class': 'my-custom-button-class'
              }
            ]
    });

submit()을 통해 저장이 완료되면 같은 호출을 사용하여 텍스트를 원하는 대로 다시 설정할 수 있습니다.

누군가에게 도움이 된다면: 예제를 사용한 전체 구현(PS: 이 사이트의 다른 게시물에서 getDialogButton()을 빌렸지만 링크를 기억할 수 없습니다).

//-> Change to Loading Notice:
setButton('.settingsDialog', 'Save', 'Saving...', false);
setTimeout(function() { setButton('.settingsDialog', 'Saving...', 'Save', true); }, 800 );},

//Select the Dialog Buttons
function getDialogButton( dialog_selector, button_name ) {
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i ) {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }
  return null;
}


//Button Controller for AJAX Loading:
function setButton(sDialogClass, sButtonName, sNewButtonName, bEnabled){
    var btn = getDialogButton(sDialogClass, sButtonName);
    btn.find('.ui-button-text').html(sNewButtonName);

    if (bEnabled) {
        btn.removeAttr('disabled', 'true');
        btn.removeClass( 'ui-state-disabled' );
    } else {
        btn.attr('disabled', 'true');
        btn.addClass( 'ui-state-disabled' );
    }
}

$(".ui-dialog-buttonpane button:contains('Save') span").text("Please wait...");

여러 개의 버튼을 즉석에서 만드는 올바른 방법을 기록합니다.

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

비 배열 스타일을 사용하는 예는 다음과 같습니다.예를 들어 이 jsFiddle을 참조하십시오.

사용하다$().text('Please Wait')AJAX 호출을 수행하고 추가하기 전에$().text('Save')성공적인 콜백의 마지막 작업으로서.

이를 위해서는 A를 사용해야 합니다.button원소가 아닌 원소input요소:

<button>Text here</button>

$("#dialog-test").dialog({
    title: "My dialog",
    buttons:
        [
          {
              text: "Submit",
              click: function() {
                $(".my-custom-button-class > .ui-button-text").text("Please Wait...");
                //You may use $(this) as selector or allso $("#dialog-test")
                $(this).parent().children('.ui-dialog-buttonpane').children().children().html('Please wait..');
                //As you have only one button, it should not matter to specify child element, but you can like this:
                //$($(this).parent().children('.ui-dialog-buttonpane').children().children()[0]).html('Please wait..');

                $("#some-form").submit();
              },
              'class': 'my-custom-button-class'
          }
        ]
});

제 버전의 jquery ui(1.11.4)의 경우, 이 형식은 버튼 텍스트를 변경하는 데 사용되었습니다.

$('#setActionButton').button('option').text('new text');

하지만 새로운 텍스트가 포함된 버튼을 대화상자에 재설정하지는 않았답니다!답답했습니다.위의 재러드 브로드의 답변은 제게 도움이 된 답변입니다. 먼저 대화 상자에서 모든 버튼을 꺼내고, 다시 이름을 바꾸기 위한 버튼을 찾기 위해 순환하는 것입니다.그리고 매번 문자를 바꿨습니다.

추가 ID/클래스를 추가하고 싶지 않거나 반복적으로 콜백 기능을 클릭하기를 원하지 않는 사람들을 위해:

// initialization
$('#my-dialog').dialog({
    buttons: [
        {
            text: 'Submit',
            click: function () {...}
        }
    ]
});
// You can simply change button text by this way
$('#my-dialog').dialog('option', 'buttons.0.text', 'wait...');

사용해야 할 것입니다.beforeSend그리고.complete그에 따른 옵션.자세한 내용은 문서를 확인해 보십시오.

http://api.jquery.com/jQuery.ajax/

단추가 같은 대화 상자를 여러 개 사용하면 각 대화 상자의 각 단추에 클래스를 정의한 다음 모든 단추의 텍스트를 변경할 수 있습니다.

$('#dialog1').dialog({
        buttons:[{
                    class: "btnOK",
                    click: function () {
                        ...
                    }
                },
                {
                    class: "btnClose",
                    click: function () {
                        ...
                    }
                }]
    });

$('#dialog2').dialog({
        buttons:[...]
    });    

$('.btnOK').button('option', 'label', 'Your text here');
$('.btnClose').button('option', 'label', 'Your text here');

또한 클래스 대신 각 버튼에 대해 id를 정의할 수 있습니다(단, id는 고유해야 함).

언급URL : https://stackoverflow.com/questions/4591642/dynamically-changing-jquery-ui-dialog-box-button-text