탭이있는 UI 내에서 모달 대화 상자가 표시됨 (향상된 예제)

(원래 예제를 강화했습니다) 탭이있는 UI 내에서 모달 대화 상자를 호출하려고하는데 표시되는 동작이 혼동 스럽습니다. . UI를 처음으로 표시 할 때 대화 상자가 예상대로 작동하고 필드에서 데이터를 가져올 수 있으며 모든 것이 훌륭합니다.탭이있는 UI 내에서 모달 대화 상자가 표시됨 (향상된 예제)

tabtest2.html :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Tabtest 2</title> 

<link rel="stylesheet" type="text/css" href="js/css/smoothness/jquery-ui-1.7.2.custom.css" media="screen"/> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript"> 

jQuery(document).ready(function() 
{ 
    var tabs = $('#tabs').tabs({ 
    load: function(event, ui) 
    { 
     initializeUI(); 
    } 
    }); 
}); 

function initializeUI() 
{ 
    jQuery("#button1").click(function() 
    { 
    $(initializeUI.win).dialog("open"); 
    }); 

    $(initializeUI.win) = jQuery("#window1"); 

    //instantiate the dialog 
    $(initializeUI.win).dialog({ height: 350, 
        width: 400, 
        modal: true, 
        position: 'center', 
        autoOpen:false, 
        title:'Create Agent', 
        overlay: { opacity: 0.5, background: 'black'}, 
        buttons: 
        { 
         "Check Text 1": function() 
         { 
          var t1 = $("#text1"); 
          alert("text 1 = " + t1.val()); 
         }, 
         "Close": function() 
         { 
          $(initializeUI.win).dialog("close"); 
         } 
        } 
       }); 
} 
</script> 

</head> 

<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="tab1.html">Tab1</a></li> 
    <li><a href="http://google.com">Google</a></li> 
    </ul> 
</div> 

</body> 
</html>

그리고

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Tab 1</title> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 

</head> 

<body> 

<button id="button1" class="ui-button ui-state-default ui-corner-all">Button 1</button> 

<div id="window1" style="display:none"> 
    <form> 
    <fieldset> 
     <label for="text1">Text 1</label> 
     <input type="text" name="text1" id="text1" class="text ui-widget-content ui-corner-all" /> 
    </fieldset> 
    </form> 
</div> 

</body> 
</html>

이 (분명히)로 대화를 할 수 있습니다 반복 탭 선택 작업 tab1.html,하지만 난의 내용을 변경하려고 할 때 텍스트 필드를 검사하고, 이전 값 (첫 번째 호출의 값)을 얻습니다! 마치 대화 상자의 새 사본과 필드를 만든 것처럼 보이지만 원본 텍스트 필드는 원래 대화 상자 창에 보이지 않는 채 앉아서 이전 결과를 반환합니다.

분명히 아직 파악하지 못한 대화 상자, div 및 탭을 처리하기위한 패러다임이 있습니다. 누구든지 내 실수를 지적 해 주겠니?

출처

2009-10-09 guaguanco

워 ... – hasen

그것이 ... 설명하지만, 간단한 제목 줄을 유지하기 위해 기억 고정 작은 제목을 선택하십시오. – bobbymcr

죄송합니다, 내 편에서 조종사 오류 ... – guaguanco

FireBug를 사용하여 InitializeUI()를 호출 할 때마다 새로운 '대화 상자'DIV 요소를 만드는 것으로 나타났습니다. 그래서 이전 된 div 삭제하면 나에게 원하는 결과를 제공하는 것 같다

 

function initializeUI() 
{ 
    jQuery("#button1").click(function() 
    { 
    initializeUI.win.dialog("open"); 
    }); 

    initializeUI.win = jQuery("#window1"); 

    // remove old 'dialog' DIV elements 
    $('div[role="dialog"]').each(function() { 
    $(this).remove(); 
    }); 

    //instantiate the dialog 
    $(initializeUI.win).dialog({ height: 350, 
        width: 400, 
        modal: true, 
        position: 'center', 
        autoOpen:false, 
        title:'Create Agent', 
        overlay: { opacity: 0.5, background: 'black'}, 
        buttons: 
        { 
         "Check Text 1": function() 
         { 
          var t1 = $("#text1"); 
          alert("text 1 = " + t1.val()); 
         }, 
         "Close": function() 
         { 
          initializeUI.win.dialog("close"); 
         } 
        } 
        }); 
}

출처

2009-10-22 23:02:31 guaguanco

답변이 맞으면 받아 들여주세요. –

예에서 두 탭에서 동일한 ID를 사용하여 동일한 원격 콘텐츠를 두 번 더 중요하게 사용하고 있습니다. 두 번째 페이지의 내용이 DOM에로드 된 후에는 동일한 ID를 가진 div가 두 개 있습니다. ID는 페이지에서 고유해야하기 때문에 "오래된"값은 JavaScript에서 DOM에서 발견되는 첫 번째 div의 값일 수 있습니다.

"button1"이라는 ID를 가진 두 개의 버튼이있는 것 같습니다. 하나는 모달 div 안에 있고 다른 하나는 바깥쪽에 있습니다. 이로 인해 문제가 발생할 수도 있습니다.

출처

2009-10-10 00:56:03 emills

감사합니다. 내 사례에는 * 상당한 위축이있었습니다. 귀하의 우려 사항을 반영하여 게시 된 코드를 편집했지만 근본적인 문제는 여전히 남아 있습니다. 도와 주셔서 감사합니다! – guaguanco

탭이있는 UI 내에서 모달 대화 상자가 표시됨 (향상된 예제)

답변

관련 문제