I currently have the following datatable to display my list of contacts from the database. Each row, I have also insert a "Edit" & "Delete" button and have the data-id="<?=$row['id']?>" passed for the jQuery to handle when the button is clicked. When the button is clicked, through ajax, I will get the data from getcontact.php and set it to the respective input in the modal form, however the data does not seem to be displaying in the form values. May I know where did I go wrong?
tables.php
<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
<th>Gender</th>
<th>Date Registered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?=$row['id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['company']?></td>
<td><?=$row['position']?></td>
<td><?=$row['phone']?></td>
<td><?=$row['email']?></td>
<td><?=$row['gender']?></td>
<td><?=$row['dateregistered']?></td>
<td>
<!-- Edit Button trigger modal -->
<button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
Edit
</button>
</td>
<td>
<!-- Delete Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
Delete
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Modal (in the same page as tables.php)
<!-- Edit Contact Modal -->
<div class="modal fade" id="editModal" 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">Edit Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="editForm" role="form">
<div class="form-group animated fadeIn">
<label for="nameInput" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="companyInput" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="posInput" class="col-sm-2 control-label">Position</label>
<div class="col-sm-10">
<input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="emailInput" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="genderInput" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editContact" type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
jQuery
$("#editButton").click(function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$.ajax({
url: 'getcontact.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json',
success: function(response){
$("#nameInput").val(result[0]);
$("#companyInput").val(result[1]);
$("#posInput").val(result[2]);
$("#contactInput").val(result[3]);
$("#emailInput").val(result[4]);
$("#genderInput").val(result[5]);
}
});
});
getcontact.php
<?php
include("dbconnect.php");
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
$rows = array();
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
echo json_encode($rows);
?>
1 - you are sending a encoded json from your php file and use it directly from you javascript code which is invalid so to speak,
2 - you are sending the data object to php using ajax wrongly, it should be as follows instead data: {id: uid},
3 - you are declare the wrong data-id , it should be as follows: var uid = $(this).attr('data-id');
you need to decode your json response as follows:
var uid = $(this).attr('data-id');
$.ajax({
url: 'getcontact.php',
method: 'POST',
data: {id: uid},
success: function(response){
var result = JSON && JSON.parse(response) || $.parseJSON(response);
...
// rest of your code
...
Update
and you have an issue in this part:
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
to add the whole array you need to do as follows:
while($row = mysqli_fetch_array($result)){
$rows[] = $row;
}
Related
I want to my grant my Admin the priviledges to add and edit user. Clicking the Add button pops up a modal which os userModal and its working perfectly - I send a request to user_action.php (where my PHP and SQL statements are) and it creates a new user.
When the Admin clicks on the Update button, i want the userModal to pop up again, but this time, populated with the username, email and usertype of the user that is to be edited (The modal-title changes from Add User to Edit User and the btn-action changes to 'Edit`). This is not working - the modal doesn't show.
What is the problem?
I have attached the html to my users.php and the jQuery. I have also attached the screenshot of the UI of users.php in case it can be of help.
HTML
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
include("./database/dbnew.php");
if($_SESSION['usertype'] != 'Admin')
{
header("location:index.php");
}
include("./templates/header.php");
?>
<span id="alert_action"></span>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-6">
<h3 class="panel-title">User List</h3>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="right">
<button type="button" name="add" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-success btn-xs">Add</button>
</div>
</div>
<div class="clear:both"></div>
</div>
<div class="panel-body">
<div class="row"><div class="col-sm-12 table-responsive">
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Email</th>
<th>Name</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-plus"></i> Add User</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter User Name</label>
<input type="text" name="username" id="username" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email</label>
<input type="email" name="email" id="email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="password" id="password" class="form-control" required />
</div>
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" name="usertype" id="usertype" required>
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">Other</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-info" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
jQuery
<script>
$(document).ready(function(){
$('#add_button').click(function(){
$('#user_form')[0].reset();
$('.modal-title').html("<i class='fa fa-plus'></i> Add User");
$('#action').val("Add");
$('#btn_action').val("Add");
});
var userdataTable = $('#user_data').DataTable({
"processing": true,
"serverSide": true,
"order": [],
"ajax":{
url:"user_fetch.php",
type:"POST"
},
"columnDefs":[
{
"target":[4,5],
"orderable":false
}
],
"pageLength": 25
});
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
$('#action').attr('disabled','disabled');
var form_data = $(this).serialize();
$.ajax({
url:"user_action.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled', false);
userdataTable.ajax.reload();
}
})
});
$(document).on('click', '.update', function(){
var id = $(this).attr("id");//user_id
var btn_action = 'fetch_single';
$.ajax({
url:"user_action.php",
method:"POST",
data:{id:id, btn_action:btn_action},//user_id
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#username').val(data.username);
$('#email').val(data.email);
$('#usertype').val(data.usertype);
$('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit User");
$('#id').val(id);//user_id
$('#action').val('Edit');
$('#btn_action').val('Edit');
$('#password').attr('required', false);
$('#usertype').attr('required', false);
}
})
});
});
</script>
Screenshot
users.php UI
Any form of assistance will be appreciated.
I'm trying to fetch data into fields from a table to edit record on database
I use code below, but in Chrome Console i have a js error: $tr is not definited
In fact seem this line have a problem: $tr = $(this).closest('tr');
When I open modal i cant get data in fields.
Any help to fix this?
TXS
TABLE
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col"> ID </th>
<th scope="col"> Message</th>
<th scope="col"> Button</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $opportunity_follow_up_id; ?></td>
<td><?php echo $opportunity_follow_up_message; ?></td>
<td><button type="button" class="btn btn-dark edit_followup">
Edit Follow-up</button>
</td>
</tr>
</tbody>
</table>
JS
$(document).ready(function(){
$(document).on('click', '.edit_followup', function(){
$('#edit_followup').modal('show');
alert ('working!');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#opportunity_follow_up_message').val(data[1]);
});
});
MODAL
<div class="modal fade text-left modal-borderless" id="edit_followup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel33">New Follow-up </h4>
</div>
<form action="action/record_opportunities_follow_up.php" method="post" novalidate>
<input type="hidden" id ="opportunity_follow_up_opportunities_id" name="opportunity_follow_up_opportunities_id" value="<?php echo $opportunities_id; ?>" />
<div class="modal-body">
<div class="form-group">
<div class="controls">
<label>Follow-up Message</label>
<textarea data-length=250 class="form-control char-textarea" id="opportunity_follow_up_message" name="opportunity_follow_up_message" rows="3" placeholder="*" required data-validation-required-message="Required"></textarea>
<small class="counter-value float-right"><span class="char-count">0</span> / 250 </small>
</div>
</div>
<input type="hidden" name="update_id" id="update_id">
<div class="form-group">
<div class="controls">
<label>Next follow-up Date</label>
<input type="text" id ="opportunity_follow_up_message" name="opportunity_follow_up_message" value="" placeholder="dd-mm-aaaa" class="form-control">
</div>
</div>
<div class="form-group">
<div class="controls">
<label>Next follow-up Time</label>
<input type="text" id ="opportunity_follow_up_next_time" name="opportunity_follow_up_next_time" value="" placeholder="hh:mm:ss" class="form-control" data-mask="00:00:00">
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input bg-primary" name="opportunity_follow_up_completed" id="opportunity_follow_up_completed" value="1">
<label class="custom-control-label" for="opportunity_follow_up_completed">Mark follow-up as complete</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" value="save" class="btn btn-primary ml-1 block-page">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">UPDATE</span>
</button>
</div>
</form>
</div>
It seems like you have use strict in your file. And it doesn't allow you to declare variables without var, let or const
So declare your variable
Either by var, let or const
In your case you are not changing variable value so const is more preferable.
Like
const $tr = $(this).closest('tr');
*I am beginner so spare me. I am using code igniter. I have a table and in this table I have a button edit. When the edit button is clicked it shows a pop up modal. Main purpose of this is to update the specific row data like name password etc. That why i called modal pop up which displays a form where i want to show specific record so that i can edit that record and click update which will update the record. I just want to show the specific record as each row have its own edit button. i can change the record through php. but need to display it.
This is my modal popup and that table where the data from database is displayed.
Someone please tell what is the code to do this work. I want full ajax code so anyone who have a kind heart please write that code so that i can enter into my website. Please help. this is all i know and i have shared
Code:
<div class="modal fade bs-example-modal-lg" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel1">Update Current User</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="card">
<div class="card-header">
End User Info
</div>
<div class="card-body">
<form action="<?php echo base_url()."User_area/add_new_subusers"?>" method="post" id="newuserform" class="form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">First Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subufname" value="" name="subufname" placeholder="Enter First Name"></input>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Last Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" name="subulname" id="subulname" value="" placeholder="Enter Last Name"></input>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Email:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subuemail" name="subuemail" value="" placeholder="Enter Email"></input>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Password:</label>
<div class="col-md-7">
<input type="text" class="form-control" name="subupass" id="subupass" placeholder="New Password"></input>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Confirm Password:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subuconfirmpass" placeholder="Confirm New Password"></input>
</div>
</div>
</div>
<!--/span-->
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="createnewuser" value="Update" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div></div>
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<div class="table-responsive m-t-40">
<table id="myTable" class="table table-bordered table-striped">
<thead style="background: #37a000; color: #fff;">
<tr>
<th>Name</th>
<th>Email/Username</th>
<th>Password</th>
<th>User Role</th>
<th>Email Notification</th>
<th>Client Access</th>
<th>Action</th>
</tr>
</thead>
<!-- ******************************Displaying Data*************************************************************** -->
<tbody>
<?php
foreach($profle as $row): ?>
<tr>
<td><?echo $row['fname']?></td>
<td><?echo $row['email']?></td>
<td><?echo $row['password']?></td>
<td><?echo $row['user_role']?></td>
<td>***</td>
<td>***</td>
<td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2">edit</a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
Simple ajax for you . Hope it can help you
ajax script:
<script>
$(document).ready(function(){
$("#popup-button").click(function(event){
event.preventDefault();
var profle_id =$(this).children().val();
$.ajax({
url: "HERE FILE CONTROLLER",
type : 'get',
data: "id="+profle_id,
dataType : 'json',
success: function(result){ // result ='{ "fname":"John", "email":"abc#gmail", "password":"New York" , "user_role":"York" }';
$('#subufname').val(result['name']);
$('#subulname').val(result['email']);
$('#subuemail').val(result['password']);
$('#subupass').val(result['user_role']);
}
});
});
});
</script>
edit table :
<tr>
<td><?echo $row['fname']?></td>
<td><?echo $row['email']?></td>
<td><?echo $row['password']?></td>
<td><?echo $row['user_role']?></td>
<td>***</td>
<td>***</td>
<td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2" id = "popup-button">edit<input type="hidden" value ="$row['id']" ></a></td>
</tr>
My view Page :
<form id="myForm" >
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control datepicker pull-right" name="from_date" placeholder="From"> // want this value in my modal box
</div>
</div>
<div class="col-md-6">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control datepicker pull-right" name="to_date" placeholder="To"> // want this value in my modal box
</div>
</div>
<div class="col-md-12">
<br/>
<center><button class="btn btn-success" onclick="search_sale_return()"><i class="glyphicon glyphicon-plus"></i> Create New Stock</button></center> // on this click call the modal
</div>
</form>
JavaScript
<!-- Search sale return -->
function search_sale_return()
{
save_method = 'sale_return';
$('#form_sale_return')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('PharmacyController/search_sale_return')?>/" + 1, // bring value from database via controller in json_encode form
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="ph_name"]').val(data.from_date);
$('#modal_sale_return').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Sale return'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Modal
<!-- Bootstrap Receptionist modal -->
<div class="modal fade" id="modal_sale_return" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Stock</h3>
</div>
<div class="modal-body form">
<form action="#" id="form_sale_return" class="form-horizontal">
<input type="hidden" value="" name="ph_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Medicine Name</label>
<div class="col-md-9">
<input name="ph_name" placeholder="Medicine Name" class="form-control" type="text">
<input name="ph_clinic_id" value="<?php echo $userinfo['id']; ?>" type="hidden">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="col-md-12">
<br/>
<table id="table_account" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Transaction Id</th>
<th>Patient Id</th>
<th>Ammount payed</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
This is my code , here i would like to get the value from form and than use it in my controller via javascript code and get json data and display it on my modal box
My problem :: on submit either i get link to controller or my modal (i wanna go to controller and from there i wanna go to modal in just one click button)
Fast example:
FORM:
<form id="myForm">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input type="text" class="form-control datepicker pull-right" name="from_date" placeholder="From" /> // want this value in my modal box
</div>
<div class="col-md-6">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input type="text" class="form-control datepicker pull-right" name="to_date" placeholder="To" /> // want this value in my modal box
</div>
</div>
<div class="col-md-12">
<br/>
<center>
<button class="btn btn-success" type="submit">
<i class="glyphicon glyphicon-plus">
</i> Create New Stock
</button>
</center>
// on this click call the modal
</div>
</form>
Modal:
<!-- Bootstrap Receptionist modal -->
<div class="modal fade" id="modal_sale_return" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Stock</h3>
</div>
<div class="modal-body form">
<form action="#" id="form_sale_return" class="form-horizontal">
<input type="hidden" value="" name="ph_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Medicine Name</label>
<div class="col-md-9">
<input name="ph_name" placeholder="Medicine Name" class="form-control" type="text">
<input name="ph_clinic_id" value="<?php echo $userinfo['id']; ?>" type="hidden">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="col-md-12">
<br/>
<table id="table_account" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Transaction Id</th>
<th>Patient Id</th>
<th>Ammount payed</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Script:
<script>
$(function() {
$('form#myForm').on('submit',function(event) {
//get value
event.preventDefault();
var from_date = $(this).find('input[name="from_date"]').val();
var to_date = $(this).find('input[name="to_date"]').val();
//get data $_GET
$.ajax({
url: "<?php echo site_url('PharmacyController/search_sale_return')?>", // bring value from database via controller in json_encode form
type: "GET",
data: {from_date: from_date,to_date:to_date},
dataType: "JSON",
success: function(data) {
var modal = $('#modal_sale_return').modal('show');
modal.find('[name="ph_name"]').val(data.name);
modal.find('.modal-title').text('Sale return');
modal.find('#form_sale_return').trigger('reset');
modal.find('.help-block').empty();
modal.find('.form-group').removeClass('has-error');
//etc
//save in modal
$(modal).on('submit','form#form_sale_return',function(e) {
e.preventDefault();
var form = $(this);
var ph_name = form.find('[name="ph_name"]').val();
//etc
$.ajax({
url: "<?php echo site_url('PharmacyController/save')?>",
type: "post",
data:{ph_name:ph_name},
success: function(response) {
alert('SUCCESS')
},
error: function(xhr) {
alert('ERROR');
}
});
});
$('#modal_sale_return').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Sale return'); // Set title to Bootstrap modal title
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});
});
});
</script>
I not tested... you try :)
Use
$('#modal_sale_return').modal();
to manually open the modal
Sending form data to controller :
$('#myForm').submit(function(e){
var ajaxForm = $(this)[0];
var formData = new FormData(ajaxForm);
$.ajax({
url: 'url',
type: 'POST',
data: formData,
success: function (result) {
},
error : function() {
}
});
});
I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php
Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.