0
現在、Codeigniterフレームワークとブートストラップを使用してプロジェクトに取り組んでいます。3 sb admin 2テンプレート、以前はJQueryやAjaxに関する経験はありませんでした。ブートストラップモーダルのデータをこのhttp://formvalidation.io/examples/loading-saving-data-modal/のように保存していますが、私のコンソールでこのエラーが発生し続けています。view_user:323 Uncaught ReferenceError: $ is not defined編集フォームがまったく読み込まれませんでした。ここだと私のコード：jqueryを使用して3つのモーダルフォームをブートストラップする方法
私には、CSS：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home">
<meta name="author" content="MGA">
<title>App | POS</title>
<!--Page Logo-->
<link rel="icon" type="images/ico" href="<?php echo base_url();?>/assets/images/logo.png">
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/mytheme.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>/assets/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url();?>/assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- DataTables CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
コード自体：
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Daftar User</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#view">Lihat User</a></li>
<li><a data-toggle="pill" href="#add">Tambah Baru</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="view" class="tab-pane fade in active">
<div class="row">
<div class="col-lg-12">
<!-- /.panel-heading -->
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Jabatan</th>
<th>Status</th>
<th>Menu</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($session as $row1) {
if($row1->id == "ADMIN" && $row1->jabatan_id == 1){
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td >".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td>
<div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a> <a data-toggle='modal' data-id=".$row->id." class='edit btn btn-warning btn-circle'><i class='fa fa-pencil fa-fw'></i></a></div>
</td>
</tr>";
$no++;
}
}else{
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td>".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td><div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a></div>
</tr>";
$no++;
}
}
}
?>
</tbody>
</table>
<!-- /.table-responsive -->
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<div id="add" class="tab-pane fade">
<?php include 'addnew.php' ?>
</div>
<?php include 'formedit.php' ?>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
formedit。 PHP：
<script type="text/javascript">
$(document).on("click", ".open-edit", function() {
var userID = $(this).data('id');
$(".modal-body #userID").val(userID);
});
</script>
<div class="modal hide" id="edit_user">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="userID" id="userID" value=""/>
</div>
JavaScriptとJQueries：私の悪い英語のため申し訳ありません
<!-- jQuery -->
<script src="<?php echo base_url();?>/assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url();?>/assets/dist/js/sb-admin-2.js"></script>
<!-- DataTables JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/datatables/media/js/jquery.dataTables.min.js">
</script>
<script src="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script type="text/javascript">
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
がところで
'.modal-body＃userID'はこの有効なjquery表記ですか？ –
idk、私はこの例に従いますhttp://jsfiddle.net/Au9tc/605/ – MGAjinugroho