I have a form that asks for 3 fields. Once the form is submitted, it should open a modal. In the modal a budget summary should show. The budget summary data is pulled from a database and the values are based on the 3 form fields entered. I can't seem to get the values to show up in the modal so the query will work but, the modal does open.
Here is the modal code:
<!-- Large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="myLargeModalLabel" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content p-4">
<h4 class="modal-title">Budget Summary</h4>For Account: <?php echo $account; ?>, Fund: <?php echo $_POST['fund2']; ?>, DeptID#: <?php echo $deptID; ?><br><em>The budgeted balance is an estimate.</em></h4>
<br> <?php if ($budget_summary->TotalRows == 0) { // Show if mysqli recordset empty ?>There is no data. Please try your search again.<?php } ?>
<?php if ($budget_summary->TotalRows > 0) { // Show if mysqli recordset empty ?><table width="100%" class="table table-responsive" border="0" cellspacing="2" cellpadding="6" class="display" id="example2">
<thead>
<tr>
<th align="left" valign="top">Budgeted Amount</th>
<th align="left" valign="top">Budgeted Balance</th>
<th align="left" valign="top">Program</th>
</tr>
</thead>
<tbody>
<?php
while(!$budget_summary->atEnd()) {
?><tr>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_amount")); ?></td>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_balance")); ?></td>
<td valign="top"><?php echo($budget_summary->getColumnVal("program")); ?></td>
</tr>
<?php
$budget_summary->moveNext();
}
$budget_summary->moveFirst(); //return RS to first record
?>
</tbody>
</table><?php } ?>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the sql query:
<?php
$budget_summary = new WA_MySQLi_RS("budget_summary",$sa,0);
$budget_summary->setQuery("SELECT * from budget_summary where fund = ? and account = ? and deptID = ?");
$budget_summary->bindParam("i", "".$_POST['fund '] ."", "-1"); //colname
$budget_summary->bindParam("i", "".$_POST['account'] ."", "-1"); //colname2
$budget_summary->bindParam("i", "".$_POST['funding_department'] ."", "-1"); //colname3
$budget_summary->execute();
?>
Here is the form:
<form method="POST" id="frm" name="frm">
<div class="row">
<div class="col mb-2">
<label for="account">Account:</label>
<select class="form-control" name="account2" id="account2" required>
<option></option>
<?php
while(!$accounts->atEnd()) { //dyn select
?>
<option value="<?php echo($accounts->getColumnVal("account")); ?>"><?php echo($accounts->getColumnVal("account")); ?>: <?php echo($accounts->getColumnVal("description")); ?></option>
<?php
$accounts->moveNext();
} //dyn select
$accounts->moveFirst();
?>
</select>
</div>
<div class="col mb-2">
<label for="fund">Fund:</label>
<select class="form-control" name="fund2" id="fund2" required>
<option></option>
<?php
while(!$funds->atEnd()) { //dyn select
?>
<option value="<?php echo($funds->getColumnVal("fundID")); ?>"><?php echo($funds->getColumnVal("fundID")); ?>: <?php echo($funds->getColumnVal("fund")); ?></option>
<?php
$funds->moveNext();
} //dyn select
$funds->moveFirst();
?>
</select>
</div>
</div>
<div class="row">
<div class="col mb-2">
<label for="fund">Department ID#:</label>
<input type="text" name="funding_department2" id="funding_department2" class="form-control input-md" autocomplete="off" value="" required>
</div></div>
<button type="submit" name="submit2" id="submit2" class="btn-lg btn-info">Search</button>
</form>
<script>
$(document).ready(function() {
$('#frm').on('submit', function(e){
$('#myLargeModalLabel').modal('show');
e.preventDefault();
});
});
</script>
Any tips would be appreciated on how to make this happen. I have been trying for days to figure it out. Thank you.
Do you insert the data directly into the databse or into fields in your modal?
Try the following:
Insert Data into the fields (if you have them), than try to print them with either PHP or Java to see if you recieve any values.
If you recieve them with java and can print them with java:
Your client gets the data that you insert but PHP is the serverside of you programm. You need to get the data with a php-statement.
Related
I have some edit modal and i want it to show the detail of DATA in bootsrap modal based on ID. Here is my index code:
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?> </h1>
<div class="row">
<div class="col-lg-6">
<?= form_error('menu', '<div class="alert alert-danger" role="alert">','</div>'); ?>
<?= $this->session->flashdata('message'); ?>
Tambah User
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($userRole as $u) : ?>
<tr>
<th scope="row"><?= $i ; ?></th>
<td><?= $u['name']; ?> </td>
<td><?= $u['email']; ?> </td>
<td><?= $u['password']; ?> </td>
<td><?= $u['role']; ?> </td>
<td>
<a href="" class="badge badge-success" data-toggle="modal"
data-target="#editRoleModal">edit</a>
<a href="<?= base_url('admin/deleteuser/') . $u['id'];?>"
class="badge badge-danger">delete</a>
</td>
</tr>
<?php $i++ ; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
And here is my modal :
<!-- Modal Edit-->
<div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<?= form_open_multipart('admin/usermanagement'); ?>
<div class="modal-body">
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="name" name="name" value="<?= $user['name']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="email" class="form-control" id="email" name="email" value="<?= $user['email']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="password" name="password"
value="<?= $user['password']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<select name="menu_id" id="menu_id" class="form-control">
<option value="">Select Role</option>
<?php foreach ($user_role as $u) : ?>
<option value="<?= $u['id']; ?>"><?= $u['role']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
For now It shows the data based on ID, but when i try to click edit button of another data, it show the same detail of one ID only.
I hope that every i click every data button, it shows different detail based on id. I've check similar case already but no one of them that work on my code. I just know my code need some jquery, but i just new on it.
like saad said, place it inside the loop
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?> </h1>
<div class="row">
<div class="col-lg-6">
<?= form_error('menu', '<div class="alert alert-danger" role="alert">','</div>'); ?>
<?= $this->session->flashdata('message'); ?>
Tambah User
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($userRole as $u) : ?>
<tr>
<th scope="row"><?= $i ; ?></th>
<td><?= $u['name']; ?> </td>
<td><?= $u['email']; ?> </td>
<td><?= $u['password']; ?> </td>
<td><?= $u['role']; ?> </td>
<td>
<a href="" class="badge badge-success" data-toggle="modal"
data-target="#editRoleModal<?=$i?>">edit</a>
<a href="<?= base_url('admin/deleteuser/') . $u['id'];?>"
class="badge badge-danger">delete</a>
<!-- Modal Edit-->
<div class="modal fade" id="editRoleModal<?=$i?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<?= form_open_multipart('admin/usermanagement'); ?>
<div class="modal-body">
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="name" name="name" value="<?= $u['name']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="email" class="form-control" id="email" name="email" value="<?= $u['email']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="password" name="password"
value="<?= $u['password']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<select name="menu_id" id="menu_id" class="form-control">
<option value="">Select Role</option>
<?php foreach ($user_role as $u2) : ?>
<option value="<?= $u2['id']; ?>"><?= $u2['role']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<?php $i++ ; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
I am trying to build a budget lookup tool. I have form where someone enters an account#, fund#, and deptID#. When they hit search, it opens a modal and will display a table of the budget balances that match the entered fund, account, and deptID.
I can get the modal to open but, I can't seem to get the data to pass to the modal and display the data based on the SQL query. Here is my code:
Here is the form:
<form method="GET" id="frm" name="frm">
<div class="row">
<div class="col mb-2">
<label for="account">Account:</label>
<select class="form-control" name="account2" id="account2" required>
<option></option>
<?php
while(!$accounts->atEnd()) { //dyn select
?>
<option value="<?php echo($accounts->getColumnVal("account")); ?>"><?php echo($accounts->getColumnVal("account")); ?>: <?php echo($accounts->getColumnVal("description")); ?></option>
<?php
$accounts->moveNext();
} //dyn select
$accounts->moveFirst();
?>
</select>
</div>
<div class="col mb-2">
<label for="fund">Fund:</label>
<select class="form-control" name="fund2" id="fund2" required>
<option></option>
<?php
while(!$funds->atEnd()) { //dyn select
?>
<option value="<?php echo($funds->getColumnVal("fundID")); ?>"><?php echo($funds->getColumnVal("fundID")); ?>: <?php echo($funds->getColumnVal("fund")); ?></option>
<?php
$funds->moveNext();
} //dyn select
$funds->moveFirst();
?>
</select>
</div>
</div>
<div class="row">
<div class="col mb-2">
<label for="fund">Department ID#:</label>
<input type="text" name="funding_department2" id="funding_department2" class="form-control input-md" autocomplete="off" value="" required>
</div></div>
<button type="submit" name="submit2" id="submit2" class="btn-lg btn-info">Search</button>
</form>
Here is the script and modal:
<script>
$(document).ready(function() {
$('#frm').on('submit2', function(e){
$('#myLargeModalLabel').modal('show');
e.preventDefault();
});
});
</script>
<!-- Large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="myLargeModalLabel" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content p-4">
<h4 class="modal-title">Budget Summary</h4>For Account: <?php echo $_GET['account2']; ?>, Fund: <?php echo $fund; ?>, DeptID#: <?php echo $deptID; ?><br><em>The budgeted balance is an estimate.</em></h4>
<br> <?php if ($budget_summary->TotalRows == 0) { // Show if mysqli recordset empty ?>There is no data. Please try your search again.<?php } ?>
<?php if ($budget_summary->TotalRows > 0) { // Show if mysqli recordset empty ?><table width="100%" class="table table-responsive" border="0" cellspacing="2" cellpadding="6" class="display" id="example2">
<thead>
<tr>
<th align="left" valign="top">Budgeted Amount</th>
<th align="left" valign="top">Budgeted Balance</th>
<th align="left" valign="top">Program</th>
</tr>
</thead>
<tbody>
<?php
while(!$budget_summary->atEnd()) {
?><tr>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_amount")); ?></td>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_balance")); ?></td>
<td valign="top"><?php echo($budget_summary->getColumnVal("program")); ?></td>
</tr>
<?php
$budget_summary->moveNext();
}
$budget_summary->moveFirst(); //return RS to first record
?>
</tbody>
</table><?php } ?>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the SQL query:
<?php
$fund = mysqli_real_escape_string($sa, $_GET["fund2"]);
$account = mysqli_real_escape_string($sa, $_GET["account2"]);
$deptID = mysqli_real_escape_string($sa, $_GET["funding_department2"]);
$budget_summary = new WA_MySQLi_RS("budget_summary",$sa,0);
$budget_summary->setQuery("SELECT * from budget_summary where fund = ? and account = ? and deptID = ?");
$budget_summary->bindParam("i", "".$fund ."", "-1"); //colname
$budget_summary->bindParam("i", "".$account ."", "-1"); //colname2
$budget_summary->bindParam("i", "".$funding_department ."", "-1"); //colname3
$budget_summary->execute();
?>
You have things out of sequence. The select/submit button should trigger a back-end operation to retrieve the data from the database (through an ajax request), which would then return the data to your page as JSON which you could parse in javascript into HTML- OR - instead of returning JSON data, you could return the HTML for your modal. Maybe something like this
$(document).ready(function() {
$('#frm').submit(function(e){
// gather your inputs
var url="backend-php.php";
$.ajax({
url: url, // your back-end PHP script, will return the HTML needed
method: 'GET',
data : {
account2: $('#account2').val(),
fund2: $('#fund2').val(),
funding_department2: $('#funding_department2').val(),
},
success: function(result){
$('#myLargeModalLabelHTML').html(result)
$('#myLargeModalLabel').modal('show');
}
})
e.preventDefault();
});
});
Your MOdal HTML could become:
<!-- Large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="myLargeModalLabel" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content p-4" id="myLargeModalLabelHTML">
<!-- everything will go in here -->
</div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
and your PHP script, something like:
<?php
function getModalHtml() {
$budget_summary = new WA_MySQLi_RS("budget_summary",$sa,0);
$budget_summary->setQuery("SELECT * from budget_summary where fund = ? and account = ? and deptID = ?");
$budget_summary->bindParam("i", $_GET["fund2"], "-1"); //colname
$budget_summary->bindParam("i", $_GET["account2"], "-1"); //colname2
$budget_summary->bindParam("i", $_GET["funding_department2"], "-1"); //colname3
$budget_summary->execute();
?>
<h4 class="modal-title">Budget Summary</h4>For Account: <?php echo $_GET['account2']; ?>, Fund: <?php echo $fund; ?>, DeptID#: <?php echo $deptID; ?><br><em>The budgeted balance is an estimate.</em></h4>
<br> <?php if ($budget_summary->TotalRows == 0) { // Show if mysqli recordset empty ?>There is no data. Please try your search again.<?php } ?>
<?php if ($budget_summary->TotalRows > 0) { // Show if mysqli recordset empty ?><table width="100%" class="table table-responsive" border="0" cellspacing="2" cellpadding="6" class="display" id="example2">
<thead>
<tr>
<th align="left" valign="top">Budgeted Amount</th>
<th align="left" valign="top">Budgeted Balance</th>
<th align="left" valign="top">Program</th>
</tr>
</thead>
<tbody>
<?php
while(!$budget_summary->atEnd()) {
?><tr>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_amount")); ?></td>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_balance")); ?></td>
<td valign="top"><?php echo($budget_summary->getColumnVal("program")); ?></td>
</tr>
<?php
$budget_summary->moveNext();
}
$budget_summary->moveFirst(); //return RS to first record
?>
</tbody>
</table><?php } ?>
<?php }?>
I have designed one page consisting of one modal window which is opening with tag.
I want to pass some parameters to modal window which i will be using to populate table data based on the parameter value.It is working with one parameter but not working with another parameter.
Following is the HTML to open modal window......
<table id="MyTable1" class="table table-sm table-striped table-lightfont paginated">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","GRP_DESC"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","MODULE_NAME"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","GMA_ACCESS_FLAG"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","OPTIONS"); ?></th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION['$language']="E") {
$groupdata=SelectData("group_module_access,user_group,modules","gma_id,gma_grp_id,grp_desc,gma_module_id,module_name,gma_access_flag","gma_grp_id=grp_id and gma_module_id=module_id","gma_grp_id,gma_id");
}
else {
$groupdata=SelectData("group_module_access,user_group,modules","gma_id,gma_grp_id,grp_bldesc as grp_desc,gma_module_id,module_blname as module_name,gma_access_flag","gma_grp_id=grp_id and gma_module_id=module_id","gma_grp_id,gma_id");
}
foreach ($groupdata as $groupdatalist) {
//$allids[]=$groupdatalist["gma_id"]; ?>
<tr>
<td><?php echo $groupdatalist["grp_desc"];?></td>
<td><?php echo $groupdatalist["module_name"];?></td>
<?php if($groupdatalist["gma_access_flag"]=="N"):?>
<td style="text-align:right;width:10px;"><input type="checkbox" name="accessflag[]" id="accessflag"
value="<?php echo "{$groupdatalist['gma_id']}"?>"/> </td>
<?php else:?>
<td style="text-align:right;width:10px;"><input type="checkbox" checked name="accessflag[]" id="accessflag" width="10px"
value="<?php echo "{$groupdatalist['gma_id']}"?>"/> </td>
<?php endif;?>
<td style="display:none;"><?php echo $groupdatalist["gma_grp_id"];?></td>
<td style="display:none;"><?php echo $groupdatalist["gma_module_id"];?></td>
<td style="display:none;"><input type="text" name="gmaid" id="gmaid" value="<?php echo $groupdatalist["gma_id"];?>"></td>
<!--<td style="display:none"><input type="text" name="allids[]" value="<//?php echo "{$groupdatalist['gma_id']}"?>"/></td>-->
<td>
<span data-toggle="modal" data-target="#myModal-<?php echo $groupdatalist['gma_id'];?>">
<a href="#" class="btn btn-light btn-sm shadow-none"
data-toggle="tooltip" title="<?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","MENUPERMISSION");?>">
<i class="fa fa-pencil-square-o"></i>
</a>
</span>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Here is the modal window HTML.....
<div id="myModal-<?php echo $groupdatalist['gma_grp_id'];?>" class="modal show fade" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Menu List</h6>
</div>
<div class="modal-body">
<div class="control-container" style="padding:10px;">
<div class="row">
<div class="col-md-12" style="text-align:center">
<label style="color:red">
<?php //session_start();
if (!empty($_SESSION['$SaveMsg'])) { echo $_SESSION['$SaveMsg']; }
unset($_SESSION['$SaveMsg']);
?>
</label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","GRP_DESC"); ?>
</label>
</div>
<div class="col-md-8">
<input class="text-control" type="text" name="grpid" id="grpid"
value="" readonly required maxlength="50" style="width:100%;display:none;" autofocus />
<input class="text-control" type="text" name="grpname" id="grpname"
value="" readonly required maxlength="50" style="width:100%" autofocus />
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","MODULE_NAME"); ?>
</label>
</div>
<div class="col-md-8">
<input class="text-control" type="text" name="moduleid" id="moduleid"
value="" readonly required maxlength="50" style="width:100%;display:none" autofocus />
<input class="text-control" type="text" name="modulename" id="modulename"
value="" readonly required maxlength="50" style="width:100%" autofocus />
</div>
</div>
<?php $gmaid= "<script>document.writeln(gmaid);</script>";
echo $gmaid;?>
<!--table starts here -->
<table id="MyTable2" class="table table-sm table-striped table-lightfont paginated">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MENUACCESS","MENUNAME"); ?></th>
<!--<th><//?php echo GetBilingualLabels($_SESSION['$language'],"MODULEACCESS","MODULE_NAME"); ?></th>-->
<th><?php echo GetBilingualLabels($_SESSION['$language'],"MENUACCESS","ACCESS_FLAG"); ?></th>
<!--<th><//?php echo GetBilingualLabels($_SESSION['$language'],"MENUACCESS","OPTIONS"); ?></th>-->
</tr>
</thead>
<tbody>
</table>
<!-- table ends here -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","CANCEL"); ?>
</button>
<button type="submit" name="updmenuperm" formnovalidate class="btn btn-primary"> <!--onclick="DispMsg(<//?php echo "'".$_SESSION['AlertMsg']."'";?>)"-->
<i class="fa fa-save"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","SAVE"); ?>
</button>
</div>
</div>
</div>
</div>
</div>
Above code is working perfectly but if i am using another value as parameter it is not opening the modal window at all.
for ex. if i am using $groupdatalist['gma_id'] which is integer value, it is not opening modal window.
Multiple issues here.
First a </div> is missing at the end.
Then you are defining $groupdatalist in a foreach, but trying to use it outside the loop:
<div id="myModal-<?php echo $groupdatalist['gma_grp_id'];?>" class="modal show fade" data-backdrop="static">
If you want one modal per <td> you have to move your modal into the foreach loop.
Finally, you call the modal using $groupdatalist['gma_id']
<span data-toggle="modal" data-target="#myModal-<?php echo $groupdatalist['gma_id'];?>">
but the modal ID is define using a different variable : $groupdatalist['gma_grp_id']:
<div id="myModal-<?php echo $groupdatalist['gma_grp_id'];?>"
After I successfully edited data using PHP ajax and MySQLi, the
“<input type="text" class="tagsinput"/>” is not properly initialized.
I try this code, and it works but not in its proper form
$(document).ajaxComplete(function () {
$(document).find('.tagsinput').tagsInput();
});
This is the picture of not yet submitted form
This is the picture of successfully edited data, but I want to edit
again
This is my ajax call code
$(document).on('click', '.edit_fp_follow_up', function () {
$fp_follow_up_id = $(this).val();
$method = $('#method' + $fp_follow_up_id).val();
if (confirm('Are you sure you want to edit this follow-up?')) {
$.ajax({
type: "POST",
url: "action/editfpfollowup.php",
cache: false,
async: false,
data: {
fp_follow_up_id: $fp_follow_up_id,
method: $method,
edit: 1,
},
success: function () {
$('#alert').slideDown();
$('#alerttext').text('Successfully updated Follow-up Schedule!');
setTimeout(function () {
$('#alert').fadeOut('slow');
}, 1500);
$(document).ajaxComplete(function () {
$(document).find('.tagsinput').tagsInput();
});
show_follow_up_familyplanning();
}
});
}
});
This is my modal code
<div class="modal fade" id="edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="defModalHead" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<center>
<div id="modallabel2" class="alert alert-danger" style="display:none;">
<center><span id="checkfield2"></span></center>
</div>
</center>
<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="defModalHead"><strong>Update Follow-up Visit - Family Planning</strong></h4>
</div>
<div class="modal-body">
<form id="fpfollowup">
<fieldset>
<div class="col-md-12">
<div class="form-group">
<label>Method/Brand</label>
<input type="text" class="tagsinput" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" value="<?php echo $fetch1['fp_follow_up_id']; ?>" class="btn btn-success edit_fp_follow_up">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is my code in my table
<div class="table-responsive">
<table id="fpfollowuptable" class="table datatable hover">
<thead>
<tr class="warning">
<th>
<center>Patient ID</center>
</th>
<th>
<center>Patient Name</center>
</th>
<th>
<center>Remarks</center>
</th>
<th>
<center>Next Service Date</center>
</th>
<th>
<center>Status</center>
</th>
<th>
<center>Actions</center>
</th>
</tr>
</thead>
<tbody>
<?php
require '../require/config.php';
$query1 = $conn->query("SELECT * FROM `fp_follow_up` NATURAL JOIN `patient` WHERE `fp_follow_up`.`patient_id` = `patient`.`patient_id` ORDER BY `fp_follow_up_id` DESC") or die(mysqli_error());
while($fetch1 = $query1->fetch_array()){
?>
<tr>
<td>
<center><strong><?php echo $fetch1['year']?><?php echo "0".$fetch1['patient_id']?></strong></center>
</td>
<td>
<center><strong><?php echo $fetch1['patient_name']?></strong></center>
</td>
<td>
<center><?php echo $fetch1['remarks']?></center>
</td>
<td>
<center><?php echo $fetch1['next_service_date']?></center>
</td>
<td>
<center>
<?php
if ($fetch1['follow_up_status'] == 'Pending')echo "<span class='badge badge-danger animated infinite pulse' style='animation-duration:.8s;'>Pending</span>";
if ($fetch1['follow_up_status'] == 'Done')echo "<span class='badge badge-info'>Done</span>";
if ($fetch1['follow_up_status'] == 'Cancelled')echo "<span class='badge badge-warning'>Cancelled</span>";
?></center>
</td>
<td>
<center><button class="btn btn-sm btn-info" data-toggle="modal" data-target="#edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>">UPDATE</button></center>
</td>
<?php require('../modals/edit_fp_follow_up.php'); ?>
</tr>
<?php
}
$conn->close();
?>
</tbody>
</table>
</div>
Have you tried using
<input type="text" class="tagsinput" data-role="tagsinput"/>
Demo Here: https://codepen.io/dannibla/pen/QGLyBW
Just add data-role="tagsinput" to your input field to automatically
change it to a tags input field.
You have created modals in loops..
<input type="text" class="tagsinput<?php echo $fetch1['fp_follow_up_id']; ?>" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />
and then in jquery, try
$(document).find('.tagsinput'+fp_follow_up_id).tagsInput();
I have a table in a while loop that includes a edit button to a modal. What I am trying to achieve is when you click the modal button "edit" the data in the modal will correspond with the correct teacher name. So I am trying to loop the modals and the data in it. What I have done is not working, it is only showing either the first or last value in the array for all modals in the loop.
so the table looks like this
| teacher name | Phone | Email | Edit | Delete |
| Mary | 111-111-1111 | mary#mary.com | Edit | Delete |
| Rob | 111-111-1111 | rob#rob.com | Edit | Delete |
| Liz | 111-111-1111 | Liz#Liz.com | Edit | Delete |
When I click on any of the edits the teacher name "Mary" shows up for all of them. But what I want is for Mary to show for the 1st edit, Rob to show for the 2nd edit, and so forth...
CODE:
<!--TABLES-->
<div id="table" class="table-responsive-sm container">
<table id="feisHistory" class="table table-striped table-bordered responsive table-hover" cellspacing="0" style="width:100%">
<thead>
<tr>
<th id="teacherName" >Teacher Name</th>
<th id="phone">Phone</th>
<th id="email">Email</th>
<th id="edit" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Edit</th>
<th id="delete" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Delete</th>
</tr>
</thead>
<tbody>
<?php
$school_sql = "SELECT * FROM `Users` WHERE id = '$id'";
$school_res = mysqli_query($con,$school_sql);
$school_row = mysqli_fetch_array($school_res);
$school_name = $school_row["school"];
$sql = "SELECT * FROM `teachers` WHERE school = '$school_name' ORDER BY teacher ASC";
$res = mysqli_query($con,$sql);
if($res==FALSE){
die('there was an error running query [' . $con->error . ']');
}
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
Edit
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
Delete
</td>
</tr>
<?php } ?>
</tbody>
</table>
I know my code is sloppy, please don't criticize me too much.. I'm still learning.
You could use the non-ajax version, but you should avoid this since it is rewriting large amount of code (depends on the records), by assigning unique id on each of elements id within the while loop, maybe you could use $teacherId as an identifier :
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
Edit
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile<?=$teacherId?>" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm<?=$teacherId?>" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name<?=$teacherId?>" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save<?=$teacherId?>">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
Delete
</td>
</tr>
<?php } ?>
You can solve this with many ways, and i use ajax for this solution.
And this one example how to use ajax to get data for each teacher name.
$('.edit').on('click', function(){
let id = $(this).attr("data-id");
let tempurl = "";
// this is example cause i create seperate json data, you can dynamically create select your DB based on id
if (id == 1){
tempurl = "https://api.myjson.com/bins/19w0nm";
}else if (id == 2){
tempurl = "https://api.myjson.com/bins/rhq2a";
}else if (id == 3){
tempurl = "https://api.myjson.com/bins/m4tma";
}
$.ajax({
url: tempurl,
type: "get",
dataType: "JSON",
data: {}, //this is data you send to your server
success: function(res)
{
console.log(res);
$('#tchName').val(res.name);
$('#tchPhone').val(res.phone);
$('#tchEmail').val(res.email);
$("#modalEdit").modal('show');
}
})
})
$('#btnSave').on('click', function(e){
e.preventDefault();
$("#modalEdit").modal('toggle');
alert('Your data has been update');
})
<html>
<head>
<title>SO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="modal" tabindex="-1" role="dialog" id="modalEdit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label for="">Name</label>
<input type="text" name="tchName" id="tchName" value="">
<br>
<label for="">Phone</label>
<input type="text" name="tchPhone" id="tchPhone" value="">
<br>
<label for="">Email</label>
<input type="text" name="tchEmail" id="tchEmail" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSave">Save changes</button>
</div>
</div>
</div>
</div>
<h3>Testing Table</h3>
<div class="col-md-6">
<table class="table table-bordered" style="text-align:center">
<thead>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
<td>Action</td>
</thead>
<tr>
<td><?php echo 'Teacher Name 1'; ?></td>
<td><?php echo '0211'; ?></td>
<td><?php echo 'email1#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="1">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 2'; ?></td>
<td><?php echo '0222'; ?></td>
<td><?php echo 'email2#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="2">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 3'; ?></td>
<td><?php echo '0223'; ?></td>
<td><?php echo 'email3#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="3">Edit</button>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
ignore the tempurl, you can create function to select and get specific data of your teacher based on teacher name, id or anything else.