2012-01-27 7 views
1

아약스 요청을 통해 자동 새로 고침 페이지를 만들었습니다. 이 페이지에는 많은 모달 대화 상자가 있습니다.jQuery UI 아약스 새로 고침 후 이상하게 작동하는 대화 상자

제 문제는 처음으로 시간 페이지가로드되고 모든 것이 완벽하다는 것입니다. 그러나 ajax를 통해 새로 고쳐지면 대화 상자는 autoOpen: falsemodal: true을 무시합니다. 왜 몰라?! :-(

나의 시작 JS 코드 :

var intval; 
var xmlhttp; 
$('.ui-dialog').dialog({ 
    open: function(event, ui) { 
     stopTimer(); 
    }, 
    close: function(event, ui) { 
     startTimer(); 
    } 
}); 

function startTimer() { 
    intval = setInterval('ajaxRefresh()', 15000); 
}; 

function stopTimer() { 
    clearTimeout(intval); 
    if (xmlhttp) xmlhttp.abort(); 
}; 

function isDialogOpen() { 
    var value = false; 
    $('.ui-dialog').each(function() { 
     if ($(this).dialog('isOpen') == true) value = true; 
    }); 
    return value; 
}; 

function ajaxRefresh() { 
    xmlhttp = $.ajax({ 
     url: 'site.asp', 
     data: { 
      tab: 'hi', 
      p: 's', 
      a: 'open', 
      c: 'some', 
      h: 'thing' 
     }, 
     beforeSend: function() { 
      stopTimer(); 
      $('#timerimg').attr('src', 'img/icons/loading.gif'); 
     }, 
     error: function(xhr, thrownError) { 
      if (xhr.status !== 0) alert(xhr.status + ' - ' + thrownError); 
     }, 
     success: function(result) { 
      if (!isDialogOpen()) $('body').html(result); 
     }, 
     complete: function() { 
      $('#timerimg').attr('src', 'img/icons/stop.gif'); 
     } 
    }) 
}; 

$(document).ready(function() { 
    startTimer(); 
}); 
대화 상자가 생성되고 다음과 같습니다되어 ASP에서 페이지 로딩 중

:

$('#close1').dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    autoOpen: false, 
    width: 400, 
    buttons: { 
     'close': { 
      text: 'Nej', 
      click: function() { 
       $(this).dialog('close'); 
      } 
     }, 
     'submit': { 
      text: 'Ja', 
      click: function() { 
       window.location = 'page.asp?p=s&a=open&c=some&h=thing&n=close&id=1' 
      } 
     } 
    } 
}); 
$('#close1Opener').live('click', function() { 
    $('#close1').dialog('open'); 
    return false; 
}); 

얼마나 많은 대화 상자 생성되는에 따라 달라집니다 데이터베이스 입력이므로 완전히 동적입니다.

So : 요청에 의해 페이지가 새로 고쳐지면 다시 생성 된 모든 대화 상자는를 무시합니다. 10 및 modal: true ...... draggable, resizable, widthbuttons은 여전히 ​​완벽하게 작동합니다.

어떻게해야합니까?

+0

우리는 해답을 가지고 있을지 모르지만, 누구든지 축소 코드를 읽는 것은 어렵습니다. –

+0

그리고 편집 해 주셔서 감사합니다! :) – Behrens

+0

어떤 jquery 및 jquery-ui 버전을 사용하고 있습니까? – JSuar

답변

1

jQuery 대화 상자 설명서 here을 참조하십시오.

시도해 볼 수있는 한 가지는 $('#close1').dialog('destroy');을 사용하여 대화 상자를 다시 초기화 상태로 되돌립니다.

또한 .live()을 사용하는 것은 아마도 필요하지 않으며 가능한 경우 피해야합니다. $('#close1Opener').click(function() {});을 사용하면 더 깨끗한 방법입니다.

+0

대화 상자에서 삭제 : :) 고마워요! :) – Behrens