PHP Ajax - Show part of the data in a table? - php

Question

There are texareas in my table: "Case Description", "Case Notes", etc..
I want the case description not to show the entire textarea of more than 500 characters in the <td>...
I want it more like:
This is a case description....
When the Edit button is clicked, it pops a modal to edit the data via ajax (already done).
Here are my codes
Edit-report.php:
<!-- Start PHP While -->
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
if( isset($_POST['id']) ) {
$id = $_POST['id'];
$ccc_employee = $_POST['cccEmployee'];
$IR_number = $_POST['irNumber'];
$case_type = $_POST['caseType'];
$caseLocation = $_POST['caseLocation'];
$startDate = $_POST['startDateTime'];
$endDate = $_POST['endDateTime'];
$case_description = $_POST['caseDesc'];
$action_taken = $_POST['actionsTaken'];
$details = $_POST['caseDetails'];
$notes = $_POST['caseNotes'];
$recommendation = $_POST['caseRecommendation'];
// Query to update data
$result = mysqli_query($mysqli, "UPDATE cases_reports SET
cccEmployee='$ccc_employee',
irNumber='$IR_number',
caseType='$case_type',
caseLocation='$caseLocation',
startDateTime='$startDate',
endDateTime='$endDate',
caseDesc='$case_description',
actionsTaken='$action_taken',
caseDetails='$details',
caseNotes='$notes',
caseRecommendation='$recommendation'
WHERE id='$id'");
}
$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($table);
while($res = mysqli_fetch_array($table)) {
?>
<tr id="<?php echo $res['id']?>">
<td data-target="cccEmployee"><?php echo $res['cccEmployee'];?></td>
<td data-target="IR_number"><?php echo $res['irNumber'];?></td>
<td data-target="case_type"><?php echo $res['caseType'];?></td>
<td data-target="case_location"><?php echo $res['caseLocation'];?></td>
<td data-target="startDateTime"><?php echo $res['startDateTime'];?></td>
<td data-target="endtDateTime"><?php echo $res['endDateTime'];?></td>
<td data-target="case_description"><?php echo $res['caseDesc'];?></td>
<td data-target="actions_taken"><?php echo $res['actionsTaken'];?></td>
<td data-target="case_details"><?php echo $res['caseDetails'];?></td>
<td data-target="case_notes"><?php echo $res['caseNotes'];?></td>
<td data-target="case_recommendation"><?php echo $res['caseRecommendation'];?></td>
<td class="table-actions">
<a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
<i class="fas fa-edit"></i>
</a>
<!-- <a href="#!" class="table-action table-action-delete" data-toggle="tooltip" data-original-title="Delete product">
<i class="fas fa-trash"></i>
</a> -->
</td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<div class="modal fade" id="reportsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"> Case Details </h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="case-data">
<div class="form-row">
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="cccEmployee">CCC Employee</label>
<input type="text" class="form-control" id="cccEmployee" name="cccEmployee">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="IR_number">IR Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">IR#</span>
</div>
<input type="number" class="form-control" id="IR_number" name="IR_number">
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_type">Case Type</label>
<select data-toggle="select" class="form-control" name="case_type" id="case_type">
<option value="" disabled selected>Select Case Type</option>
<option value="Accident">Accident</option>
<option value="Theft">Theft</option>
<option value="Death">Death</option>
<option value="Harrasment">Harrasment</option>
<option value="badBehaviour">Bad Behaviour</option>
<option value="Drugs">Drugs</option>
<option value="Drunk">Drunk</option>
<option value="Fight">Fight</option>
<option value="Medical">Medical</option>
<option value="illegalEntry">Illegal Entry</option>
<option value="illegalWorker">Illegal Worker</option>
<option value="Fire">Fire</option>
<option value="Electric">Electric</option>
<option value="illegalHunting">Illegal Hunting</option>
<option value="oilLeak">Oil Leak</option>
<option value="petrolLeak">Petrol Leak</option>
<option value="Kidnapping">Kidnapping</option>
<option value="Blackmail">Blackmail</option>
<option value="Misunderstanding">Misunderstanding</option>
<option value="propertyDamage">Property Damage</option>
<option value="smoke_NoFire">Smoke, No Fire</option>
<option value="stuck_InElevator">Stuck in Elevator</option>
<option value="Scooter">Scooter</option>
<option value="Drifting">Drifting</option>
<option value="LostPerson">Lost Person</option>
<option value="Fraud_Forgery">Fraud/Forgery</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_location">Location</label>
<select class="form-control" name="case_location" id="case_location" data-toggle="select">
<option value="" disabled selected>Select Location</option>
<option value="Baylasun">Baylasun</option>
<option value="Baylasun Hotel">Baylasun Hotel</option>
<option value="AL-Waha">AL-Waha</option>
<option value="Al-Morooj">Al-Morooj</option>
<option value="Royal Green">Royal Green</option>
<option value="Beach Towers">Beach Towers</option>
<option value="Emmar Building">Emmar Building</option>
<option value="Industrial Area (East)">Industrial Area (East)</option>
<option value="Industrial Area (West)">Industrial Area (West)</option>
<option value="Hejaz Gate">Hejaz Gate</option>
<option value="Gate 3">Gate 3</option>
<option value="Marina 1">Marina 1</option>
<option value="Marina 2">Marina 2</option>
<option value="Marina 3">Marina 3</option>
<option value="Tala Garden">Tala Garden</option>
<option value="AL-Shorooq">AL-Shorooq</option>
<option value="Yam Beach">Yam Beach</option>
<option value="Sales Center">Sales Center</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="startDate">Start Date & Time</label>
<input class="form-control" type="datetime-local" name="startDate" id="startDateTime">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="endDateTime">End Date & Time</label>
<input class="form-control" type="datetime-local" name="endDateTime" id="endDateTime">
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_description">Case Description</label>
<textarea class="form-control" name="case_description" id="case_description" rows="3"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="actions_taken">Actions Taken</label>
<textarea class="form-control" name="actions_taken" id="actions_taken"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="details">Details</label>
<textarea class="form-control" name="case_details" id="case_details"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_notes">Notes</label>
<textarea name="case_notes" id="case_notes" class="form-control"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_recommendation">Recommendations</label>
<textarea name="case_recommendation" id="case_recommendation" class="form-control"></textarea>
</div>
</div>
<input type="hidden" id="caseId" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<button type="button" id="save_report_changes" class="btn btn-primary">Save changes</button>
</div>
<?php } //End php While ?>
Ajax:
$(document).ready(function() {
// Append values in input fields
$(document).on('click', 'a[data-role=update]', function(){
var id = $(this).data('id');
var cccEmployee = $("#"+id).children('td[data-target=cccEmployee]').text();
var irNumber = $("#"+id).children('td[data-target=IR_number]').text();
var caseType = $("#"+id).children('td[data-target=case_type]').text();
var caseLocation = $("#"+id).children('td[data-target=case_location]').text();
var startDateTime = $("#"+id).children('td[data-target=startDateTime]').text();
var endDateTime = $("#"+id).children('td[data-target=endDateTime]').text();
var caseDesc = $("#"+id).children('td[data-target=case_description]').text();
var actionsTaken = $("#"+id).children('td[data-target=actions_taken]').text();
var caseDetails = $("#"+id).children('td[data-target=case_details]').text();
var caseNotes = $("#"+id).children('td[data-target=case_notes]').text();
var caseRecommendation = $("#"+id).children('td[data-target=case_recommendation]').text();
//Append the variables
$('#cccEmployee').val(cccEmployee);
$('#IR_number').val(irNumber);
$('#case_type').val(caseType);
$('#case_location').val(caseLocation);
$('#startDateTime').val(startDateTime);
$('#endDateTime').val(endDateTime);
$('#case_description').val(caseDesc);
$('#actions_taken').val(actionsTaken);
$('#case_details').val(caseDetails);
$('#case_notes').val(caseNotes);
$('#case_recommendation').val(caseRecommendation);
$('#caseId').val(id);
$('#reportsModal').modal('toggle');
});
//Create event to get data from fields and update.
$('#save_report_changes').click(function() {
var id = $('#caseId').val();
var cccEmployee = $('#cccEmployee').val();
var irNumber = $('#IR_number').val();
var caseType = $('#case_type').val();
var caseLocation = $('#case_location').val();
var startDateTime = $('#startDateTime').val();
var endDateTime = $('#endDateTime').val();
var caseDesc = $('#case_description').val();
var actionsTaken = $('#actions_taken').val();
var caseDetails = $('#case_details').val();
var caseNotes = $('#case_notes').val();
var caseRecommendation = $('#case_recommendation').val();
$.ajax({
url: '/edit-report',
method: 'post',
data: {
id: id,
cccEmployee: cccEmployee,
irNumber: irNumber,
caseType: caseType,
caseLocation: caseLocation,
startDateTime: startDateTime,
endDateTime: endDateTime,
caseDesc: caseDesc,
actionsTaken: actionsTaken,
caseDetails: caseDetails,
caseNotes: caseNotes,
caseRecommendation: caseRecommendation
},
success: function(response) {
$("#"+id).children('td[data-target=cccEmployee]').text(cccEmployee);
$("#"+id).children('td[data-target=IR_number]').text(irNumber);
$("#"+id).children('td[data-target=case_type]').text(caseType);
$("#"+id).children('td[data-target=case_location]').text(caseLocation);
$("#"+id).children('td[data-target=startDateTime]').text(startDateTime);
$("#"+id).children('td[data-target=endDateTime]').text(endDateTime);
$("#"+id).children('td[data-target=case_description]').text(caseDesc);
$("#"+id).children('td[data-target=actions_taken]').text(actionsTaken);
$("#"+id).children('td[data-target=case_details]').text(caseDetails);
$("#"+id).children('td[data-target=case_notes]').text(caseNotes);
$("#"+id).children('td[data-target=case_recommendation]').text(caseRecommendation);
$('#reportsModal').modal('toggle');
},
});
});
});

Answer 1

You can use mb_strimwidth("Hello World", 0, 10, "...");
where "Hello Word is your description"
This will return This will return Hello W....