We Keep Coding

jQuery: Bootstrap Modal not showing

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.

How do I put data to my second select element via AJAX?

I need help! I have a button where whenever it's clicked, a modal pops out. This is my modal:
modal_newDelivery.php
<div class="modal fade" id="modal_new_delivery" tabindex="-1" role="dialog" aria-labelledby="newProductFormLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newProductFormLabel">New Delivery</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="container">
<div class="form-group row">
<div class="col-6">
<label for="txt_drnumber">DR#</label>
<input class="form-control" type="text" id="txt_drnumber">
</div>
</div>
<div class="form-group row">
<div class="col-6">
<label for="txt_supplier">Supplier</label>
<input class="form-control" type="text" id="txt_supplier">
</div>
</div>
<table class="table table-bordered" id="table_new_delivery">
<thead>
<tr>
<th>ITEM</th>
<th colspan="2">QTY(pcs)</th>
</tr>
</thead>
<tbody>
<tr>
<td><select class="form-control" id="select_products"></select></td>
<td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td>
<td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td>
</tr>
</tbody>
</table>
<br>
<button type="button" class="btn btn-info" style="width:100%;" onclick="newrow()">ADD A NEW ROW</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="clear()">Clear</button>
<button type="button" class="btn btn-primary" onclick="">Save</button>
</div>
</div>
</div>
</div>
As soon as that modal pops out, this AJAX code is called:
function loadselectproducts(){
$.ajax({
url: 'ajax.php',
method: 'POST',
data: {
key: 'inventory_delivery_loadproducts'
},success: function(response){
$('#select_products').html(response);
},error: function(xhr,ajaxOptions,thrownError){
console.log(xhr);
}
});
}
In my modal. There's a table. one of the td is a select.
WHAT HAPPENS IS THIS:
When you click the ADD A NEW ROW button, it will add a row with a select element on it. BUT the newly-added select element doesn't have any data unlike to the first select element.
THIS IS THE CODE WHEN THE ADD A NEW ROW BUTTON IS CLICKED:
var row = '<tr><td><select class="form-control" id="select_products"></select></td><td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td><td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td></tr>';
function newrow(){
$('#table_new_delivery tbody').append(row);
console.log(row);
loadselectproducts();
}
Yes, a new row is added, BUT the select element of the newly-added row doesn't have any data. I want to have the same data of my first select element to my newly-added select element.
Can you please help? I know this is a newbie problem.
Thank you,
Carl

how can i write a program for checkbox clicked automatically with the help of database and displayed in bootstrap modal page

hai iam trying to write a program for checkbox clicked automatically with the help of database....i am writing the code like this i.e., i am writing jsp project when i am clicked the user page it display the users details in the table format. in that it has two icons one is update and another one is delete...
when i am clicked on update its open a bootstrap modal page and display the user details in that i am using a checkbox tag..when the user is active its checkbox clicked automatically...but iam getting unclicked how can in resolve this...
<div class="table-responsive">
<table class="table table-hover table-centered m-0">
<thead>
<tr>
<th>Rolename</th>
<th>Status</th>
<th>Created On</th>
<th>Modified On</th>
<th>Status1</th>
<th colspan="2">Options</th>
</tr>
</thead>
<%
int status=0;
Connection con=DriverManager.getConnection(connectionUrl);
//Statement st = con.createStatement();
PreparedStatement pstmt=null;
pstmt=con.prepareStatement("select * from m_Roles "); //sql select query
ResultSet rs1=pstmt.executeQuery(); //execute query and set in ResultSet object "rs"
%>
<tbody>
<%
while(rs1.next())
{
status=rs1.getInt("IsActive");
%>
<tr id="<%=rs1.getString("RoleID")%>">
<th><%=rs1.getString("RoleName")%></th>
<th><%=status%></th>
<td><%=rs1.getString("CreatedOn")%></td>
<td><%=rs1.getString("ModifiedOn")%></td>
<!-- <td><input type="checkbox" id="" disabled="" name="active" parsley-trigger="change" <% if(status==1) { %> checked="checked" <% } %> ></td>-->
<td><input type="text" id="" disabled="" name="active"<% if(status==1) { %> value="Active" <% }else{%>value="Inactive"<%} %> > </td>
<td align="">
<!-- Update Icon -->
<a href="#editEmployeeModal" class="edit" data-toggle="modal">
<i class="mdi mdi-account-edit update" data-toggle="tooltip"
data-rid="<%=rs1.getString("RoleID")%>"
data-rname="<%=rs1.getString("RoleName")%>"
data-check="<%=status%>"
title="Edit"></i>
</a>
</td>
<!-- Delete Icon Table -->
<td>
<a href="#deleteEmployeeModal" class="delete" data-rid="<%=rs1.getString("RoleID")%>" data-toggle="modal">
<i class="mdi mdi-delete delete" data-toggle="tooltip"
title="Delete"></i></a>
</div>
</a>
</td>
<div id="editEmployeeModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mt-0">Edit Roles</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="update_form">
<div class="row">
<input type="hidden" id="rid_u" name="id" parsley-trigger="change" autocomplete="off" required placeholder="Enter First Name" class="form-control" id="firstName">
<div class="col-md-9">
<div class="form-group row">
<label class="col-md-4 control-label">Role Name<span class="text-danger">*</span></label>
<div class="col-md-7">
<input type="text" id="rname_u" name="rname" parsley-trigger="change" autocomplete="off" required placeholder="Enter First Name" class="form-control" id="firstName">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Active<span class="text-danger">*</span></label>
<div class="col-md-7">
<input type="text" name="check_box" id="check_u"/>
#if(check_u==1)
{
<input type="checkbox" id="act_u" checked="checked" name="active" parsley-trigger="change" >
}
else
{
<input type="checkbox" id="act_u" name="active" parsley-trigger="change" >
}
</div>
</div>
<div class="form-group text-right mb-0">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</div>
</div>
</form>
````
this is ajax code
<script>
$(document).on("click", ".delete", function()
{
var uid=$(this).attr("data-id");
$('#id_d').val(uid);
});
$(document).on('click','#delete',function(e) {
var data = $("#delete_form").serialize();
$.ajax({
data:data,
url: "deleterole.jsp",
//data:"uid="+id,
method: "POST",//HTTP method.
success: function()
{
//alert('Data deleted successfully !');
location.reload();
//setInterval('location.reload()',2000);
}
});
});
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-rid");
var rname=$(this).attr("data-rname");
var check_box=$(this).attr("data-check");
$('#rid_u').val(id);
$('#rname_u').val(rname);
$('#check_u').val(check_box);
});
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
type: "post",
url: "updaterole.jsp",
success: function()
{
alert('Data updated successfully !');
location.reload();
}
});
});
</script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#act_u").change(function()
{
// var t=document.getElementById('check_u').value;
//if("#check_u").
if($(this).prop("checked") == true)
{
$("#check_u").val("1");
}
else if($(this).prop("checked") == false)
{
$("#check_u").val("0");
}
});
});
</script>

