I am a beginner I am using php and javascript. I want to refresh the page view_create_journals.php when I click on the change button in the modal. I add a function to the change button but it's not working. I badly stuck here. Please give me some advice how to solve this problem. Thanks in advance guys. Codes are given below :
view_created_journals.php
<section>
<div class="container">
<div class="panel-group">
<div class="panel panel-info" style="padding: 10px 10px 10px 10px;">
<div class="panel-heading" style="color:black;font-size: 16px;">Plantation Journal Entry Basic Details</div>
<div class="panel-body">
<form method="post">
<div class="table-repsonsive">
<table class="table table-bordered" id="item_table1">
<thead>
<tr>
<th>Journal No.</th>
<th>Range</th>
<th>Beat</th>
<th>Scheme</th>
<th>Year</th>
<th>Status</th>
<th>Change Status</th>
<th>View</th>
</tr>
</thead>
<tbody>
<?php
$query="select * from plantation_journal_basic_details";
$result=mysqli_query($con,$query);
while ($row=mysqli_fetch_assoc($result)) {
$plantation_journal_no=$row['plantation_journal_no'];
$ranges=$row['ranges'];
$beat=$row['beat'];
$scheme=$row['scheme'];
$year=$row['year'];
$status=$row['status'];
echo "<tr>
<th style='font-weight:300'>$plantation_journal_no</th>
<th style='font-weight:300'>$ranges</th>
<th style='font-weight:300'>$beat</th>
<th style='font-weight:300'>$scheme</th>
<th style='font-weight:300'>$year</th>
<th style='font-weight:300'>$status</th>
<th><a name='view' id='view' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#change'>Change Status</a></th>
<th><a href='all_details.php?id=".$row['plantation_journal_no']."' name='view' id='view' class='btn btn-info btn-sm'>View</a></th>
</tr>";
if(isset($_POST['status'])){
$status=$_POST['status'];
$sql1="UPDATE plantation_journal_basic_details SET status='$status' where plantation_journal_no='$plantation_journal_no';";
$res=mysqli_query($con,$sql1);
}
}?>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="change" 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">Change Status</h4>
</div>
<div class="modal-body">
<form action="view_created_journals.php" method="post">
<label>Status : </label>
<select name="status" id="status">
<option value="Committed">Committed</option>
<option value="Edit and Submit">Edit and Submit</option>
<option value="Edited and Submitted">Edited and Submitted</option>
<option value="Approved">Approved</option>
</select><br><br>
<button type="submit" class="btn btn-info" onclick="myFunction()" name="submit_change">Change</button>
</form>
<script>
function myFunction() {
location.reload();
}
</script>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Your page should automatically be refreshing when you POST the form. That's default. Specially as it doesn't seem you are using any sort of ajax functions.
Nonetheless, to refresh a page you really need to use JavaScript. PHP runs when you're requesting a page, and javascript is what gives you all the changing elements in your browser.
Once the page is loaded PHP stops, it doesn't do anything new. That's where JS comes in. You can make the page interactive with Javascript.
To reload a page in JS:
window.location.reload();
This will reload the page. More specific in you case:
You have this button:
<button type="submit" class="btn btn-info" name="submit_change">Change</button>
Add this script at the bottom of your script:
<script>
document.querySelector('input[name=submit_change]').addEventListener('click', function(e) {
e.preventDefault();
window.location.reload();
});
</script>
Related
I have a table like this:
<table id="criteria-table">
<thead>
<tr>
<th rowspan="2" class="text-center align-middle">#</th>
<th rowspan="2" class="text-center align-middle">Employee</th>
<th colspan="3" class="text-center">Order</th>
</tr>
<tr>
<th class="text-center">Priority</th>
<th class="text-center">Criteria</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
<tr class="tr_template">
<td class="text-center">1</td>
<td class="text-center">Employee A</td>
<td class="text-center">75%</td>
<td class="text-center">10</td>
<td class="text-center">order</td>
</tr>
</tbody>
</table>
And I have 2 button in the end of this table:
<a class="btn btn-add-criteria btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD CRITERIA
</a>
<a class="btn btn-add-employee btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD EMPLOYEE
</a>
When I click add criteria button, a popup will open to type criteria data and submit:
<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content clear-form">
<!-- Body modal -->
<div class="modal-body">
<!-- Form -->
<form id="frm-add-criteria">
<div class="row">
<div class="col-lg-12">
<div class="m-form__group">
<div class="criteria-content">
<!-- Criteria -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Criteria</label>
<div class="input-group">
<select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
<option value="1">Order</option>
<option value="2">Contract</option>
<option value="3">Revenue</option>
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Priority</label>
<div class="input-group">
<input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
</div>
</div>
</div>
<!-- Amount -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Amount</label>
<div class="input-group">
<input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer modal -->
<div class="modal-footer">
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
<div class="m-form__actions m--align-right">
<button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
<span class="ss--text-btn-mobi">
<i class="la la-arrow-left"></i>
<span>CANCEL</span>
</span>
</button>
<button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
<span class="ss--text-btn-mobi">
<i class="la la-check"></i>
<span>SAVE</span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
After I submit the form in modal, it will add one more column like this for all employee row in table:
Here is my old table:
After submit form modal:
Same like this, when I click add employee, it will show a modal for me to choose employee, then it will insert one more employee row to this table with all criteria I add before.
Here is my JSFiddle to show you what I did.
I really don't know how to do this so forgive me if you feel I just give you about code not solution.
Hope you can give me a good advise to handle this.
Thank you very much!
You can use JS / JQuery DOM manipulation.
here's an example using JQuery and Bootstrap:
Table
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>John</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Person
</button>
I put an id to the table body (tbody) element so I can access it directly from script side using JQuery.
Modal
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Insert Person</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-6">
<label>Gender</label>
<select id="gender" class="form-control">
<option>Choose Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addPerson()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I put id on every input for JQuery access. and since we are not to sending it to a database or another http request, there's no need for a form.
The JQuery Script:
<script>
function addPerson() {
var name = $('#name').val();
var gender = $('#gender').val();
var html = '';
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + gender + '</td>';
html += '</td>';
$('#tableBody').append(html);
$('#name').val('');
$('#gender').val('Choose Gender');
}
</script>
first I make 3 variables to contain empty string, the value of name, and the value of gender. then I make a table row mock up and fill it with the values from name and gender on that empty string variable, after that I add the new data to the table using the $('#tableBody').append(html); command. and then refresh the form using $('#name').val('');and $('#gender').val('Choose Gender');. hit me up if you need more elaboration.
Hi if anybody can help me to solve this issue, i will grateful because i am trying since 2 days.
I have the one page with list of contracts in the table and one button to open modal window with dynamic data based on the id of the button, but when i am clicking the button its not showing modal window. my HTML code for the contract list is
<table id="MyTable" class="table table-md table-bordered table-hover table-lightfont">
<thead class="thead-light">
<tr>
<th>ID</th>
<th>Customer Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABCD</td>
<td>
<button type="button" name="view" id="1" class="btn btn-light btn-sm shadow-none view_data">
More Details
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>XYZ</td>
<td>
<button type="button" name="view" id="2" class="btn btn-light btn-sm shadow-none view_data">
More Details
</button>
</td>
</tr>
</tbody>
</table>
here is my modal window code
<div id="contractModal" 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 text-info"><?php echo $module ?></h6>
</div>
<div class="modal-body pt-0">
</div>
<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","BACK"); ?>
</button>
</div>
</div>
</div>
</div>
here is my JavaScript code to open modal window with dynamic data
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var ccpid=$(this).attr("id");
//alert(ccpid);
$.ajax({
url:"showdata.php",
method:"POST",
data:{},
success:function(data){
$('.modal-body').html(data);
$('#contractModal').modal("show");
}
});
});
});
</script>
here is my showdata.php code
<?php
$output='';
$output .="<label>Contract code</label>";
echo $output;
?>
I have a table which is dynamically generated. the table looks like:-
<table id="datatables" class="table table-striped table-no-bordered table-hover"
cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</tfoot>
<tbody>
<tr th:Each="b,iter : ${branches}">
<td th:text="${iter.index}+1"></td>
<td th:text="${b.branchName}"></td>
<td th:text="${b.branchLocation}"></td>
<td th:text="${b.status}"></td>
<td style="text-align: right;">
<button class="btn btn-warning" data-toggle="modal" data-target="#branchModal">Edit</button>
<button class="btn btn-warning">Deactivate</button>
</td>
</tr>
</tbody>
</table>
and i have bootstrap modal. now when i click edit button of the table i want to load the clicked table row data inside the form of modal.
<div class="modal fade" id="branchModal" 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">New message</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 for="branch-name" class="col-form-label">Branch Name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch-location" class="col-form-label">Branch Location:</label>
<textarea class="form-control" id="branch-location"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button style="margin-right:10px;" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
how can i achieve it ?
note:- i am not using jquery so solution with plain javascript will be appreciated.
If you have a function loadDataOnModal to handle displaying your modal, add this to your edit button:
th:onclick="| loadDataOnModal('${b.branchName}', '${b.branchLocation}')|"
I see you only need branch name & location in your modal body.
Hi simply run this code on the click event that opens your modal for each value you wish to change:
document.getElementById('recipient-name').value = 'Value you wish to set'
You can also access the value of the element you are clicking by passing in the event variable like so:
document.getElementById('clicked').addEventListener('click', event => {
document.getElementById('recipient-name').value = event.target.value
})
This is basic concept you can take it further from there...
Hope this helps
I have a Maven/Spring Boot/Thymeleaf project where I want a button click in a row to trigger a modal pop up that has a detail view of that row's data.
My original problem was that when a button was clicked on any given row, the modal pop up would ONLY display the first row's data. I realized this was because every button in every row had the same data-target, and the browser was grabbing the first row in the table.
So, now I'm trying to use JavaScript/jQuery to populate the modal's data for me. I've removed the data-target for the button so it doesn't trigger the default and incorrect behavior. For now, I've been trying to simply display the title of a book in a input text field. It has not worked. The modal pop up displays with the text field, but it's empty, and doesn't have the title from that particular row.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Note Book</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('#myButton').on('click',function(){
$("#myModal").modal("show");
$("#txttitle").val($(this).closest('tr').children()[0].textContent);
});
</script>
</head>
<body>
<div class="container">
<h2>Books</h2>
<p>This is all the books you've read</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date read</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr th:if="${books.empty}">
<td colspan="2"> No Books Available </td>
</tr>
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" id="myModal" 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">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You don't need to use jquery for this. Your first option was correct, you just were missing some tools. You can use on your button th:attr="data-target=${book.title}" and on your modal, change it's id like <div class="modal fade" th:id="${book.title}" role="dialog">.
This way, you will set the right target for each button and you don't need to add any unnecessary code. Of course, this is an example, but you can use whichever unique value you want for your target or id. In the end, you code would look something like this.
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" th:attr="data-target=${book.title}" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" th:id="${book.title}" 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">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
in my project i have table(images). there is checkboxes column, when the user check record and press delete button record will be deleted. thats work fine.
then there is visible column(boolean) which is by default(true). So when record is checked and click hide/show button it will update visible value(from 1 to 0 or from 0 to 1)
My problem is that, delete and show/hide buttons work individually. i want both work at the same time. I don't know how combine them in the same table.
this is my view(in which only show/hide work)
<button type="submit" class="btn btn-danger" id="deleteImg"><i class="fa fa-trash"></i> Delete</button>
<form action="{{url('admin/images/hideimg')}}" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('post')}}
<div class="pull-right form-group" style="padding: 12px">
<button class="btn btn-warning" id="hideImg">
Hide/Show</button>
</div>
#if($images)
<table class="table panel panel-default" id="table">
<thead class="panel-heading">
<tr>
<th><input type="checkbox" id="options"> </th>
<th>Visible?</th>
<th>photo</th>
<th></th>
</tr>
</thead>
<tbody id="tablecontents" class="panel-body">
#foreach($images as $image)
<tr class="row1" data-id="{{ $image->id }}">
<td><input class="checkboxes" type="checkbox" id="option" name="checkBoxArray[]" value="{{$image->id}}" data-imageid="{{$image->id}}"></td>
<td>{{$image->visible == 1?'yes':'no'}}</td>
<td ><img src="/uploads/{{$image->path}}" id="img" ></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#endif
</form>
form action="delete/images" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('delete')}}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style="text-align: center" id="modalLabel">Delete Confirmation</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="text-center">Are you sure you want to delete the following service?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close</button>
<button type="submit" class="btn btn-danger" name="delete_all" value="Delete">
<span id="" class='glyphicon glyphicon-trash'></span> Delete</button>
</div>
</div>
</div>
</div>
</form>