This is something I've been working on for a while now, and it's about to be released I just cannot figure out for the life of me on how to make the edit button work. If you can find a way for it to work just leave the java down below and the changes that you've done it would be greatly appreciated.
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-heading">Vehicle Management</div>
<h2>List of your characters' vehicles</h2>
<table class="table table-responsive table-striped">
<thead>
<th>Vehicle Make</th>
<th>Vehicle Model</th>
<th>Vehicle Color</th>
<th>Vehicle Owner</th>
<th>License Plate</th>
<th>Details</th>
<th>Actions</th>
</thead>
<tr ng-show="vehList.length > 0" class="text-left" ng-repeat="veh in vehList">
<td>{{veh.vehmake}}</td>
<td>{{veh.vehmodel}}</td>
<td>{{veh.vehcolor}}</td>
<td>{{veh.vehowner}}</td>
<td>{{veh.vehplate}}</td>
<td>
<span ng-show="veh.details.stolen" class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> Stolen<br /></span>
<span ng-show="veh.details.registrationExpired" class="text-warning">Expired Registration<br /></span>
<span ng-show="veh.details.noRegistration" class="text-warning">No Registration<br /></span>
<span ng-show="veh.details.insuranceExpired" class="text-warning">Expired Insurance<br /></span>
<span ng-show="veh.details.noInsurance" class="text-warning">No Insurance<br /></span>
</td>
<td>
<span ng-show="veh.details.active" class="btn btn-primary glyphicon glyphicon-star"><br/></span>
<span ng-show="veh.details.nonactive" class="btn btn-default glyphicon glyphicon-star-empty"><br/></span>
<button ng-click="edit=true" class="btn btn-primary glyphicon glyphicon-edit"></button>
<button ng-click="deleteVehicle($index)" class="btn btn-danger glyphicon glyphicon-trash"></button>
</td>
</tr>
<!-- Only shown when there's no vehicule already created -->
<tr ng-show="vehList.length == 0">
<td colspan="7" class="text-center">
<h4>No Vehicle Found, Please Create One.</h4>
</td>
<tr>
<td colspan="7" class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#modalAdNewVehicle"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</table>
<div class="panel-body">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalAdNewVehicle" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Vehicle Information
</h4>
</div>
<div class="modal-body">
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Make</span>
<input ng-model="newveh.vehmake" autofocus type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Model</span>
<input ng-model="newveh.vehmodel" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Color</span>
<input ng-model="newveh.vehcolor" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Owner</span>
<input ng-model="newveh.vehowner" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Plate</span>
<input ng-model="newveh.vehplate" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="container-fluid text-left">
<div class="checkbox">
<label><input ng-click-"!newveh.details.active" ng-model="newveh.details.active" type="checkbox" value"">Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.nonactive" ng-model="newveh.details.nonactive" type="checkbox" value="">Not Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.stolen" ng-model="newveh.details.stolen" type="checkbox" value="">Stolen</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.registrationExpired" ng-model="newveh.details.registrationExpired" type="checkbox" value="">Expired Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noRegistration" ng-model="newveh.details.noRegistration" type="checkbox" value="">No Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.insuranceExpired" ng-model="newveh.details.insuranceExpired" type="checkbox" value="">Expired Insurance</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noInsurance" ng-model="newveh.details.noInsurance" type="checkbox" value="">No Insurance</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button ng-click="addNewVehicle()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
There is java script for everything else to work, i just cannot figure out how to make the edit button work
Related
I have an HTML code like this:
<body>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
In modal code
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
name="nGiaSanPham">
</div>
</form>
</div>
And an Javascript code like this:
function editProductModal() {
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("th").each(function () {
document.getElementById("iMaSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cTenSanPham").each(function () {
document.getElementById("iTenSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cGiaSanPham").each(function () {
document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
});
});
}
I want when I click the button 'Chỉnh sửa' on any row, a modal will open and fill data from this row into this modal (the modal of bootstrap 4). I can edit on this modal, then I press a button to pass updated data to table. How to do it in function editProductModal() in file JS. Thank you so much
var $currentEditRow;
$(document).on("click", ".edit", function() {
$currentEditRow = $(this).parents("tr");
editProductModal($(this).parents("tr"));
});
function editProductModal(row) {
document.getElementById("iMaSanPham").value = $(row).find("th").text();
document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text();
document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, ''));
}
function update() {
$currentEditRow.find("th").text(document.getElementById("iMaSanPham").value);
$currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value);
$currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value);
$('#exampleModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="update()">Save</button>
</div>
</div>
</div>
</div>
When editing the current tr row, store the dom of the current row, so you can determine which line to update to in the modal.
You can try to update the row data in my code snippet.
You are improperly mixing inline onclick and jQuery click event listeners together.
Remove the function and the onclick and just use the jQuery code inside the function by itself to manage the event
You also don't need an each loop to access the elements within the row.
Simplified version:
$(document).on("click", ".edit", function() {
var $row = $(this).closest('tr'),
thText = $row.find('th').text(),
cTenSanPham = $row.find('.cTenSanPham').text(),
cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, '');
$('#iMaSanPham').val(thText);
$('#iTenSanPham').val(cTenSanPham);
$('#iGiaSanPham').val(cGiaSanPham);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
<tr>
<th>66</th>
<td class="cTenSanPham">Another Item</td>
<td class="cGiaSanPham">99.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Modal</h3>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
I am using an ajax code that inserts data into the database using modal however, the ajax.reload doesn't work because of some problems. I used the console and network tab of the chrome to see what is the error. It seems that the value for my ajax data is NULL. I Hope someone can help me.
Screenshots of the error from console
Screenshot from network
Screenshot of null values
Ajax code and Controller function
$('#newConsigneeSubmit').on("click", function(){
var supp_code = $("input[name=supp_code]").val();
var address1 = $("input[name=address1]").val();
var address2 = $("input[name=address2]").val();
var country = $("input[name=country] ").val();
var description = $("input[name=description]").val();
var tel_num = $("input[name=tel_num]").val();
var fax_num = $("input[name=fax_num]").val();
var contact_person = $("input[name=contact_person]").val();
var email = $("input[name=email]").val();
var consol_agent = $("input[name=consol_agent]").val();
var disc1 = $("input[name=disc1]").val();
var disc2 = $("input[name=disc2]").val();
var disc3 = $("input[name=disc3]").val();
var disc4 = $("input[name=disc4]").val();
var disc5 = $("input[name=disc5]").val();
var last_transaction = $("input[name=last_transaction]").val();
var old_supplier = $("input[name=old_supplier]").val();
var sfm_table = $('#datatable-buttons').DataTable();
$.ajax({
url:'<?php echo base_url(); ?>SFM/insert',
type:'post',
data:{
'supp_code' : supp_code , 'address1' : address1 , 'address2' : address2 ,'country' : country ,
'description' : description ,'tel_num' : tel_num , 'fax_num' : fax_num ,'contact_person' : contact_person ,
'email' : email , 'consol_agent' : consol_agent , 'disc1' : disc1 ,'disc2' : disc2
, 'disc3' : disc3 ,'disc4' : disc4 , 'disc5' : disc5 ,'last_transaction' : last_transaction ,'old_supplier' : old_supplier
},
success: function(data) {
if(data) {
sfm_table.ajax.reload()
$("#sfm_modal").modal('hide');
swal("Data Inserted", {
icon: "success"
});
} else {
swal("Error", {
icon: "error"
});
}
}
});
});
function insert()
{
$data1 = array(
'SUPP_CODE'=> $this->input->post('supp_code'),
'ADDRESS'=> $this->input->post('address1'),
'ADDRESS2'=> $this->input->post('address2'),
'COUNTRY'=> $this->input->post('country'),
'DESCRIPTION'=> $this->input->post('description'),
'TEL_NO'=> $this->input->post('tel_num'),
'FAX_NO'=> $this->input->post('fax_num'),
'CONTACT'=> $this->input->post('contact_person'),
'EMAIL'=> $this->input->post('email'),
'CONS_AGENT'=> $this->input->post('consol_agent'),
'DISC1'=> $this->input->post('disc1'),
'DISC2'=> $this->input->post('disc2'),
'DISC3'=> $this->input->post('disc3'),
'DISC4'=> $this->input->post('disc4'),
'DISC5'=> $this->input->post('disc5'),
'LAST_TRANS'=> $this->input->post('last_transaction'),
'SUPP_CODE2'=> $this->input->post('old_supplier')
);
$insertReturn = $this->system_model->insert('fo_supp', $data1);
echo json_encode($insertReturn);
}
SFM_VIEW
<!-- page content -->
<div class="right_col" role="main">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Supplier Master File
<small></small>
</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Settings 1
</a>
</li>
<li>
<a href="#">Settings 2
</a>
</li>
</ul>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div style="overflow: hidden;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sfm_modal" style="float: right;">
<i class="material-icons"></i>
<span>Add New Data</span>
</button>
</div>
<table id="datatable-buttons" name="sfm_table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Supplier Code
</th>
<th>Address
</th>
<th>Country
</th>
<th>Description
</th>
<th>Telephone Number
</th>
<th>Fax Number
</th>
<th>Contact Person
</th>
<th>Email
</th>
<th>Actions
</th>
<th>Consolidating Agent
</th>
<th>Discount 1
</th>
<th>Discount 2
</th>
<th>Discount 3
</th>
<th>Discount 4
</th>
<th>Discount 5
</th>
<th>Last Transaction
</th>
<th>Old Supplier
</th>
</tr>
</thead>
<tbody>
<?php if(!empty($fo_supp)): ?>
<?php foreach($fo_supp as $supp): ?>
<tr>
<td>
<?=$supp->SUPP_CODE?>
</td>
<td>
<?=$supp->ADDRESS." ".$supp->ADDRESS2?>
</td>
<td>
<?=$supp->COUNTRY?>
</td>
<td>
<?=$supp->DESCRIPTION?>
</td>
<td>
<?=$supp->TEL_NO?>
</td>
<td>
<?=$supp->FAX_NO?>
</td>
<td>
<?=$supp->CONTACT?>
</td>
<td>
<?=$supp->EMAIL?>
</td>
<td>
<a href="#sfm_modal_edit" data-target="#sfm_modal_edit" id='<?=$supp->SUPP_CODE?>' class="edit" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
</a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</a>
</td>
<td>
<?=$supp->CONS_AGENT?>
</td>
<td>
<?=$supp->DISC1?>
</td>
<td>
<?=$supp->DISC2?>
</td>
<td>
<?=$supp->DISC3?>
</td>
<td>
<?=$supp->DISC4?>
</td>
<td>
<?=$supp->DISC5?>
</td>
<td>
<?= $supp->LAST_TRANS ?>
</td>
<td>
<?=$supp->SUPP_CODE2?>
</td>
</tr>
<?php endforeach;?>
<?php else: ?>
<tr>
<?php for($i = 0; $i < 10; $i++): ?>
<td>
<span class="text-danger"> Not Available </span>
</td>
<?php endfor; ?>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<!--MODAL HERE-->
<div class="modal fade" name="sfm_modal " id="sfm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Create New Supplier
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form id="form1" class="form-horizontal">
<div class="form-group form-group-sm">
<!-- left column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Supplier Code</label>
<span class="label label-default">Supplier Code</span>
<div class="col-sm-10">
<input type="text" name="supp_code" id="supp_code" class="form-control" data-inputmask="'mask': '999999'">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Address</label>
<span class="label label-default">Address</span>
<div class="col-sm-10">
<input type="text" name="address1" class="form-control col-md-10" id="address1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Address 2</label>
<span class="label label-default">Address 2</span>
<div class="col-sm-10">
<input type="text" name="address2" class="form-control col-md-10" id="address2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Country</label>
<span class="label label-default">Country</span>
<div class="col-sm-10">
<input type="text" name="country" id="country" class="form-control col-md-10" />
</div>
</div>
<!-- <div class="form-group"><label for="new_zip" class="col-sm-2 control-label bg-danger" style = "visibility: hidden;">Description</label><span class="label label-default" >Supplier Code</span><div class="col-sm-3"><input type="text" class="form-control" id="new_zip" placeholder=""></div><div class="col-sm-7"><label for="new_zip_detail" class="sr-only" style = "visibility: hidden;">City, State Country</label><input type="text" class="form-control" id="new_zip_detail" placeholder="City, State Country" disabled=""></div></div> -->
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Description</label>
<span class="label label-default">Description</span>
<div class="col-sm-10">
<input type="text" name="description" class="form-control" id="description" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Telephone Number</label>
<span class="label label-default">Telephone Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="tel_num" id="tel_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Fax Number</label>
<span class="label label-default">Fax Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="fax_num" id="fax_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Consolidating Agent</label>
<span class="label label-default">Consolidating Agent</span>
<div class="col-sm-10">
<input type="text" name="consol_agent" class="form-control" id="consol_agent" placeholder="">
</div>
</div>
</div>
<!-- right column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Email</label>
<span class="label label-default">Email</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Contact Person</label>
<span class="label label-default">Contact Person</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="contact_person" id="contact_person" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Discount 1</label>
<span class="label label-default">Discount 1</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc1" id="disc1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Discount 2</label>
<span class="label label-default">Discount 2</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc2" id="disc2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Discount 3</label>
<span class="label label-default">Discount 3</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc3" id="disc3" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 4</label>
<span class="label label-default">Discount 4</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc4" id="disc4" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 5</label>
<span class="label label-default">Discount 5</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc5" id="disc5" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Last Transaction</label>
<span class="label label-default">Last Transaction</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="last_transaction" id="last_transaction" data-inputmask="'mask': '9999/99/99'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Old Supplier</label>
<span class="label label-default">Old Supplier</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="old_supplier" id="old_supplier" placeholder="">
</div>
</div>
</div>
</div>
</div>
<!-- End main input boxes, starting a new "row" -->
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" id="newConsigneeReset">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="newConsigneeSubmit">Add</button>
</div>
<!-- End Modal Footer -->
</form>
</div>
<!-- End modal body div -->
</div>
<!-- End modal content div -->
</div>
<!-- End modal dialog div -->
</div>
<!-- End modal div -->
</div>
<!-- END DIV -->
</div>
</div>
</div>
<!-- /page content -->
Errors 01 - Close </form> before the div
</form>
</div> <--- THIS DIV
remove id from <button> and use only for <form>
# change button type
<button type="submit" class="btn btn-primary">Add</button>
# use below form ID
<form id="form1" class="form-horizontal">
In JS
#change
$('#newConsigneeSubmit').on("click", function(){
# to this
$("#form1").submit(function (e) {
#change
var supp_code = $("input[name=supp_code]").val();
# to this
var supp_code = $('#supp_code').val();
FYI: Before you insert check all the data has passed to your controller. (print_r($arrayName);die;)
Hi I have been trying to work out on how to pass table data which has multiple rows obviously. I'm having a hard time since I haven't any idea how to post such a table. So basically, I 'm trying to register an employer to the system, which he or she should add their qualification details through a modal. After that the details they fill gets saved in the html table(view). Finally after the other details are filled all the details including what's in the table should pass through angular controller via service to the database.
Here's my controller.js
This is the function that sends data.
$scope.register = function (isValid) {
console.log($scope.records);
if (isValid) {
var regidetail = {
fname: $scope.registDetails.fname,
lname: $scope.registDetails.lname,
dob: $scope.registDetails.dob,
nic: $scope.registDetails.nic,
Gender: $scope.registDetails.Gender,
email: $scope.registDetails.email,
tel: $scope.registDetails.tel,
id: $scope.registDetails.department,
Designation: $scope.registDetails.Designation,
doj: $scope.registDetails.doj,
addr1: $scope.registDetails.addr1,
addr2: $scope.registDetails.addr2,
addr3: $scope.registDetails.addr3,
addr4: $scope.registDetails.addr4,
qualification_type: $scope.registDetails.qualification_type,
qualification: $scope.registDetails.qualification,
inputdesc: $scope.registDetails.inputdesc,
inputUni: $scope.registDetails.inputUni,
inputDuration: $scope.registDetails.inputDuration,
datepickerDOA: $scope.registDetails.datepickerDOA
};
console.log(regidetail);
UserService.Register(regidetail, function (res) {
EMPID = (res.data);
console.log(res.data);
}
}
}
This is the html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Qualifications</label>
<div class="col-lg-10 col-md-9 ">
<table id="basic-datatables" name="datatables" class="table table-striped table-bordered table-hover" cellspacing="0" width="100">
<thead>
<tr>
<th>Qualification Type</th>
<th>Qualification level</th>
<th>Description</th>
<th>Univercity</th>
<th>Duration</th>
<th>Date of awarded</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(recordIndex, record) in records" style="text-align:center">
<td ng-model="registDetails.qualification_type">{{record.qualification_type}}</td>
<td ng-model="registDetails.qualification">{{record.qualification}}</td>
<td ng-model="registDetails.inputdesc">{{record.inputdesc}}</td>
<td ng-model="registDetails.inputUni">{{record.inputUni}}</td>
<td ng-model="registDetails.inputDuration">{{record.inputDuration}}</td>
<td ng-model="registDetails.datepickerDOA">{{record.datepickerDOA}}</td>
<td><i style="color:crimson" class="fa fa-trash-o"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-10 col-md-9 col-md-offset-3 col-lg-offset-2">
<p data-placement="left" data-toggle="tooltip" title="Add a Qualification">
<button data-toggle="modal" data-target="#addQualificationsModel" class="btn btn-success pull-left" id="btnNewrow" type="button" style="text-align:justify" ng-click="login(frmLogin.$valid)"><span class="fa fa-plus" style="vertical-align:middle; display:inline-block"></span></button>
</p>
</div>
<!--Modal-->
<div class="modal fade" id="addQualificationsModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Qualification Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification Type</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Education" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Professional" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification Level</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type=='prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputdesc">Description</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputdesc" class="form-control" id="inputdesc" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputUni">University</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputUni" class="form-control" id="inputUni" placeholder="University" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputDuration">duration</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputDuration" class="form-control" id="inputDuration" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="datepickerDOA">Date Of Awarded</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control datepicker" type="text" ng-model="QualificationDetails.datepickerDOA" id="datepickerDOA">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave" type="button" ng-click="save(QualificationDetails)" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal .End-->
</div>
Any help would be appreciated.
:)
Do
var regidetail = angular.toJson({
<!-- all the content here -->
};
And then
$http.({
method : "POST",
url : "your API server URL",
data : regidetail,
}).then(function (response){
//success callback
alert("hip hip hurray!");
}, function (response){
// error callback
alert("Enter data correctly");
});
So I'm trying to show the modal template when a row is selected on the table.
The problem I am having is that when a row is clicked, a black shadowed line appears which is about 2px thick. It's supposed to be the modal I'm guessing but the modal isn't actually there in full with it's content.
Any ideas where I'm going wrong?
Code for HTML Index:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div ng-app="myTable" ng-controller="tableCtrl">
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
<tr ng-repeat="person in people" ng-click="changeRowData(person)">
<td>
{{person.FirstName}}
</td>
<td>
{{person.LastName}}
</td>
<td>
{{person.Age}}
</td>
<td>
{{person.Nickname}}
</td>
</tr>
</table>
</div>
<div class="centered">
<button type="button" class="btn btn-primary" data-ng-click="addEntry()">Add New Entry</button>
</div>
<div id="searchFirstName">
<div class="panel panel-primary">
<div class="panel-heading">Change Table Background Colour: </div>
<div class="panel-body">
<div id"buttonAndColours">
<button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
<div class="colours" style="background-color:red;"></div>
<div class="colours" style="background-color:yellow;"></div>
<div class="colours" style="background-color:lightBlue;"></div>
<div class="colours" style="background-color:green;"></div>
<div class="colours" style="background-color:white;"></div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Search For First Name in Table:</div>
<div class="panel-body">
<p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
<br/>
<table class="table table-condensed">
<tr>
<th>First Names to be Searched For:</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ person.FirstName }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Code for Modal Template:
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
Code for Javascript file:
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxxxxx.json").success(function(response){
$scope.people = response.People;
});
$scope.changeRowData = function(changeableData) {
var modalTemplateInstance = $uibModal.open({
templateUrl: 'modalTemplate.html',
controller: function($scope) {
}
});
}
});
Does your browser console output any errors (press f12 or right click and select "inspect element", and navigate to console).
Also in your browsers dev tools, open the network pane and make sure it's recording. Then when you trigger your modal, is it successfully loading your modal template file?
Okay, found the solution alone. :)
Realised that the modal template means that some of the tags in the modal is not needed where they'd be needed when hard coding the modal into the html page.
Redited the modalTemplate file to:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>
I use Laravel 5, Blade template for build interface. I want to take specific row hidden field value.
This is my data table code.
<table>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details   </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
I want to when click my link in row(click hyper-link ) call this #myModel in same page below code and I want accesses click row hidden field value in this code.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
***//access hidden field***
{{$fees[***put hidden field value***]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Full Code:
#extends('layouts.app')
#section('slide_bar')
#include('layouts.master_entry_slide_bar')
#endsection
#section('content')
<section class="content-header">
<h1>Fee<small> Details</small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details   </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
{{$fees[0]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("fd_menu");
document.getElementById("fd_menu").className = "active";
</script>
#endsection
You can put input with readonly attribute true and apply some style to it ( border:none; ) to remove input appearance!
After that make JavaScript function in onclick of href tag get value of that inputs! you can open modal with JavaScript too!
function test(){
$('#myModal').modal('toggle');
$('#rowValue').empty().append($("#inputID").val());
}
.inputStyle{
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr>
<td><a onclick="test()" ><input type="text" readonly="true" class="inputStyle" id="inputID" value="your value " /> </a></td>
</tr>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<p id="rowValue"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>