You can directly put your #if(check_u==1) {.. inside your jquery code and only leave <input type="checkbox" id="act_u" name="active" parsley-trigger="change"> in modal. Also ,your jquery code will look like below :
$(document).on('click', '.update', function(e) {
var id = $(this).attr("data-rid");
var rname = $(this).attr("data-rname");
var check_box = $(this).attr("data-check");
$('#rid_u').val(id);
$('#rname_u').val(rname);
$('#check_u').val(check_box);
//checking value of checkbox
if (check_box == 1) {
//checked
$('#act_u').prop('checked', true);
} else {
//unchecked
$('#act_u').prop('checked', false);
}
});

DataTables get ID

I'm working with DataTables and CodeIgniter, and Right now I want to be able to edit any row in my table, and I'm already doing it! But I'm only updating the row that has the ID = 1, that's because in my controller I defined this :
$this->db->set('NameContact', $_POST['Name']);
$this->db->set('NumberContact', $_POST['Number']);
$this->db->where('IdContact', 1);
$this->db->update('contacts');
As you can see I need to get the id of the selected row in the table to pass it with the $_POST method. But I can't seem to find a right way to do it via JS. Any help pls?
My HTML:
{Contacts}
<tr>
<td id="{IdContact}">{IdContact}</td>
<td>{NameContact}</td>
<td>{NumberContact}</td>
<td><a data-toggle="modal" data-target="#EditNumber"> <i class="fa fa-edit"></i></a></td>
</tr>
{/Contacts}
My JS:
function EditPhoneNumber(){
var Name = document.getElementById("EditName").value;
var Number = document.getElementById("EditNumber").value;
console.log(Name);
console.log(Number);
jQuery.ajax({
type: "POST",
url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
data: {Name: Name, Number: Number},
success: function (response) {
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}
Here is my Modal:
<div id="EditNumber" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Contacto</h4>
</div>
<div class="modal-body">
<input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
<input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
</div>
</div>

Pass data-id into your html tag like below and on tag click you need to manage function instead of opening modal directly.Look at the below code.
HTML
{Contacts}
<tr>
<td id="{IdContact}">{IdContact}</td>
<td>{NameContact}</td>
<td>{NumberContact}</td>
<td> <i class="fa fa-edit"></i></td>
</tr>
{/Contacts}
In your Modal
<div id="EditNumber" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Contacto</h4>
</div>
<div class="modal-body">
<input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
<input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
<input type="hidden" name="NumberContactId" id="EditId">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
</div>
</div>
</div>
JS
function editNumberModal(obj){
vat id = jQuery(obj).attr('data-id');
jQuery('#EditNumber').modal();
}
function EditPhoneNumber(){
var Name = document.getElementById("EditName").value;
var Number = document.getElementById("EditNumber").value;
var Id = document.getElementById("EditId").value;
console.log(Name);
console.log(Number);
jQuery.ajax({
type: "POST",
url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
data: {Name: Name, Number: Number, Id:Id},
success: function (response) {
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}

Displaying php echo $row data into bootstrap modal form

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;
}