1. 홈
  2. 질의 응답
  3. 오류 "Uncaught TypeError : 정의되지 않은 'sdIntContent'속성을 읽을 수 없습니다."

오류 "Uncaught TypeError : 정의되지 않은 'sdIntContent'속성을 읽을 수 없습니다."

2013-10-29 5 views
5

홈페이지의 모든 내부 페이지에서 사용하는 대화 상자가 있습니다. 그러나 페이지 1에서 오류가 발생하면 catch되지 않은 형식 오류가 말한다 : 더 이상오류 "Uncaught TypeError : 정의되지 않은 'sdIntContent'속성을 읽을 수 없습니다."

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"> 
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css"> 
<script type="text/javascript">//<![CDATA[ 
$(document).on('pageinit', '#home', function(){ 
    $(document).on ('click','#firstbutton', function() {   
     $('#footerdialog').simpledialog2({themeDialog: 'c'}); 
    }); 
    $(document).on('click','#first',function() { 
     window.location.href = "#first"; 
     $('#footerdialog').simpledialog2('close'); 
    }); 
    $(document).on('click','#second',function() { 
     window.location.href = "#second"; 
     $('#footerdialog').simpledialog2('close'); 
    }); 
});//]]> 

</script> 
<!--script type="text/javascript">//<![CDATA[ 
$(document).on('pageinit', '#home', function(){ 
    $(document).on ('click','#secondbutton', function() {   
     $.mobile.changePage('#secondpage', { 
      transition: 'slideup', 
      changeHash: true, 
      role: 'dialog' 
     }); 
    }); 

    $(document).on('click','#third',function() { 
     window.location.href = "#third"; 
    }); 
    $(document).on('click','#fourth',function() { 
     window.location.href = "#fourth"; 
    }); 
});//]]> 

</script--> 
</head> 
<body> 
<div data-role="page" id="home"> 
    <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li>  
        <button id="firstbutton" data-rel="dialog" data-corners="false" data-theme="c">first button</button> 
       </li> 
       <li> 
        <button id="secondbutton" data-rel="dialog" data-corners="false" data-theme="c">second button</button> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

     <div data-role="dialog" id="firstpage" data-theme="a" data-corners="false" class="ui-dialog my-dialog ui-dialog-contain"> 
      <div data-role="content"> 
       <a href="#" id="first" data-role="button" data-icon="false" style="color: white; background:red;">first</a> 
       <a href="#" id="second" data-role="button" data-icon="false" style="color: white; background:red;">second</a> 

      </div> 
     </div> 
     <div data-role="dialog" id="secondpage" data-theme="a" > 
      <div data-role="content"> 
       <a href="#" id="third" data-role="button" data-icon="false" style="color: White; background:green;">third</a> 
       <a href="#" id="fourth" data-role="button" data-icon="false" style="color: White; background:green;">fourth</a> 

      </div> 
     </div> 
    <div id="footerdialog" style="display:none" data-options='{"mode":"blank","headerText":"Dialog","headerClose":false,"blankContent":true}'> 
    <div style="padding: 15px;">  
     <ul> 
      <li> 
       <button id="first" data-corners="false" data-theme="c">first button</button>  
      </li> 
      <li>  
       <button id="second" data-corners="false" data-theme="c">second button</button> 
      </li> 
      <li> 
       <button id="third" data-corners="false" data-theme="c">third button</button> 
      </li> 
     </ul>   
    </div> 
    </div>   

<div data-role="page" id="first" data-theme="c" data-transition="slideup"> 
    <div data-role="header" ></div> 
    <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true"> 
     <div> 
      <input type="text" id="second" placeholder="first page"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" align="right"> 
       <a style="width:25%" data-role="button" id="first" href="#">first</a> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain" align="left"> 
       <a style="width:25%" data-role="button" id="esecond" href="#">second</a> 
       </div> 
      </div> 
     </div> 
      <div class="ui-grid-c"> 
       <div class="ui-block-a"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a> 
       </div> 
       <div class="ui-block-d"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a> 
       </div> 
      </div> 
     </div> 


<div data-role="content" id="home"> 
    <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li>  
<button id="firstbutton" data-corners="false" data-theme="c">first button</button> 
       </li> 
       <li> 
