We Keep Coding

Bootstrap toggle disappears when paginating using Jquery DataTable

I am working on an application that manages the presence of participants at an event. I have a problem with the bootstrap toggle. I'm using it in a Jquery datatable. As soon as I change the page to go to the next page with the arrows of the table the toggle disappears i have just a white checkbox. I have the impression that it does not reload when the new page is loaded. Somebody would have a solution to this problem. I put the captures of the bugs in attachments.
Thanks in advance.
Bootstrap Toogle:
DEMO
<?php include 'admin/db_connect.php' ?>
<?php
$event = $conn->query("SELECT * FROM events where md5(id) = '{$_GET['c']}'")->fetch_array();
foreach($event as $k => $v){
$$k = $v;
}
?>
<div class="content-header">
<div class="container-md">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0"><?php echo ucwords($event)." Event" ?></h1>
</div><!-- /.col -->
</div><!-- /.row -->
<hr class="border-primary">
</div><!-- /.container-fluid -->
</div>
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-outline card-primary">
<div class="card-header">
<div class="card-tools d-flex justify-content-end" style="width: calc(40%)">
<a class="btn btn-block btn-sm btn-default btn-flat border-primary col-sm-4 mr-2" href="javascript:void(0)" onclick="location.reload()"><i class="fa fa-redo"></i> Rafraîchir</a>
<?php if($status != 2): ?>
<!--<a class="btn btn-block btn-sm btn-default btn-flat border-primary new_attendee m-0 col-sm-4" href="javascript:void(0)"><i class="fa fa-plus"></i> Nouveau participant</a>-->
<?php endif; ?>
</div>
</div>
<div class="card-body">
<?php if($status == 2): ?>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> L'inscription et la participation à l'événement sont désormais closes. </div>
<?php endif; ?>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Noms & prénoms</th>
<th>Sexe</th>
<th>Email</th>
<th>Participation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$qry = $conn->query("SELECT a.*,concat(a.lastname,', ',a.firstname,' ',a.middlename) as name,e.event FROM attendees a inner join events e on e.id = a.event_id where e.id = $id order by unix_timestamp(e.date_created) desc ");
while($row= $qry->fetch_assoc()):
?>
<tr>
<th class="text-center"><?php echo $i++ ?></th>
<td><b><?php echo ucwords($row['name']) ?></b></td>
<td><b><?php echo ucwords($row['gender']) ?></b></td>
<td><b><?php echo $row['email'] ?></b></td>
<td class="text-center">
<input type="checkbox" name="status_chk" id="" data-bootstrap-switch data-toggle="toggle" data-on="Present" data-off="Waiting" class="switch-toggle status_chk" data-size="xs" data-onstyle="success" data-offstyle="danger" data-width="5rem" data-id='<?php echo $row['id'] ?>' <?php echo $row['status'] == '1' ? 'checked' : '' ?>>
</td>
<td class="text-center">
<div class="btn-group">
<?php if($status != 2): ?>
<button href="button" class="btn btn-primary btn-flat edit_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-edit"></i>
</button>
<?php endif; ?>
<button href="button" class="btn btn-info btn-flat view_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-eye"></i>
</button>
<?php if($status != 2): ?>
<button type="button" class="btn btn-danger btn-flat delete_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-trash"></i>
</button>
<?php endif; ?>
</div>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_attendee').click(function(){
uni_modal("Détails du participant","view_attendee.php?id="+$(this).attr('data-id'))
})
$('.new_attendee').click(function(){
uni_modal("Nouveau participant","manage_attendee.php?event_id=<?php echo $id ?>","mid-large")
})
$('.edit_attendee').click(function(){
uni_modal("Modifier les détails du participant","manage_attendee.php?id="+$(this).attr('data-id')+"&event_id=<?php echo $id ?>","mid-large")
})
$('.delete_attendee').click(function(){
_conf("Êtes-vous sûr de supprimer ce participant ?","delete_attendee",[$(this).attr('data-id')])
})
$('.status_chk').change(function(){
var status = $(this).prop('checked') == true ? 1 : 2;
if($(this).attr('data-state-stats') !== undefined && $(this).attr('data-state-stats') == 'error'){
$(this).removeAttr('data-state-stats')
return false;
}
var _this = $(this)
// return false;
var id = $(this).attr('data-id');
start_load()
$.ajax({
url:'admin/ajax.php?action=update_attendee_stats',
method:'POST',
data:{id:id,status:status},
error:function(err){
console.log(err)
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
},
success:function(resp){
if(resp == 1){
alert_toast("attendee status successfully updated.",'success')
end_load()
}else if(resp == 2){
alert_toast("Event Registration and Attendance is close.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
setTimeout(function(){
location.reload()
},2000)
}else{
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
}
}
})
})
$('table').dataTable()
})
function delete_attendee($id){
start_load()
$.ajax({
url:'admin/ajax.php?action=delete_attendee',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)
}
}
})
}
</script>

