Hi I have been trying to follow this tutorial about inline editing http://www.vandelaydesign.com/inline-edit-with-ajax/ . I want to apply it in my data table. When the user clicks the edit button the corresponding columns within its line becomes an input, but I do not know how to turn it that way. In the tutorial it uses .prev in jquery to get the value of the of the span but I do not know how to do that in my case. This is what my table looks like:
Category name and desc should become inputs when edit button is clicked. How do I do that?
<tbody>
<?php foreach ($categories as $category) { ?>
<tr>
<td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?> </span> </td>
<td>
<?= $category->category_desc ?>
</td>
<td>
<?= $category->created_on ?>
</td>
<td>
<?= $category->updated_on ?>
</td>
<td>
<?= $category->status ?>
</td>
<td>
<button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
<!-- data-id="<?= $category->category_id ?>" -->
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
</td>
</tr>
<?php } ?>
</tbody>
Javascript:
$(document).on('click', '.edit_cat', function() {
console.log('edit category');
// console.log( $(this).data('id') );
var dataset = $(this).prev(".datainfo");
console.log(dataset);
var theid = dataset.attr("id");
console.log(theid);
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
});
I also need help in future proofing after solving this problem, How would I go about saving it, maybe getting the span id and start from there?
Datatables have a build in implementation of inline editing.
It gets installed as an own extension
Inline editing in Editor is activated through the use of the inline() API method. Simply call the method and pass in the cell you want to edit as the first parameter.
Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple
Related
I have a listeview ( table )that shows data of my database , i want to add filter or search box which helps the user to filter the table ( search his name or his infos make other values invisible ) ..
I am a beginner in php and js , could you help me or give any solution i can use it ?
thankyou
this is my php code(table):
<?php
$sql="select * from association ORDER BY id ASC";
$result=mysqli_query($con,$sql);
if($result){
$num = 1;
while($ass = mysqli_fetch_array($result)){
$idAss=$ass['idAss'];
$nom=$ass['nom'];
$typeActivite=$ass['typeActivite'];
$location=$ass['location'];
$adresse=$ass['adresse'];
$Admin=$ass['Admin'];
$numTel=$ass['numTel'];
$email=$ass['email'];
echo '
<tr>
<th scope="row">'.$num++.'</th>
<td>'.$idAss.'</td>
<td>'.$nom.'</td>
<td>'.$typeActivite.'</td>
<td>'.$location.'</td>
<td>'.$adresse.'</td>
<td>'.$Admin.'</td>
<td>'.$numTel.'</td>
<td>'.$email.'</td>
<td><button class="btn btn-primary">
<i class="fa fa-pencil" aria-hidden="true"></i>
تعديل
</button>
</td>
<td> <button class="btn" >
<i class="fa fa-trash-o" aria-hidden="true" red-color></i>
حذف
</button>
</td>
</tr>
';
} }
?>
and here is my table:
click to see the table
This is just an example that will search by a given name, you will need to perfect it and ensure you're safe against SQL Injection.
Create the form in an HTML file, for example form.html:
<html>
<body>
<form action="process_data.php" method="post">
Search by name: <input type="text" name="search_input">
<input type="submit">
</form>
</body>
</html>
Then in the PHP file you're calling (I called it process_data.php) just add and change these lines at the top:
//THIS IS JUST A SHORT EXAMPLE. IN THE PRODUCTION/FINAL VERSION YOU MUST SANITISE DATA!!
if (isset($_POST['search_input'])) $search = "WHERE nom = '$_POST[search_input]';
$search = mysqli_real_escape_string($con, $search);
$sql="select * from association $search ORDER BY id ASC";
I've created a modal box that will open when the user clicks the button but after a second it closes automatically and refreshes the webpage. I don't know what it causes but I think it is because the button is inside the while loop:
Here's my code snippet in PHP:
while{
echo "<tr>
<td align = 'center'>$Reporter_Fname $Reporter_Lname</td>
<td align = 'center'>$Report_Location</td>
<td align = 'center'>$Report_Latitude</td>
<td align = 'center'>$Report_Longitude</td>
<td align = 'center'>$Report_Date</td>
<td align = 'center'>$Report_Time</td>
<td align = 'center'>$Report_Note</td>
<td align = 'center'><button id='myBtn'>View Images</button> //THE BUTTON THAT WILL BE CLICKED TO OPEN MODAL BOX
</td>
<td><a href = 'Report_Status.php?positive=$Report_ID' role = 'button'> Positive </a><br><a href = 'Report_Status.php?negative=$Report_ID' role = 'button'> Negative </a></td></tr></thead>";
Snipper code HTML (When the button was clicked)
<div id='myModal' class='modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='close'>×</span>
<h2>Images</h2>
</div>
<div class='modal-body'>
<p>Images</p>
</div>
</div>
</div>
This HTML snipper code is now on the outside of the while loop in PHP
Here's the full code that I got from W3schools for more information: Modal Box using HTML, CSS & Javascript
How do I prevent the modal box from closing automatically and what causes the webage to refresh after clicking the button?
You have, inside your loop, a repetition of the id myBtn which could cause a malfunction in your script. You should have id's that are unique but I would just use a class instead:
while(true): ?>
<tr>
<td align = 'center'><?php echo $Reporter_Fname.' '.$Reporter_Lname ?></td>
<td align = 'center'><?php echo $Report_Location ?></td>
<td align = 'center'><?php echo $Report_Latitude ?></td>
<td align = 'center'><?php echo $Report_Longitude ?></td>
<td align = 'center'><?php echo $Report_Date ?></td>
<td align = 'center'><?php echo $Report_Time ?></td>
<td align = 'center'><?php echo $Report_Note ?></td>
<!-- Use class="myBtn" instead of id="myBtn" -->
<td align='center'><button class='myBtn'>View Images</button></td>
<td><a href='Report_Status.php?positive=<?php echo $Report_ID ?>' role = 'button'> Positive </a><br><a href='Report_Status.php?negative=<?php echo $Report_ID ?>' role = 'button'> Negative </a>
</td>
</tr>
<?php endwhile ?>
For the listener, I would just use jQuery but if not using that framework, you could do event listeners using basic javascript:
<script>
for(var i = 0; i < document.getElementsByClassName('myBtn').length; i++) {
document.getElementsByClassName('myBtn')[i].addEventListener('click', function(){
// If you are going to use only one modal, you should have a way to drop the
// images into the single modal, perhaps by using "innerHTML" and the use of "this"
document.getElementById('myModal').style.display = "block";
});
}
</script>
I want show post with for-each. My condition is 1st show 5 post and hide other post with a show more button if loop has more than 5 post, then when I click show more then will show other post and hide show more button and show less more button. If post has less then 5 then no showing show more button. How can I do that by jQuery?
<?php
foreach ($hotel_data as $key => $hoteldata)
{
//Show 3 lowest price of hotel link
if(isset($hoteldata[0]->rooms)){
/*$ii = 0;*/
foreach ($hoteldata[0]->rooms as $key => $bookinginfo) {
?>
<tr>
<td class="">
<div class="hotel_name">
<?php echo $bookinginfo->desc; ?>
</div>
</td>
<td class="booking-img">
<img src="http://pics.avs.io/hl_gates/100/30/<?php echo $bookinginfo->agencyId; ?>.png"/>
</td>
<td>
<div class="hotel-price">
Price : $ <?php echo $bookinginfo->price; ?>
</div>
</td>
<td class="booking-url">
BOOK NOW
</td>
</tr>
<?php
/*$ii++;
if($ii > 2){
break;
}*/
}
}
}
?>
You need to re-think your strategy. What you want can be best achieved with AJAX calls. Therefore you need to write your loop with with JS /jQuery. PHP would only handle the retrieval of posts.
For example, you can create an AJAX call that sends a POST request to a PHP script, sending the number of posts you would want. When PHP receives the request, it fetches the posts needed from the DB and sends the results back in JSON format, JS will then parse the results into your HTML.
The AJAX call can be called once at page load (loads first 5), then it can be called again when the "load more" button is clicked.
Take count of array if more than 5 show "show more" button. Please see example below:
<?php
// Get count
$count = count($hotel_data);
foreach ($hotel_data as $key => $hoteldata) {
//Show 3 lowest price of hotel link
if(isset($hoteldata[0]->rooms)) {
/*$ii = 0;*/
foreach ($hoteldata[0]->rooms as $key => $bookinginfo) {
?>
<tr>
<td class="">
<div class="hotel_name">
<?php echo $bookinginfo->desc; ?>
</div>
</td>
<td class="booking-img">
<img src="http://pics.avs.io/hl_gates/100/30/<?php echo $bookinginfo->agencyId; ?>.png"/>
</td>
<td>
<div class="hotel-price">
Price : $ <?php echo $bookinginfo->price; ?>
</div>
</td>
<td class="booking-url">
BOOK NOW
</td>
</tr>
<?php
}
}
if ($count>5) {
// Code for "show more" button
}
}
?>
Then you have to hide other post by some css class's style property display: none;.
For jQuery code, you have to make script on show more button and change property of other posts you have hide. Also change button text to "show less".
I have a function that monitors a list of checkboxes to detect if some are selected. If some are selected the button shows, otherwise the button hides. The checkbox lies within of a foreach in PHP to transform into a list of checkboxes.
The problem is that only the first checkbox shows the delete button.
agenda.php:
<tbody>
<form id="delTask" name="delTask" method="POST" action="">
<?php foreach ($tasks as $value): ?>
<tr>
<td>
<div class="checkbox">
<label>
<input name="excluir[]" value="<?php echo $value[0] ?>" id="taskSelect" type="checkbox">
</label>
</div>
</td>
<td><?php echo $value[1] ?></td>
<td><span class="label label-success">+50</span></td>
</tr>
<?php endforeach; ?>
</form>
</tbody>
app.js:
// Hide/Show button of del
$("#taskSelect").click(function () {
if( $("#taskSelect").is(':checked') ) {
$("#writeTask").hide();
document.getElementById("deleteTask").style.display = 'block';
} else {
$("#writeTask").show();
document.getElementById("deleteTask").style.display = 'none';
};
});
The problem is that you have many checkbox inputs with the ID taskSelect. Element IDs must be unique throughout the whole document. Instead you will want to use a class name, as the same class can be attached to multiple elements:
<input name="excluir[]" value="<?php echo $value[0] ?>" class="taskSelect" type="checkbox">
You then use a selector like .classname rather than #id in your jQuery click handler:
$(".taskSelect").click(function () {
...
});
As an aside, rather than doing document.getElementById("id").style.display to show and hide things, as your are using jQuery you can just use $("#id").show() and $("#id").hide() throughout.
I am trying to show a booking form when I click the button using jquery toggle.
HTML
foreach($result['apiAvailableBuses'] as $value){?>
<tr>
</td>
<td><?php echo $value['fare']; ?></td>
<td>
<?php echo $value['availableSeats'].' Seats'; ?>
<input type="button" id="<?php echo $i; ?>" class="btn btn-primary" value="Book" name="Book">
</td>
</tr>
<tr class="main">
<td colspan="5">
<div class="well" id="result<?php echo $i; ?>">Booking form here</div>
</td>
</tr>
<?php $i++; } ?>
Script
$(".main").hide();
$(".btn-primary").click(function(){
var id=$(this).attr('id');
$('#result'+id).toggle();
});
But when I click on the button I can't see the booking form div
In your script, you are hiding the parent tr using $(".main").hide(); and hence toggle of the child element is not working. To make it work you have to make visible the parent element and then toggle the div.
$(".main").hide();
$(".btn-primary").click(function(){
$(".main").show();
var id=$(this).attr('id');
$('#result'+id).toggle();
});
Now it should work.
Try using .on()
$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
var id=$(this).attr('id');
$('#result'+id).toggle();
});
});
UPDATE
Another thing I want to explain.
You are clicking on a button and then getting its ID and then doing .toggle() with it.
I think you can do this way also.
$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
//var id=$(this).attr('id');
//$('#result'+id).toggle();
$(this).closest("tr").next("tr").find(".well").toggle();
});
});