<button id="secondbutton" data-corners="false" data-theme="c">second button</button> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
    </div>  
</div> 
<div data-role="page" id="second" data-theme="c" data-transition="slideup"> 
    <div data-role="header" ></div> 
    <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true"> 
     <div> 
      <input type="text" id="second" placeholder="Second Page"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" align="right"> 
       <a style="width:25%" data-role="button" id="first" href="#">first</a> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain" align="left"> 
       <a style="width:25%" data-role="button" id="esecond" href="#">second</a> 
       </div> 
      </div> 
     </div> 
      <div class="ui-grid-c"> 
       <div class="ui-block-a"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a> 
       </div> 
       <div class="ui-block-d"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a> 
       </div> 
      </div> 
     </div> 


<div data-role="content" id="home"> 
    <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li>  
<button id="firstbutton" data-corners="false" data-theme="c">first button</button> 
       </li> 
       <li> 
<button id="secondbutton" data-corners="false" data-theme="c">second button</button> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
    </div>  
</div> 
<div data-role="page" id="third" data-theme="c" data-transition="slideup"> 
    <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true"> 
     <div> 
      <input type="text" id="second" placeholder="third page"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" align="right"> 
       <a style="width:25%" data-role="button" id="first" href="#">first</a> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain" align="left"> 
       <a style="width:25%" data-role="button" id="esecond" href="#">second</a> 
       </div> 
      </div> 
     </div> 
      <div class="ui-grid-c"> 
       <div class="ui-block-a"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a> 
       </div> 
       <div class="ui-block-d"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a> 
       </div> 
      </div> 
     </div> 
<div data-role="content" id="home"> 
    <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li>  
<button id="firstbutton" data-corners="false" data-theme="c">first button</button> 
       </li> 
       <li> 
<button id="secondbutton" data-corners="false" data-theme="c">second button</button> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
    </div>  
</div> 
<div data-role="page" id="fourth" data-theme="c" data-transition="slideup"> 
    <div data-role="content" style="text-align: center;" data-theme="c" data-inline="true"> 
     <div> 
      <input type="text" id="second" placeholder="fourth page"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" align="right"> 
       <a style="width:25%" data-role="button" id="first" href="#">first</a> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain" align="left"> 
       <a style="width:25%" data-role="button" id="esecond" href="#">second</a> 
       </div> 
      </div> 
     </div> 
      <div class="ui-grid-c"> 
       <div class="ui-block-a"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a> 
       </div> 
       <div class="ui-block-d"> 
        <a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a> 
       </div> 
      </div> 
     </div> 
<div data-role="content" id="home"> 
    <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li>  
<button id="firstbutton" data-corners="false" data-theme="c">first button</button> 
       </li> 
       <li> 
<button id="secondbutton" data-corners="false" data-theme="c">second button</button> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
    </div>  
</div> 
</body> 
</html>

출처

2013-10-29 Anonymous

+0

는 제 3 자 라이브러리 문제 (simpledialog2)입니다. – Omar

+0

예 ive 그것으로 들여다 보였지만 그것을 고칠 방법이나 그것을 work.any 아이디어를 어떻게 해야할지 모르겠다? –

+0

왜 jQM 대화 상자를 사용하지 않습니까? – Omar

답변

3

표시되지 않는 속성을 정의의 'sdIntContent'하고 대화 상자를 읽을 수 없습니다 당신은 당신의 코드에서 다음과 같은 실수를합니다.

  1. 당신은 당신의 네비게이션 바에서 button 대신 a의 태그를 사용하고 있습니다.

    <div data-role="navbar" data-theme="c"> 
    <ul> 
    <li> 
     <a href="#firstpage" data-rel="dialog" data-corners="false" data-theme="c">first button</a> 
    </li> 
    <li> 
     <a href="#secondpage" data-rel="dialog" data-corners="false" data-theme="c">second button</a> 
    </li> 
    </ul> 
</div>

  2. 다음과 같은 여러 요소에 같은 id을 준, id들 '독특한해야 다음과 같이 올바른 구문입니다.

Demo

출처

2013-10-29 10:16:04 Omar

관련 문제

 관련 문제