it looks like your problem is in this file:
admin/ajax.php?action=update_attendee_stats
can you share the script here?

Ajax not working for second time for duplicate value

While I am submitting this form via ajax it gets only the fist item. I am new so from the last three day I am looking on the web for a solution bit field. please someone help me.
<?php
include 'db.php';
$result = $mysqli -> query("SELECT * FROM AlmeenaShop LIMIT 8 ");
if($result -> num_rows <1){
/*echo"<h2 >No Record Found</h2>";*/
}else{
?>
<!DOCTYPE html>
<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success" style="display:none;">
×
</div>
<?php foreach ($result as $row ) { ?>
<form id="fupForm" name="form1" method="post">
<div class="single-products">
<div class="productinfo text-center"><img width="200" height="250" alt="" src="<?php echo $row['ImageLocation'] ; ?> " />
<?php if ($row['OfferPrice']>0): ?>
<h2><?php echo "৳ ". $row['OfferPrice'] ." /-"; ?><del class="text-primary"><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></del></h2>
<?php else : ?>
<h2><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></h2>
<?php endif ?>
<p><?php echo $row['ProductName'] ; ?></p>
<p><input type="number" name="ProductQuantity" value="1" id="ProductQuantity<?php echo $row['StoreID'] ; ?>" step="1"></p>
<p><input type="hidden" id="StoreID<?php echo $row['StoreID'] ; ?>" name="StoreID" value="<?php echo $row['StoreID'] ; ?>"></p>
</div>
</div>
<input type="button" name="target" class="btn btn-primary" value="Save to database" id="<?php echo $row['StoreID'] ; ?>">
</form>
</div>
<?php
} /* FOr Whole Loop*/
}/* for if then else loop*/
?>
<script>
$(document).ready(function() {
$('.btn').on('click', function() {
var target = $(".btn").attr("id");
$("#"+target).attr("disabled", "disabled");
var StoreID = $('#StoreID'+target).val();
var ProductQuantity = $('#ProductQuantity'+target).val();
if(StoreID!="" && ProductQuantity!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
StoreID: StoreID,
ProductQuantity: ProductQuantity
},
cache: false,
success: function(){
alert("ok");
}
});
}
else{
alert('Please fill all the field !StoreID: StoreID , ProductQuantity: ProductQuantity');
}
});
});
</script>
</body>
</html>

