jQuery UI 대화 상자에서 콘텐츠를 동적으로 로드하는 방법

jQuery UI 대화 상자에서 콘텐츠를 동적으로 로드하는 방법

저는 jQueryUI의 대화 상자를 좋아합니다.그러나 내장된 콘텐츠를 동적으로 로드할 수 있는 방법은 없는 것 같습니다.이를 위해 다른 방법을 사용해야 하나요?iframes는 표시될 때만 콘텐츠를 로드합니까?그렇게 하는 게 맞나요?

처음 열 때만 내용을 로드하는 데 더 적합한 대화 상자 메커니즘을 사용할 수 있습니다.

이것은 어려운 일이 아닙니다. 저는 이것만 가지고는 장난을 치지 않을 것입니다.이런 거 어때요?

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

기본적으로, 당신은 당신의 대화상자를 만들고, 그것이 열리면, 당신의 서버로부터 html 파일이 로드되어, 당신의 내용을 대체합니다.<div id="divInDialog"></div>대화 상자 안에 있어야 합니다.<div class="selector"/>.

당신은 당신의 페이지에 빈 div를 만들 수 있습니다.

<div id="dialog-confirm"><div>

autoopen = false를 사용하여 jqueryui 대화상자를 설정합니다.

    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height:140,
        modal: true,
        buttons: {
          'Delete all items': function() {
            $(this).dialog('close');
          },
         Cancel: function() {
            $(this).dialog('close');
         }
       }
   });

그런 다음 동적 페이지를 로드하려면 jquery agax 호출을 사용하여 동적으로 html을 div에 넣은 다음 해당 div에서 대화 상자를 엽니다.버튼 클릭 시 동적 페이지를 로드하는 예는 다음과 같습니다.

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

또한 Ajax 호출에서 페이지를 로드하는 데 시간이 조금 걸리는 경우 로드 이미지 또는 jquery blockui 플러그인을 사용하여 무언가 로드 중임을 표시할 수 있습니다.

개인적으로 대화 상자에 대한 "보기"를 만든 다음 생성 중인 대화 상자로 확장합니다.테스트 사례를 위해 다음 "view"를 사용했습니다.

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

그런 다음 대화 상자로 확장합니다.

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("NICE CLICK!@!@!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});

언급URL : https://stackoverflow.com/questions/3694693/how-to-have-jqueryui-dialog-box-dynamically-load-content