[英]How to get data to bootstrap 3 modal form using jquery
我目前正在使用Codeigniter框架和bootstrap 3 sb admin 2模板进行项目,以前我没有关于JQuery或Ajax的经验,现在我想创建一个编辑表单来加载和保存Bootstrap模态中的数据,就像http:// formvalidation .io / examples / loading-saving-data-modal /,但我在控制台上不断收到此错误view_user:323 Uncaught ReferenceError: $ is not defined
并且根本没有加载编辑表单。 这是我的代码:
我包括的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 -->
theformitit.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>
Javascripts和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>
抱歉我的英语不好:)
ID对于页面应该是唯一的,因此执行$(#userID).val(userID)
可能会更干净。 除此之外
根据错误view_user:323 Uncaught ReferenceError: $ is not defined
可能view_user:323 Uncaught ReferenceError: $ is not defined
您的jQuery。 确保您的页面正确加载了jQuery(文件既在其中,又在其中包含代码)。
Chrome:右键单击->检查->源
Firefox:右键单击->检查元素->调试器->源
Internet Explorer:单击->检查元素->调试器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.