<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
<?php
session_start();
include 'db.php';
//Get the current page number
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
//The formula for php pagination
$no_of_records_per_page = 21;
$offset = ($pageno-1) * $no_of_records_per_page;
//Get the number of total number of pages
$result = $mysqli -> query("SELECT * FROM AlmeenaShop ");
$total_rows=$result -> num_rows;
$total_pages = ceil($total_rows / $no_of_records_per_page);
//Constructing the SQL Query for pagination
$ConstructingPagination= $mysqli -> query("SELECT * FROM AlmeenaShop ORDER BY StoreID DESC LIMIT $offset, $no_of_records_per_page");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Almeena Shop</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-----------Nav Bat---------------->
<div class="container">
<!-- Navigation Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-white">
<H1><span style="color:yellow">Almeena</span> <span style="color:white">Shop</span></H1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a style="color:gold" class="nav-link" href="MyCart.php"><i style="color:gold" class="fa fa-shopping-cart"></i> <?php echo $ItemCount=count($_SESSION['cart']); ?></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Navigation Start -->
<div class="container bg-light p-5">
<!-------####### Carosel Start ###########-------------------->
<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">
<div class="carousel-inner ">
<div class="carousel-item active">
<img src="StoreImg/grocery_3.jpg" height="300"class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="StoreImg/Shopping-basket.jpg" height="300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="StoreImg/3c.jpg" height="300" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-------####### Carosel END ###########-------------------->
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<!--------------------------LEft Cploum For Category Start ---------------------------------------->
<div class="col-lg-3 mt-5">
<?php
$ProductCategoryResult = $mysqli -> query ("SELECT ProductCategory, count(ProductCategory)AS PCC FROM AlmeenaShop GROUP BY ProductCategory ORDER BY ProductCategory");
?>
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header"><h5>Our Products</h5></div>
<div class="card-body text-primary">
<?php foreach ($ProductCategoryResult as $PCrow){
?>
<div class=" card-title" data-toggle="collapse" data-target="#<?php echo $PCrow['ProductCategory']; ?>" ><?php echo $PCrow['ProductCategory']; ?>
<div class="list-group collapse" id="<?php echo $PCrow['ProductCategory']; ?>" >
<ul>
<?php
$ProductSubCategoryResult = $mysqli -> query("SELECT ProductSubCategory FROM AlmeenaShop WHERE ProductCategory='".$PCrow['ProductCategory']."' GROUP BY ProductSubCategory ORDER BY ProductSubCategory ");
foreach ($ProductSubCategoryResult as $PSCrow){
?>
<li><?php echo $PSCrow['ProductSubCategory'];?> </li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
<div class=" card-title" data-toggle="collapse" data-target="#demo241">Offer
<div class="list-group collapse" id="demo241" >
<ul>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
</ul>
</div></div>
</div>
</div>
</div>
<!-- /.col-lg-3 -->
<!--------------------------LEft Cploum For Category End ---------------------------------------->
<!-----#########################Rignt Cploum For Product Start ############################------>
<div class="col-lg-9 mt-5">
<ul class="pagination">
<li class="page-item" ><a class="page-link" href="?pageno=1">First</a></li>
<li class="page-item <?php if($pageno <= 1){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
</li>
<li class=" page-item <?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
</li>
<li class="page-item"><a class="page-link" href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
</ul>
<p>Page <?php echo $total_pages; ?> of <?php echo $pageno; ?></p>
<div class="row">
<?php foreach ($ConstructingPagination as $row) { ?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100" >
<img class="card-img-top p-2" src="http://almeenashop.com/<?php echo $row['ImageLocation'] ; ?>" alt="">
<div class="card-body">
<h4 class="card-title">
<p style="color:black" ><?php echo $row['ProductName'] ; ?></p>
<a class="text-success" href="#">
<p style="color:orange">Price :</p>
<?php if ($row['OfferPrice']>0): ?>
<?php echo "৳ ". $row['OfferPrice'] ." /-"; ?><br /><del class="text-primary"><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></del>
<?php else : ?>
<?php echo "৳ ". $row['SalesPrice'] ." /-"; ?>
<?php endif ?>
</a>
</h4>
</div>
<div class="card-footer">
<form id="CartForm" name="form1" method="post" enctype="multipart/form-data">
<input type="hidden" name="PImg" id="PImg_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['ImageLocation'] ; ?>">
<input type="hidden" name="PName" id="PName_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['ProductName'] ; ?>">
<input type="hidden" name="PRPrice" id="PRPrice_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['SalesPrice'] ; ?>">
<input type="hidden" name="POPrice" id="POPrice_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['OfferPrice'] ; ?>">
<input type="hidden" name="PQ" id="PQ_<?php echo $row['StoreID'] ; ?>" value="1">
<input type="hidden" name="PSID" id="PSID_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['StoreID'] ; ?>">
<button type="button" class="btn btn-primary" id="<?php echo $row['StoreID'] ; ?>">Add to Cart</button>
</form>
| Details
</div>
</div>
</div>
<?php } ?>
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
<!-----######################----Rignt Cploum For Product End -----##########################---------------->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!------- &&&&&&&& Footer Start &&&&&&&&&&&&&&------------>
<footer id="footer">
<div class="footer-widget bg-dark text-white">
<div class="container pt-4 pb-5">
<div class="row">
<div class="col-sm-2">
<div class="single-widget">
<h5>Service</h5>
<ul>
<li>Online Help</li>
<li>Contact Us</li>
<li>Order Status</li>
<li>Change Location</li>
<li>FAQ’s</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>Quock Shop</h5>
<ul>
<li>T-Shirt</li>
<li>Mens</li>
<li>Womens</li>
<li>Gift Cards</li>
<li>Shoes</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>Policies</h5>
<ul>
<li>Terms of Use</li>
<li>Privecy Policy</li>
<li>Refund Policy</li>
<li>Billing System</li>
<li>Ticket System</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>About Shopper</h5>
<ul>
<li>Company Information</li>
<li>Careers</li>
<li>Store Location</li>
<li>Affillate Program</li>
<li>Copyright</li>
</ul>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="single-widget">
<h5>News</h5>
<form action="#" class="searchform"><input placeholder="Your email address" type="text" /><button class="btn btn-default" type="submit"></button>
<p>Get the most recent updates from<br />
our site and be updated your self...</p>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2020 Inc. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!------- &&&&&&&& Footer End &&&&&&&&&&&&&&------------>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
</body>
</html>

How to get data from a form using JS/JQuery and pass info to a controller using yii2?

Im trying the following:
I have a form where some columns are created dynamically depending on the length of a certain array as follows:
<div class="row box-table">
<div class="col-sm-12">
<div class="panel-heading bold panel-title">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> text-center">
<span><?= Yii::t('app', 'Referral Code') ?></span>
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFillers[0]['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<span><?= $key ?></span>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<span><?= Yii::t('app', 'Actions') ?></span>
</div>
<!-- Actions -->
</div>
<!--<div data-key="%{id}" class="hidden row-model">-->
<div data-key="%{id}" class="row-model">
<div class="table row-type edit-model">
<!--<form id="%{id}" method="post">-->
<form id="formulario" method="post">
<?php foreach ($hbwellMarginsDataFillers as $hbwellMarginsDataFiller): ?>
<div class="row">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> <?= $style ?> text-center">
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[referralCode]" data-original="%{referralCode}"><?= $hbwellMarginsDataFiller['referralCode'] ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-referralCode"><input type="text" id="hbwell-margins-referralCode" name="HbwellMargins[referralCode]" value="<?= $hbwellMarginsDataFiller['referralCode'] ?>" class="form-control"></div>
</span>
<!-- ORIGINAL -->
<?/*= $hbwellMarginsDataFiller['referralCode'] */?>
<!-- ORIGINAL -->
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFiller['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<?php if($value === null): ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}">null</span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span>null</span>-->
<!-- ORIGINAL -->
<?php else: ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}"><?= $value ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="<?= $value ?>" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span><?/*= $value */?></span>-->
<!-- ORIGINAL -->
<?php endif ?>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<!--<div class="col-xs-<?/*= $widthActionsColumn */?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button"><span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span></a>
<button data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept"><span class="glyphicon glyphicon-ok"></span></button>
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>-->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button">
<span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span>
</a>
<!--<button data-editable = "true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept" type="submit" onclick="return epaCuliao();">
<span class="glyphicon glyphicon-ok"></span>
</button>-->
<a id="submitChanges" type="submit" onclick="return epaCuliao();" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request accept">
<span class="glyphicon glyphicon-ok"></span>
</a>
<!--<button id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class=" btn btn-sm btn-request cancel">
<span class="glyphicon glyphicon-remove"></span>
</button>-->
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<!-- Actions -->
</div>
<?php endforeach ?>
</form>
</div>
</div>
</div>
</div>
When pencil icon is clicked form can be edited.
Well my problem is how to get all the information from that form and pass it to a function (actionEditHbwellMargins) in a controller (ClinicController).
I started using JS/JQuery copying code from other parts of my project, but I dont know how to get a solution in this case:
$(document).ready(function () {
var editable_fields = {
'referralCode': 'HbwellMargins[referralCode]',
'payMethods': 'HbwellMargins[payMethods]',
};
document.getElementById('submitChanges').onclick = function() {
edit();
}
function edit() {
alert("Epa culiao");
var el = $(this);
var container = el.closest('.row-type.edit');
var form = container.find("form");
var id = form.attr('id');
var values = {};
var params = 'id='+encodeURI(id);
$.each(editable_fields, function(key,key2){
var input = container.find("[name=\""+key2+"\"]");
var val = input.val();
values[key2] = val;
//para generar la url
params += "&"+key+"="+encodeURI(val);
});
var thisapp = this;
axios.post('/clinic/edit-hbwell-margins?'+params)
.then(function (response) {
$.each(values,function(key,val){
container.find("span[data-id=\""+key+"\"]")
.text(val)
.attr('data-original', val);
container.find("[name=\""+key+"\"]").val(val);
});
container.removeClass('editable');
})
.catch(function (error) {
console.log(error);
edit_cancel();
});
}
}
'payMethods': 'HbwellMargins[payMethods]' will be an array with variable length.
Please would you be so kind to help me or giving me some hint to achieve a solution? I'm desperate to find out a solution.
Thank you!

Submit Additional Form Data without setting formData

I am following How-to-submit-additional-form-data and have a working fileupload that is submitting the additional form data, ie. the additional textarea input field, description[], with chunking and multiple file support without setting formData:{ } on .fileupload(). My problem is that I am only able to submit the field as an array, description[], and I am unable to come up with some logic to associate the appropriate description[i] with the appropriate file. I am using asp.net mvc which should not matter in this case.
The View:
<script type="text/javascript">
$(document).ready(function () {
$('#btnContinue').prop('disabled', true);
$('#fileupload').fileupload({
url: '#Url.Action("UploadChunk", "Upload")',
maxChunkSize: 1048576,
}).addClass('fileupload-processing')
.bind('fileuploadalways', function (e, data) {
if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) {
var pre = $('#fileIds').val() == "" ? ';' : '';
var append = $('#fileIds').val() + pre + data.result.id + ';';
$('#fileIds').val(append);
}
})
.bind('fileuploaddone', function (e, data) {
$('#btnContinue').prop('disabled', false);
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
});
});
</script>
#using (Html.BeginForm("FileSet", "Upload", FormMethod.Post, new { id = "fileupload" } ))
{
#Html.AntiForgeryToken()
#Html.Hidden("fileIds", "", new { #id = "fileIds" })
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start" id="btnStartUpload">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel" id="btnCancelUpload">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete" id="btnDeleteUpload">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input style="visibility: hidden" type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<div class="row">
<div class="col-md-10">
<button type="submit" id="btnContinue" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<input type="hidden" name="locator[]" value="{%=file.name%}" />
<textarea name="description[]" placeholder="Enter description" class="form-control" rows="3"></textarea>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
The Controller:
[HttpPost]
public ContentResult UploadChunk(string[] description)
{
ParseRequestHeaderRanges(this.Request);
var r = new List<UploadFilesResult>();
var i = 0;
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
var uploader = System.Security.Principal.WindowsIdentity.GetCurrent().Name;
var result = DataTranslator.UploadChunk(hpf.InputStream, hpf.FileName, description[i], hpf.ContentType,
hpf.ContentLength, (int)hpf.InputStream.Length, this.TotalBytes, uploader);
r.Add(result);
i++;
}
return Content("{\"id\":\"" + r[0].Id + "\",\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
}

Rather than have it be an array make it a hash? Say using the filename? That way you don't have to rely on things being in the right order.
<textarea name="description[{%=file.name%}]" placeholder="Enter description" class="form-control" rows="3"></textarea>
And in the controller:
var result = DataTranslator.UploadChunk(
hpf.InputStream,
hpf.FileName,
description[hpf.FileName],
hpf.ContentType,
hpf.ContentLength,
(int)hpf.InputStream.Length,
this.TotalBytes,
uploader
);

jQuery .next().slideToggle() not working

I have am creating my own comments system from scratch. The comments themselves are dynamically generated from those in the database and for each comment I am appending a reply textarea and button for the user to post a reply to someone's comment.
The problem is that when I click the reply link it opens a reply box for each comment not just for the comment the user wishes to reply to.
The HTML:
<a class="comment-reply">Reply</a>
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- reply input textarea -->
<div class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
</form>
</div>
<?php } ?>
</div>
And the jQuery:
<script>
$(document).ready(function(e) {
//hide reply box on page load
$('.reply-box').hide();
//show each individual reply box on click
$('.comment-reply').click(function() {
//$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
$(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
});
});
</script>
What am I doing wrong?
edit
Ok this is the full HTML:
<!--POSTED COMMENT-->
<div id="comment-<?php echo $comment_id; ?>" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;"><?php echo $c_member_username; ?><small> <?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
<?php if($signed_in && $username == $c_member_username) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
<?php } else if($signed_in) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<?php } else { ?>
<small class="floatL">Sign in to reply to this comment</small>
<?php } ?>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
<?php } ?>
</div>
<!--END REPLY BOX-->
don't mind the styling, I am still prototyping
edit - added rendered page
<!--POSTED COMMENT-->
<div id="comment-139" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;">nicklaw<small> 9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
<small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
</div>
<!--END REPLY BOX-->

Maybe the following code will help, I am using the parentElement of the current element and then get the textarea that is in the same group. When attaching the click handler I use a div with class comments-container and attach on click only for anchors (second parameter in the .on function).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="comments-container">
<div class="comment">
Comment1
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment2
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment3
comment<br>
<textarea></textarea>
</div>
</div>
<script>
$("textarea").hide();
$(".comments-container").on("click","a",function(e){
e.preventDefault();
$("textarea").hide();
$(this.parentElement.getElementsByTagName("textarea")[0])
.stop().slideToggle("fast");
});
</script>
</body>
</html>

The problem is that the .reply-box is not at the same level in the DOM as the .comment-reply link that is clicked (i.e. not a sibling). If you see the documentation for .click you will see that it only searches the siblings.
I think you want the .parents(".media").next(".reply-box")