I have a html/php code as shown below. The below html/php code is working in a way that on adding rows, we can select date from every row and can save it as well.
Two things need to be done.
On clicking Delete button, it should remove the value from the JSON array because everything is pulled from the JSON after saving the form.
Also, on clicking Delete button it should delete the complete row from the DOM.
you should give each added row an id corresponding to its rank:
row.id=i.toString();
then use the following code to remove the row:
var row = document.getElementById(rowrankid);
row.parentNode.removeChild(row);
I have prepared a code sample for you using your example that does exactly what you say.
It is using a javascript fetch post request to post to the script you have provided to remove the dom elements and update the json file.
I have changed some of your paths slightly so you will need to change those back (add in the ../feeds/ parent directory)
Once the user has pressed the button the page will reload, showing the updated interface that is loaded from the json file.
There are some improvements that could be made, for example the javascript is not checking to make sure the request was successful before reloading, but as the input is date select it should be ok.
<?php
if(file_exists('./ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('./ptp-ess_landing_house.json'));
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$_POST = json_decode(file_get_contents('php://input'), true);
if(isset($_POST['requestType']) && in_array($_POST['requestType'], ['remove'])) {
switch ($_POST['requestType']) {
case 'remove' :
//Unset the values
unset($data->row_delete[$_POST['data'] -1]);
unset($data->house_sitting_date[$_POST['data'] -1]);
//We are reindexing the arrays as we have deleted some rows, note that we are using +1 array indexes
$data->row_delete = array_values($data->row_delete);
$data->house_sitting_date = array_values($data->house_sitting_date);
foreach($data->row_delete as $key=>$value) {
$data->row_delete[$key] = strval($key+1);
}
//Write the file back
$fp = fopen('./ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($data));
fclose($fp);
header("HTTP/1.1 200 OK");
echo 'ok';
die;
break;
default:
}
}
}
?>
<script>
function rowDelete(row) {
//Make a request to your entry file (index.php here) to do the removal
fetch('/index.php', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({requestType: 'remove', data: row})
}).then(function(response) {
location.reload();
return response;
});
}
</script>
<?php if($data) { ?>
<form method="post">
<div id="rows" style="display:flex; justify-content: center;"><!-- Big div START -->
<!-- Remove Button START -->
<div class="rows-delete">
<h4 style="text-align:center;">Delete Rows</h4>
<?php if (empty($data->row_delete)) { ?>
<div class="row-delete" style="margin-right:30px; margin-top:22.5px;">
<button type="button" id="delete" onclick="rowDelete()">Remove</button>
<input type="hidden" name="row_delete[]" value="1" />
</div>
<?php } else { ?>
<?php foreach ($data->row_delete as $row_delete){ ?>
<div class="row-delete" style="margin-right:30px; margin-top:22.5px;">
<button id="delete" type="button" onclick="rowDelete(<?php echo $row_delete;?>)">Remove</button>
<input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
</div>
<?php }} ?>
</div>
<!-- Remove Button END -->
<!-- Sitting Date START -->
<div class="sitting-days">
<h4 style="text-align:center;">Select Date</h4>
<?php if (empty($data->house_sitting_date)) { ?>
<!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
</div>
<?php } else { ?>
<?php foreach ($data->house_sitting_date as $date){ ?>
<!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
</div>
<!-- Select Date END -->
<?php }} ?>
</div>
<!-- Sitting Date END -->
</div><!-- Big div END -->
</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>
If your json is known at the front-end (which I think you are implying, since your rowDelete is a JS-function), you can pass this with the call to rowDelete. Then you can traverse the DOM to get to value the corresponding sibling input-field (perhaps something like this.parentNode.childNodes[1]).
Once you have that value, you can easily remove it from the corrsponding array in your json:
let d = '2020-01-30'
let idx = arr.indexOf(d)
let newdates = ([...arr.slice(0,idx), ...arr.slice(idx+1)])
data.house_sitting_date = newdates
(with some additional index bounds checking, of course).
After that, you can perform a similar DOM traversal to remove the corresponding element from the DOM.
Flash, unfortunately, the desing of the code itself is not much professional... there are separate loops for rows (in php), which instead should be only 1 loop, like (with example simple Javascript binding on click):
<?php
for ($i=0; $i<count($data["house_sitting_date"]); $i++)
{
echo '<div class="remove"><a id="'.$data["row_delete"][$i].'" onclick="deleteRow(this);">Remove</a></div>';
echo '<div class="date">....</div>';
...
}
?>
<script> function deleteRow(el) { el.remove(); } </script>
also, lots of embedded style="".. codes, instead you might use 1 style file.
This is how I did in past, and it works perfectly
Prerequisite for this answer to work is each button and input field should be in DIV with unique id and there should be container for all these div in my case its .
On Add button(if you have one) you need clone node, and paste it under or above the element where it was clicked,
// Create a clone of element with id ddl_1:
let clone = document.querySelector('#row'+rownumber).cloneNode( true );
// Append the newly created element on element p
document.querySelector('p').appendChild( clone );
Then every time you add a new row or delete a row you need to append ids on these row, to do this you would a common class for all these rows in my case I used, rows
function changeids()
{
let rows =document.getElementsByClassName('rows');
for(let i=0; i<rows.length; i++)
{
let thisid="row"+i;
rows[i].setAttribute("id", thisid);
let thisAddButton = rows[i].getElementsByClassName("add")[0];
let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];
let onclickaddfunction = "addrow("+i+")";
thisAddButton.setAttribute("onclick", onclickaddfunction);
let onclickDeletefunction = "removerow("+i+")";
thisDeleteButton.setAttribute("onclick", onclickDeletefunction);
}
}
Then when you remove you need to remove node and call changeids again
function removerow(rownumber){
document.getElementById('row'+rownumber).remove();
changeids();
}
This would give you whole working idea of add and delete rows, whole code below please ignore my messy code, just did it to give you and idea
<p>
<div id="row1" class="rows">
<button class="add" onclick="addrow(1)">add</button>
<button class="delete" onclick="removerow(1)"> remove </button>
<input type="text">
</div>
</p>
<script>
function addrow(rownumber)
{
// Create a clone of element with id ddl_1:
let clone = document.querySelector('#row'+rownumber).cloneNode( true );
// Append the newly created element on element p
document.querySelector('p').appendChild( clone );
changeids();
}
function removerow(rownumber)
{
document.getElementById('row'+rownumber).remove();
changeids();
}
function changeids()
{
let rows =document.getElementsByClassName('rows')
for(let i=0; i<rows.length; i++)
{
let thisid="row"+i;
rows[i].setAttribute("id", thisid);
let thisAddButton = rows[i].getElementsByClassName("add")[0];
let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];
let onclickaddfunction = "addrow("+i+")";
thisAddButton.setAttribute("onclick", onclickaddfunction);
let onclickDeletefunction = "removerow("+i+")";
thisDeleteButton.setAttribute("onclick", onclickDeletefunction);
}
}
</script>
To delete row from dom, you have to specify unique id for main element of row and you can use [ElementObject].remove() method to delete, So everything inside that will be removed.
Also You should simplify and change JSON data, so that it will delete from json also using ajax with using single id(key) as parameter.
Here is the working code:
<?php
if (!empty($_GET)) {
if (!empty($_GET['action']) && $_GET['action'] == 'delete') {
if(file_exists('ptp-ess_landing_house.json')) {
$data = json_decode(file_get_contents('ptp-ess_landing_house.json'), true);
if (!empty($_GET['row_number'])) {
unset($data[$_GET['row_number']]);
$fp = fopen('ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($data));
fclose($fp);
echo 1;
exit;
}
}
echo 0;
exit;
}
}
if (!empty($_POST)) {
$output = array();
if (!empty($_POST['row_item'])) {
$output = $_POST['row_item'];
}
$fp = fopen('ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
$data = array();
if(file_exists('ptp-ess_landing_house.json')) {
$data = json_decode(file_get_contents('ptp-ess_landing_house.json'), true);
}
?><form method="post">
<!-- Add New Row Button START -->
<div class="plus-minus-button" style="text-align:center;">
<button type="button" id="addRow" onclick="rowAdd()">+</button>
</div>
<!-- Add New Row Button END -->
<div id="maindiv">
<div style="display:flex; justify-content: center;">
<div class="rows-delete" style="text-align:center;">
<div class="row-delete" style="margin-right:30px;">
<h4 style="text-align:center;">Delete Rows</h4>
</div>
</div>
<div class="sitting-days" style="text-align:center;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
</div>
</div>
<div class="choose-options" style="text-align:center;">
<div class="yes-no-option" style="display:inline-grid;">
<h4 style="text-align:center;">Yes/No</h4>
</div>
</div>
</div>
<!-- Big div START --><?php
$totalrow = 0;
foreach ($data AS $key => $row) {
?><div id="row-<?php echo $key; ?>" style="display:flex; justify-content: center; margin-top:20px;"><?php
?><div class="rows-delete" style="text-align:center;">
<div class="row-delete" style="margin-right:30px;">
<button type="button" class="delete" onClick="delete_row(this.value)" value="<?php echo $key; ?>">Remove</button>
<input type="hidden" name="row_item[<?php echo $key; ?>][row_delete]" value="<?php echo $row['row_delete'];?>" />
</div>
</div>
<!-- Remove Button END -->
<!-- This is what I have tried to add a button (END) -->
<!-- Sitting Date START -->
<div class="sitting-days" style="text-align:center;">
<div class="select-date" style="margin-right:30px;">
<input type="date" class="house-sitting-date" name="row_item[<?php echo $key; ?>][house_sitting_date]" value="<?php echo $row['house_sitting_date']; ?>">
</div>
</div>
<!-- Sitting Date END -->
<!-- YES/NO START --><?php
?><div class="choose-options">
<div class="yes-no-option" style="display:inline-grid;">
<select name="row_item[<?php echo $key; ?>][house_sitting_date_yes_no]" class="house-yes-no" style="height:24px; ">
<option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "nada" ) echo "selected";?>>Please choose an option</option>
<option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "yes" ) echo "selected";?>>Yes</option>
<option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "no" ) echo "selected";?>>No</option>
</select>
</div>
</div>
<!-- YES/NO END -->
</div><?php
if ($key > $totalrow) $totalrow = $key;
else $totalrow++;
}
?>
<input type="hidden" name="totalrow" id="totalrow" value="<?php echo $totalrow; ?>">
</div>
<!-- Big div END -->
<hr />
<div style="text-align:center;">
<input type="submit" value="submit" />
</div>
</form>
<script>
function delete_row(row_number) {
var data = '<?php echo json_encode($data) ?>';
data = JSON.parse(data);
if (typeof(data[row_number]) != undefined) {
var request = new XMLHttpRequest();
request.open("GET", "index.php?action=delete&row_number=" + row_number);
request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var row = document.getElementById('row-'+row_number);
row.remove();
}
}
request.send();
}
else {
var row = document.getElementById('row-'+row_number);
row.remove();
}
}
function rowAdd(event) {
var totalrow = document.getElementById("totalrow").value;
totalrow = parseInt(totalrow) + 1;
document.getElementById("maindiv").insertAdjacentHTML('beforeend', newRow(totalrow));
document.getElementById("totalrow").value = totalrow;
}
function newRow(row_number) {
return `<div id="row-` + row_number + `" class="sitting-days" style="display:flex; justify-content:center; margin-top:20px;">
<div class="rows-delete" style="text-align:center;">
<div class="row-delete" style="margin-right:30px;">
<button type="button" class="delete" onClick="delete_row(this.value)" value="` + row_number + `">Remove</button>
<input type="hidden" name="row_item[` + row_number + `][row_delete]" value="` + row_number + `" />
</div>
</div>
<div class="sitting-days" style="text-align:center;">
<div class="select-date" style="margin-right:30px;">
<input type="date" class="house-sitting-date" name="row_item[` + row_number + `][house_sitting_date]" value="">
</div>
</div>
<div class="choose-options">
<div class="yes-no-option" style="display:inline-grid;">
<select name="row_item[` + row_number + `][house_sitting_date_yes_no]" class="house-yes-no" style="height:24px; ">
<option value="nada">Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>`;
}
</script>
I have a shop which uses dynamic content. Users can click on checkboxes to view products of specific categories. For this I am using jQuery to get products from another php file (works fine).
shop.php:
<input type="checkbox" class="category_btn" name="cat" id="category-books" value="books">
<input type="checkbox" class="category_btn" name="cat" id="category-dvds" value="dvds">
...
<div id="allProducts">
Load dynamic content with jQuery here...
</div>
loadProducts.php:
<?php
$categories = $_POST['categories'];
$productsData = load_products($categories);
for ($i = 0; $i < $amount; $i++) {?>
<div class="singleproduct">
<a href="product.php?id=<?php echo $productsData[$i]['ID'] ?>"><img
src="images/<?php echo get_image($productsData[$i]['ID']) ?>"
alt=""></a>
<p class="prod-title"><?php echo $productsData[$i]['title'] ?></p>
</div>
<?php }?>
jQuery code (shop.php):
<script>
jQuery(document).ready(function($) {
var checkedCats = [];
$(".category_btn:checked").each(function() {
checkedCats.push($(this).val());
});
$(".category_btn").click(function () {
var arraydata = {"categories[]" : checkedCats};
$.post('loadProducts.php', arraydata, function (data) {
var test = $('#allProducts').html(data);
});
});
};
</script>
Now if a user clicks on a product to view details and then returns to shop.php by using the back-button, he will see the main page of the shop with no dynamic loaded content. Is it possible to save the last view with marked checkboxes and loaded products?
I think history.js is the solution, but I have no idea how to do this. Maybe somebody can help...
I have used jquery AJAX to load more posts from MySQL database. It brings up the right content and works just fine.
The only problem is that it displays the data after the first two pictures every time.
Let's say there are 10 pictures in total and the first 2 are already displayed.
image 1
image 2
When the load more button is clicked here is how it looks
image 1
image 2
image 3
image 4
Now if i press the load more button again, here is how it displays the content
image 1
image 2
image 5
image 6
image 3
image 4
If i press it again it will paste the 7 and 8 after the 1 and 2 and so on
Here is my HTML
$rowperpage = 2;
$select_count=mysqli_query($con,"SELECT count(*) as allcount from gif where status = 1");
$select_data=mysqli_fetch_array($select_count);
$allcount=$select_data['allcount'];
$run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 order by id desc limit ".$rowperpage);
if(!$run){
echo mysqli_error($con);
}
while ($row=mysqli_fetch_array($run)) {
$image=$row['gif'];
$id=$row['id'];
$title=$row['title'];
?>
<div class = "load-more-post">
<div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;">
<div classs="panel panel-info">
<div classs="panel panel-body ">
<a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail" style='height: 260px; width: 250px; '></a>
</div>
</div>
</div>
</div>
<?php }?>
<h1 class="load-more">Load More</h1>
<input type="hidden" id="row" value="<?php echo $id; ?>">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
Here is my Javascript
$(document).ready(function(){
// Load more data
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
//row = row + 2;
if(row != 4){
$("#row").val(row);
$.ajax({
url: 'getData.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
// Setting little delay while displaying new content
setTimeout(function() {
// appending posts after last post with class="post"
$(".load-more-post").after(response);
//var rowno = row + 2;
var thenewid = Number($('#newid').val());
alert(thenewid);
$("#row").val(thenewid);
// checking row value is greater than allcount or not
if(thenewid == 4){
// Change the text and background
$('.load-more').text("No more posts");
$('.load-more').addClass('inactiveLink');
}
else{
$(".load-more").text("Load more");
}
}, 2000);
}
});
}
});
});
and here is the PHP file where I am getting my datafrom. getData.php
$row = $_POST['row'];
$rowperpage = 2;
// selecting posts
$run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 and id < $row order by id desc limit ".$rowperpage);
if(!$run){
echo mysqli_error($con);
}
while($row = mysqli_fetch_array($run)){
$image=$row['gif'];
$id=$row['id'];
$title=$row['title'];
?>
<div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;">
<div classs="panel panel-info">
<div classs="panel panel-body" >
<a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail" style='height: 260px; width: 250px; '></a>
</div>
</div>
</div>
<?php
}?>
<input type="hidden" id="newid" value="<?php echo $id; ?>">
You use
$(".load-more-post").after(response);
to insert your new posts after the .load-more-post div. This particular div is wrapped around your initial posts, so that explains why it gets added there. If you want the oldest always be the last, I'd suggest to use .before instead, like so:
$(".load-more").before(response);
I'm building a custom add to cart system. One product can have many criteria such as color, size etc. These criteria can be added dynamically in the backend.
Now in the front end, I use php to fetch all the dynamic criteria to my product page. The script is as follows:
<form class="cart">
<div class="add-to-cart-table">
<?php
$sqlac = "SELECT * FROM sym_product_option WHERE product_id = '$pk'";
$stmtac = $dbo->prepare($sqlac);
$stmtac->execute();
while($rowac = $stmtac->fetch(PDO::FETCH_ASSOC)){
$huhu = $rowac["option_id"];
$sqlag = "SELECT * FROM sym_product_option_value WHERE option_id = '$huhu'";
$stmtag = $dbo->prepare($sqlag);
$stmtag->execute();
?>
<div class="option">
<?php echo $rowac["option_name"]; ?>
<select name="" class="form-control" class="option" onchange="calc()" data-option-id="<?php echo $rowac["option_"]; ?>" >
<?php while($rowag = $stmtag->fetch(PDO::FETCH_ASSOC)){
if($rowag["value_price"] == "0.00"){
$demson = "";
} else {
$demson = "Add-On RM ".$rowag["value_price"];
}
?>
<option value="<?php echo $rowag["value_id"]; ?>" data-price="<?php echo $rowag["value_price"]; ?>"><?php echo $rowag["value_name"]." ".$demson; ?> </option>
<?php } ?>
</select>
</div>
<?php } ?>
<div style="margin-top: 30px;" >
<button type="button" class="button" onclick="addtocart();" style="width:100%;">Add to cart</button>
</div>
</div>
Now I'm wondering how to use jquery to fetch each criteria ID(data-option-id), criteria option value(select dropdown value) and combine them into an array to be sent to php backend. I think the array should look like this:
$data = array ( "0" => array ( "option-id" => "1", "option-value" => "5"), "1" => array ( "option-id" => "2", "option-value" => "8"));
Can someone help me on this? Really appreciate your help. Thanks!
I think what you want to do is to add a start and end form tag surrounding the option dropdowns. After that you can use the code below to serialize the form and send it to the server with ajax
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
I have a page that adds a new form to the bottom of a list of forms when the previous one was submitted and although I would like the page to scroll when it reaches a certain height so it scrolls to the top hiding the oldest form and revealing the new one at the bottom.
The new forms are creating using AJAX and that part works ok, it's just the scrolling bit I can't get working.
<div id="no_image_audit_wrapper" class="content_wrapper">
<ul id="responds">
<?php
$sql = "SELECT * FROM add_delete_record";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
//get all records from add_delete_record table
while($row = mysqli_fetch_array($result))
{ ?>
<li id="item_<? echo $row['id'];?>">
<div class="del_wrapper"><a href="#" class="del_button" id="del-<? echo $row['id']; ?>">
<img src="images/icon_del.gif" border="0" />
</a></div>
<? echo $row["content"].' - '.$row["dropdown"].'</li>';
}
?>
</ul>
<div class="form_style">
<form id="test_form">
<select id="test" name="test">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<input type="button" class="FormSubmit" name="FormSubmit" id="FormSubmit" value="submit">
</form>
</div>
</div>
<script>
$(document).ready(function(){
var $cont = $('.content_wrapper');
$cont[0].scrollTop = $cont[0].scrollHeight;
$('.FormSubmit').keyup(function(e){
if(e.keycode == 6){
$cont.animate({ scrollTop: $cont[0].scrollHeight }, "slow");
$(this).val('');
}
})
}
</script>
Use the below code to scroll to bottom. You can animate to scroll slowly
Javascript
window.scrollTo(0,document.body.scrollHeight);
JQuery
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
Try something like this
Your_newly_added_form.scrollIntoView(true);
Or you can create a function like this
function scroll(elm){
elm.scrollIntoView(true);
}
and call that function after the completion of ajax call.
I sorted it by adding
$("#test_form").get(0).scrollIntoView();
into the success function
success:function(response){
$("#responds").append(response);
$("#contentText").val(''); //empty text field on successful
$("#test_form").get(0).scrollIntoView();
}