0
メニューオプションをクリックするとメニューページが表示されます。ページは自分のコードで開きますが、クリックしたときの検索ボタンは、search.htmlが単独で実行されているときのように、テーブルを表示しません。パネル内のページに埋め込まれたボタンクリックは、.load（）を使用しても動作しません
search.htmlです。 $.load("search.html") jQuery関数を使用していますが、正しいかどうかはわかりません。
<script type="text/javascript">
$(window).load(function() {
setTimeout(function() {
$('#loading').fadeOut(400, "linear");
}, 300);
});
$(document).ready(function() {
$(' li').click(function (e) {
e.preventDefault();
var $this = $(this);
$('.panel').hide();
$('#' + $this.find('a').attr('href')).show();
return false;
});
}); // end ready
</script>
</head>
<body>
<div id="sb-site">
<div class="sb-slidebar bg-black sb-left sb-style-overlay">
<div id="page-sidebar">
<div class="scroll-sidebar">
<ul id="sidebar-menu">
<li>
<a href="x_Information_System.html" title="Admin Dashboard">
<i class="glyph-icon icon-linecons-tv"></i>
<span>Home</span>
</a>
</li>
<li class="divider"></li>
<li class="active"><a href="panel1" title="x" ><span>x</span></a></li>
<li><a href="panel2" title="A"><span>A</span></a></li>
<li><a href="panel3" title="L"><span>L</span></a></li>
<li class="divider"></li>
</ul><!-- #sidebar-menu -->
</div>
</div>
<div id="page-content-wrapper">
<div id="page-content">
<div id ="panel1" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content xs </div>
<script>$("#panel1").load("search.html");</script>
</div>
<div id ="panel2" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content a</div>
</div>
<div id ="panel3" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content l</div>
</div>
</div>
</div>
</div>
</div>
これは、ボタンのクリックでテーブルを表示する検索ページです：
<div id="page-content-wrapper">
<div id="page-content">
<div class="container">
<script type="text/javascript" src="assets/widgets/datatable/datatable.js"></script>
<script type="text/javascript" src="assets/widgets/datatable/datatable-bootstrap.js"></script>
<script type="text/javascript" src="assets/widgets/datatable/datatable-tabletools.js"></script>
<div id="page-title">
<h2> Details</h2>
</div>
</div>
<div class="panel-box col-lg-12">
<form class="form-horizontal" role="form" method="get">
<div class="form-group">
<label class="col-md-4 control-label">Please enter a Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="name" >
</div>
<button class="btn btn-blue-alt" id="search" >Search</button>
</div>
</form>
</div>
<div class="panel">
<div class="panel-body">
<table class="datatable" cellpadding="0" cellspacing="0" border="0" id="resultTable">
<thead>
<tr>
<th> Id</th>
<th> Number</th>
<th> Serial Number</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.btnSearch').click(function() {
makeAjaxRequest();
});
$('form').submit(function(e) {
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'php/_search.php',
data: {name: $('input#name').val()},
type: 'get',
success: function(response) {
$('table#resultTable tbody').html(response);
}
});
}
});
</script>
</div>
</div>