1. ev
  2. Soru-cevap
  3. iletişim kutusu "Hatalı TypeError: özelliği okunamıyor 'sdIntContent' undefined"

iletişim kutusu "Hatalı TypeError: özelliği okunamıyor 'sdIntContent' undefined"

2013-10-29 11 views
5

Tüm iç sayfalarda kullanıyorum bir iletişim kutusu var, bu, ana sayfadan iyi çalışıyor ancak sayfa 1 başladığı zaman bir hata alıyorum Yakalanmayan TypeError diyor ki: artıkiletişim kutusu "Hatalı TypeError: özelliği okunamıyor 'sdIntContent' undefined"

<!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>

kaynak

2013-10-29 Anonymous

+0

bir 3. parti kütüphane sorunu (simpledialog2) bulunuyor. – Omar

+0

evet ona baktım ama nasıl düzeltileceğini ya da iş yapmak için ne yapacağımı bilmiyorum. –

+0

neden jQM iletişim kutularını kullanmıyorsunuz? – Omar

cevap

3

görünmüyor mülkiyet tanımsız bir 'sdIntContent' ve iletişim kutusunu okuyamıyor Sen size kodunda aşağıdaki hatalar var.

  1. Sen gezinme çubuğu üzerinde button yerine a ait etiketler kullanıyor.

    <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. Birkaç elemanlara aynı id verdik, id s'benzersiz olmalıdır: Doğru sözdizimi aşağıdaki gibidir olduğunu.

Demo

kaynak

2013-10-29 10:16:04 Omar

 İlgili konular

  • İlgili sorun yok^_^