I have put together a webpage which has a top fixed navbar and a CRUD datatable with pagination which has buttons to open up modals. The issue that I seem to be having is that when I click the delete button the modal pops up and I am able to delete the record however the modal does not close unless I click somewhere else outside the modal and to add to this the total records "Showing 10 of 12" is incorrect until I refresh the page then the correct value is shown.
`
I have included all my code below. I am not sure how to solve this problem any assistance would be highly appreciated.
//AJAX CODE
//ADD
$(document).on('click','#btn-add',function(e) {
var data = $("#user_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#addEmployeeModal').modal('hide');
alert('Data added successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var code=$(this).attr("data-code");
var regno=$(this).attr("data-regno");
var vatno=$(this).attr("data-vatno");
var name=$(this).attr("data-name");
var address=$(this).attr("data-address");
var phone=$(this).attr("data-phone");
var email=$(this).attr("data-email");
var person=$(this).attr("data-person");
$('#id_u').val(id);
$('#code_u').val(code);
$('#regno_u').val(regno);
$('#vatno_u').val(vatno);
$('#name_u').val(name);
$('#address_u').val(address);
$('#phone_u').val(phone);
$('#email_u').val(email);
$('#person_u').val(person);
});
//Update
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on("click", ".delete", function() {
var id=$(this).attr("data-id");
$('#id_d').val(id);
});
$(document).on("click", "#delete", function() {
$.ajax({
url: "backend/save.php",
type: "POST",
cache: false,
data:{
type:3,
id: $("#id_d").val()
},
success: function(dataResult){
$('#deleteEmployeeModal').modal('hide');
$("#"+dataResult).remove();
}
});
});
$(document).on("click", "#delete_multiple", function() {
var user = [];
$(".user_checkbox:checked").each(function() {
user.push($(this).data('user-id'));
});
if(user.length <=0) {
alert("Please select records.");
}
else {
WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
var checked = confirm(WRN_PROFILE_DELETE);
if(checked == true) {
var selected_values = user.join(",");
console.log(selected_values);
$.ajax({
type: "POST",
url: "backend/save.php",
cache:false,
data:{
type: 4,
id : selected_values
},
success: function(response) {
var ids = response.split(",");
for (var i=0; i < ids.length; i++ ) {
$("#"+ids[i]).remove();
}
}
});
}
}
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function(){
if(this.checked){
checkbox.each(function(){
this.checked = true;
});
} else{
checkbox.each(function(){
this.checked = false;
});
}
});
checkbox.click(function(){
if(!this.checked){
$("#selectAll").prop("checked", false);
}
});
});
//MY php CODE
<?php
session_start();
if (!isset($_SESSION["user_email"])) {
header('location: login.html');
}
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
PHP
</title>
<!-- favicon -->
<link rel="icon" href="/assets/img/favicon.ico">
<!-- ===== DATATABLE ===== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- ===== DATATABLE STYLE ===== -->
<link rel="stylesheet" href="http://localhost/PHP/assets/style.css">
<!-- Style -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- BOOTSTRAP MODAL -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- AJAX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ajax/ajax.js"></script>
</head>
<body class="home">
<!-- Navbar -->
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">LIMA RDF <i>Engineering</i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav" style="margin-left: auto;text-align: center;">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="http://localhost/PHP/index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Setup
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="http://localhost/PHP/partner.php">Business Partner</a></li>
<li><a class="dropdown-item" href="#">Project</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<button class="btn btn-outline-danger" type="button" onclick="window.location.href='./login/logout.php';">Log Out</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- DATATABLE START-->
<div class="container">
<div>
<a href="#addClientModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i>
<span>Add New Client</span></a>
</div>
<div class="row">
<div class="col-md-12">
<div class="datatable">
<table id="example" class="content-table table-hover" style="width:100%">
<thead>
<tr>
<th style="text-align: center;">CLIENT NO</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>PHONE NO</th>
<th>EMAIL</th>
<th>CONTACT PERSON</th>
<th style="text-align: center;">ACTION</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn, "SELECT * FROM tbl_client");
$i = 1;
while ($row = mysqli_fetch_array($result)) {
?>
<tr id="<?php echo $row["id"]; ?>">
<td style="text-align: center;"><?php echo $row["code"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["person"]; ?></td>
<td style="text-align: center;">
<a style="padding-left:5px;padding-right:5px;" href="#editClientModal" class="edit" data-toggle="modal">
<i class="material-icons update" data-toggle="tooltip" data-id="<?php echo $row["id"]; ?>" data-code="<?php echo $row["code"]; ?>" data-regno="<?php echo $row["regno"]; ?>" data-vatno="<?php echo $row["vatno"]; ?>" data-name="<?php echo $row["name"]; ?>" data-address="<?php echo $row["address"]; ?>" data-phone="<?php echo $row["phone"]; ?>" data-email="<?php echo $row["email"]; ?>" data-person="<?php echo $row["person"]; ?>" title="Edit"><span class="fa fa-pencil"></span></i>
</a>
<a style="padding-left:5px;padding-right5px;" href="#deleteClientModal" class="delete" data-id="<?php echo $row["id"]; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"><span class="fa fa-trash"></span></i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<!-- Add Modal HTML -->
<div id="addClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="user_form">
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>CLIENT CODE</label>
<input type="text" id="code" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>BUSINESS REGISTRATION NO.</label>
<input type="text" id="regno" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT REGISTRAION NO.</label>
<input type="text" id="vatno" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>NAME</label>
<input type="text" id="name" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>ADDRESS</label>
<input type="textarear" rows="4" cols="50" id="address" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
<input type="phone" id="phone" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>EMAIL</label>
<input type="email" id="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>CONTACT PERSON</label>
<input type="text" id="person" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Code</label>
<input type="text" id="code_u" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>Buiness Registration No.</label>
<input type="text" id="regno_u" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT Registration No.</label>
<input type="text" id="vatno_u" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" id="name_u" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="address" id="address_u" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>Phone No.</label>
<input type="phone" id="phone_u" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email_u" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Contact Person</label>
<input type="text" id="person_u" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_d" name="idd" class="form-control">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>
<style>
.pagination {
float: right;
text-align: right;
}
.pagination .page-item.active .page-link {
background-color: #0A2558;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
background-color: #0A2558;
}
.pagination .page-item.active .page-link:hover {
background-color: #0A2558;
}
.content-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background-color: #0A2558;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 8px 8px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.dataTables_filter {
float: right;
text-align: right;
}
</style>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
</html>
//MY SAVE PHP
<?php
include 'database.php';
if(count($_POST)>0){
if($_POST['type']==1){
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "INSERT INTO `tbl_client`( `code`, `regno`, `vatno`, `name`, `address`, `phone`, `email`,`person`)
VALUES ('$code','$regno','$vatno','$name','$address','$phone','$email','$person')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==2){
$id=$_POST['id'];
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "UPDATE `tbl_client` SET `code`='$code',`regno`='$regno',`vatno`='$vatno',`name`='$name',`address`='$address', `phone`='$phone', `email`='$email', `person`='$person' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==3){
$idd=$_POST['id'];
$sql = "DELETE FROM `tbl_client` WHERE id=$idd ";
if (mysqli_query($conn, $sql)) {
echo $idd;
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
?>
Review all the bootstrap data- attributes to be sure all of them are using data-bs- prefix.
I have found several in your code without it. In bootstrap 5 your bootstrap attributes should contain data-bs- instead data- to be executed correctly.
If you are migrating from bootstrap 4 check the list of migration changes here.
I just can't get my head around this.
I want to fetch product images/items from the database and show in a carousel. But i want to have 3 images/items on each slide.
I have tested that it work by just hardcoding/repeating the code, but i want it to work in the foreach loop that i run from the result of the database question. But i just cant get it to work properly.
Here is my code that i am working on.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner"> <?php
$x=0;
foreach($result as $r)
{
if (($x % 3) == 0)
{?>
<div class="carousel-item <?php if($x == 0){ echo "active"; }?>">
<div class="album py-5 bg-light">
<div class="container">
<div class="row"><?php
}?>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" style="max-height: 300px"
src="../productimages/<?php echo $r['pid']."/".$r['filename']; ?>"
alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text
below as a natural lead-in to additional content. This content
is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div><?php
if (($x % 3) == 0)
{?>
</div>
</div>
</div>
</div><?php
}
$x++;
}?>
</div>
<button class="carousel-control-prev"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><i
class="bi bi-arrow-left-square-fill text-warning" fill="black"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon bs-orange" aria-hidden="true"><i
class="bi bi-arrow-right-square-fill text-warning"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Next</span>
</button>
</div>
I want to get the information from this formwhen you press the add to cart button. and i want to use that information in a cart page.
<?php
$result = mysqli_query($conn,$query);
$output = '';
while($row = mysqli_fetch_assoc($result)) {
$output .= '
<div style="margin-bottom: 20px;" class="col-lg-3 col-md-6 col-sm-6">
<form method="post ">
<div style="height: 400px;" class="card shadow text-center">
<div class="card-block shop-item">
<img class="shop-item-image" src="Bilder/clothes/'. $row['ProductImage'].'" alt="" class="img-fluid" style="height: 200px;">
<div class="card-text shop-item-title">
'.$row['Brand'].'
</div>
<div class="card-text">
'.$row['Quantity'].' in stock
</div>
<div class="shop-item-details">
<div class="card-text" shop-item-price>
<h3>£ '.$row['Price'].'</h3>
</div>
<input style="width: 80%; margin-left: 10%; " type="text" name="quantity" class="form-control" value="1"/>
<button style="margin-top: 10px; margin-bottom: 10px; background-color:#FB8122; border: none; color:black;"href="#" class="shop-item-button btn btn-primary ">Add to cart <span class="fas fa-cart-arrow-down"></span></button>
</div>
</div>
</div>
</form>
</div>;';
}
echo $output;
}
?>
First time asking so sorry if I did something wrong
This is continuation of my question first question
Here i am drag and drop sticky notes from one to another. i have
<div class="rTable">
<div class="rTableRow">
<div id="a" title="Backog" class="rTableHead rTabletd"><strong>Backlog</strong></div>
<div id="a" title="WIP" class="rTableHead rTabletd"><span style="font-weight: bold;">WIP</span></div>
<div id="a" title="Testing" class="rTableHead rTabletd">Testing</div>
<div id="a" title="DOD" class="rTableHead rTabletd">DOD</div>
</div>
<div class="rTableRow rTableh" >
<div class="rTableCell"></div>
<div class="rTableCell"><a></a></div>
<div class="rTableCell"></div>
<div class="rTableCell"></div>
</div>
</div>
and sticky notes
<?php
foreach ($this->getallstores as $stories):
?>
<div id="draggable-<?php echo $stories['id']; ?>" class="draggable " onchange="javascript:position(this)" style="position:absolute; left: <?php echo $stories['_left']; ?>px; top: <?php echo $stories['_top']; ?>px">
<img class="pin" src="/manage/public/img/pin.png" alt="pin" />
<blockquote class="quote-box note-<?php echo $stories['color']; ?>">
<p class="quote-text" id="content-<?php echo $stories['id'];?>">
<?php echo $stories['message']; ?>
</p>
<hr>
<div class="blog-post-actions">
<p>
<button class="btn btn-primary popEdit pull-left" data-toggle='tooltip' title="Edit" onClick="popOverEdit(<?php echo $stories['id'];?>)" id="pop-<?php echo $stories['id'];?>"><span class="glyphicon glyphicon-edit"></span></button>
<div class="popover-markup blog-post-bottom" >
<div class="head hide">Edit</div>
<div class="content hide" id="popoverContent<?php echo $stories['id'];?>">
<div class="form-group">
<textarea id="<?php echo $stories['id']; ?>" class="quick" ><?php echo $stories['message']; ?></textarea>
</div>
<button data-vendor-id="" data-act="send" onClick="getText(<?php echo $stories['id'];?>)" class="btn btn-info save_notes">Save</button>
</div>
</div>
</p>
<p class="blog-post-bottom pull-right">
<a class="delete" href="?delete=<?php echo $stories['id']; ?>" style="float:right"> <button class="btn btn-danger" title="delete"><span class="glyphicon glyphicon-trash"></span></button> </a>
</p>
</div>
</blockquote>
</div>
<?php endforeach;?>
demo
my requirement is i want to drag and drop stickys and save to database.Now i have save position.is there any way to save column name?eg if drag sticky note from backlog to testing how can i get placed position name is testing?Please help me.
jquery
jQuery(function() {
jQuery( ".draggable" ).draggable({ containment: "#containment-wrapper", scroll: false ,
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var id=$(this).attr('id');
var ti=$(".rTabletd").attr("title");
var Stoppos = $(this).position();
model = {
id:id,
left: Stoppos.left,
top: Stoppos.top
};
$.ajax({
url: "/scrum/save",
type: "post",
data: model,
success: function(data){
jQuery.HP({
title: "Success!",
message: "Saved..."
});
},
error:function(){
// alert('error is saving');
}
});
}
});
});
You can create an array and use the droppable index position to select the array value.
var table = ['Backlog', 'WIP', 'Testing', 'DOD'];
$(".rTableCell > div").draggable();
$(".rTableCell").droppable({
drop: function(event, ui) {
var table = ['Backlog', 'WIP', 'Testing', 'DOD'];
var droppedOn = event.target;
alert(table[$(droppedOn).index()]);
}
});
.rTableHead,
.rTableCell {
display: inline-block;
width: 23%;
}
.rTableCell {
border: 1px solid black;
height: 100vh;
}
.rTableCell>div {
background-color: blue;
padding: 5px;
color: white;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="rTable">
<div class="rTableRow">
<div id="backlog" title="Backog" class="rTableHead rTabletd"><strong>Backlog</strong></div>
<div id="WIP" title="WIP" class="rTableHead rTabletd"><span style="font-weight: bold;">WIP</span></div>
<div id="TESTING" title="Testing" class="rTableHead rTabletd"><span style="font-weight: bold;">Testing</span></div>
<div id="DOD" title="DOD" class="rTableHead rTabletd"><span style="font-weight: bold;">DOD</span></div>
</div>
<div class="rTableRow rTableh">
<div class="rTableCell">
<div>
Item 1
</div>
</div>
<div class="rTableCell">
<div>
Item 2
</div>
</div>
<div class="rTableCell">
<div>
Item 3
</div>
</div>
<div class="rTableCell">
<div>
Item 4
</div>
</div>
</div>
</div>
this picture is pagination and inspect values on edit button : enter image description here
my problem is that unable to edit value on next page in ajax, on first page edit button working,
and successfully edit validation not working after edit value.
on edit button values coming in json format i have only some knowledge of json and ajax
My database table:
-----------------------------------
sport_id | sport_name
-------------------------------------
1 | Volleyball
2 | Basketball
----------------------------------
table name is:- sports
my code is like that
controller
===========
public function add_sport() {
unset($_POST['gym_account_id']);
if(isset($_POST['sport_id'])){
unset($_POST['sport_id']);
$response = $this->queryData->sportAddData($_POST);
}else{
$sport_id = $_POST['sport_id'];
// alert($sport_id);
$sport_name = array("sport_name" => $_POST['sport_name']);
$response = $this->queryData->sportEditData($sport_name,$sport_id);
}
$this->Sports();
}
model
========
public function sportAddData($data) {
$this->db->insert('sports', $data);
$insert_id = $this->db->insert_id();
return $insert_id;
}
public function sportEditData($sport_name,$sport_id) {
$this->db->where('sport_id', $sport_id);
$this->db->update('sports', $sport_name);
}
view
======
<div class="page-title">
<div class="title_left">
<div class="alert alert-success alert-dismissible fade in" role="alert" style="display: <?php echo (!empty($_GET['success'])) ? 'block' : 'none'; ?>">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Success!</strong> <?php echo $_GET['success']; ?>
</div>
</div>
<div class="title_right">
<div class="col-md-12 col-sm-5 col-xs-12 form-group pull-right top_search" style="text-align: right; margin-bottom: 26px; margin-right: -4px;">
<button type="button" class="btn btn-dark create_sport1">Create</button>
<button type="button" class="btn btn-dark delete_items" >Delete</button>
<button type="button" class="btn btn-dark call_delete" data-toggle="modal" data-target=".bs-example-modal-sm" style="display: none;" >Delete Athlete</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row sport_form_block" id="add_sports" style="display: none;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2 class="form_title1">Create New Sport</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="demo-form2" method="POST" data-parsley-validate class="form-horizontal form-label-left sport_form">
<?php
$userType = $this->session->userData('userType');
$gymAccountId = $this->session->userData('gym_account_id');
if($userType == 1){
?>
<?php }else{ ?>
<input type="hidden" name="gym_account_id" id="gym_account_id" value="<?php echo $gymAccountId; ?>" />
<?php } ?>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="sport_name">Sport Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="sport_name" name="sport_name" required="required" class="form-control col-md-7 col-xs-12 edit_sportname">
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<input type="hidden" name="sport_id" value="" class="editsportid" id="editsportid" />
<button class="btn btn-primary close_form" data-div="sport_form_block" type="button">Cancel</button>
<button class="btn btn-primary reset_sport_form" type="reset">Reset</button>
<!-- <button type="button" class="btn btn-success submit_athlete1" data-url="<php echo base_url(); ?>athlete/add_athlete" data-table="<php echo base_url(); ?>athlete/get_athlete" data-form="athlete_form" data-div="athlete_form_block">Submit</button>-->
<button type="submit" class="btn btn-success submit_athlete1" data-url="<?php echo base_url(); ?>Index/add_sport" data-table="<?php echo base_url(); ?>sport/get_athlete" data-form="sport_form" data-div="sport_form_block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Sport(s)<small></small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="sport-athlete-datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap bulk_action" cellspacing="0" width="100%">
<thead>
<tr>
<th class="no-sort" style="width: 30px;" ><input type="checkbox" id="check-all" class="flat check_all" data-check="athlete_list"></th>
<th>Id</th>
<th>Sport</th>
<th class="no-sort" style="width: 50px;" >Edit</th>
</tr>
</thead>
<tbody>
<?php foreach ($data['athletes'] as $key => $value) { ?>
<tr>
<!-- <td><input type="checkbox" id="<php echo $value['athlete_id']; ?>" class="flat athlete_list multiple_delete"></td>-->
<td><input type="checkbox" id="<?php echo $value['sport_id']; ?>" class="flat athlete_list multiple_delete"></td>
<td><?php echo $value['sport_id']; ?></td>
<td><?php echo $value['sport_name']; ?></td>
<!--<td></i></td>-->
<td><button class="edit_sport option_icon" data-json='<?php echo $value['sport_id'] . ',' . $value['sport_name'] ?>' data-block="sport_form_block" data-form="sport_form" ><i class="fa fa-edit"></i></button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
js
==
$('.edit_sport').on('click', function (e) {
//$('.edit_sport').on('click', function (e) {
$('#add_sports').slideDown();
id = $(this).attr("data-json");
var arr = id.split(',');
$('.edit_sportname').val(arr[1]);
$('.editsportid').val(arr[0]);
alert(arr);
console.log(arr);
$('#function').val("update");
$('.form_title1').html('Edit Sports');
$('.' + $(this).data("block")).show();
$("html, body").animate({scrollTop: 0}, "slow");
});
Because you use onclick to bind event on button which will not apply for new element add to DOM via ajax call. You can use delegate or on to attach an events.