admin管理员组文章数量:1431720
i have a dialog box that i use in all my internal pages it works fine from home page but when page 1 kicks in i get an error that says Uncaught TypeError: Cannot read property 'sdIntContent' of undefined and the dialog box does not appear anymore
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src=".8.3.js"></script>
<link rel="stylesheet" href=".3.1/jquery.mobile-1.3.1.min.css">
<script src=".3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href=".mobile.simpledialog.min.css">
<script type="text/javascript" src=".mobile.simpledialog2.js"></script>
<link rel="stylesheet" type="text/css" href=".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>
i have a dialog box that i use in all my internal pages it works fine from home page but when page 1 kicks in i get an error that says Uncaught TypeError: Cannot read property 'sdIntContent' of undefined and the dialog box does not appear anymore
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery./jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery./mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery./mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage./cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script type="text/javascript" src="http://dev.jtsage./cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery./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>
- it's a 3rd party library issue (simpledialog2). – Omar Commented Oct 29, 2013 at 8:53
- yes ive looked into it but i dont know how to fix it or what to do to make it work.any ideas? – user2805663 Commented Oct 29, 2013 at 8:54
- why dont you use jQM dialogs? – Omar Commented Oct 29, 2013 at 9:03
- i tried but wasnt able to run so i did the other way but if it cant be done then maybe i will have to make jQM dialog run.no other way around the Cannot read property 'sdIntContent' error? – user2805663 Commented Oct 29, 2013 at 9:11
-
1
In your navbar, you're using
buttontag not anchora. Use anchors, its working jsfiddle/Palestinian/HAU33 – Omar Commented Oct 29, 2013 at 9:25
1 Answer
Reset to default 3You have the following mistakes in you code.
You are using
buttoninstead ofatags in your navbar. The correct syntax is as follows:<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>You have given the same
idto several elements,ids' should be unique.
Demo
本文标签：
版权声明：本文标题：javascript - dialog box with error " Uncaught TypeError: Cannot read property 'sdIntContent' of undefin 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745578140a2664456.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论