Fetching Single Data JQUERY - php

Imagine I have 3 data in my tbl_customer then If I click the button view, the modal will show with the data's. It's working if the button I clicked has data, Then the problem is, if the button has no data the modal didn't show. But I want to show the modal even I have no data in my button. Please help me out of this problem, thankyou!
Button: <button type="button" onclick="return chk('.$row['id'].')" class="btn btn-warning btn-xs">Add features</button>
Here's the code:
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>'
<?php
$db = mysqli_connect("localhost", "root", "", "psbr");
$rooms_f = mysqli_query($db, "SELECT * FROM room_f");
while($row = mysqli_fetch_assoc($rooms_f)) { ?>
<button type="button" onclick="return chk('.$row['id'].')" class="btn btn-warning btn-xs">Add features</button>
<?php } ?>
function chk(id)
{
var roomid = document.getElementById('text_id_' + id).value;
var dataString = 'roomid='+ roomid;
$.ajax({
type: "post",
url: "fetch_single3.php",
data:dataString,
cache:false,
success: function(data){
$("#modal_features").hide();
$("#modal_sample").slideDown();
$("#modal_sample").html(data);
}
});
return false;
}
fetch_single3
<?php
$db = mysqli_connect('localhost', 'root', '', 'psbr');
$rooms = mysqli_query($db, "SELECT * FROM rooms");
$roomid = $_POST['roomid'];
$query = mysqli_query($db, "SELECT * FROM room_f WHERE room_id='$roomid'");
?>
<link rel="stylesheet" type="text/css" href="css/feature-design.css">
<div id="modal_sample">
<h4 class="h4" style="margin: 3%;">Room Features</h4>
<button class="btn btn-info button">Add Feature</button>
<table id="features_table">
<tr>
<th width="20%">ID</th>
<th width="49%">Feature</th>
<th>Action</th>
</tr>
<?php while ($row = mysqli_fetch_array($query)) { ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['feature']; ?></td>
<td><button class="btn btn-warning btn-xs">Update Feature</button> <button class="btn btn-warning btn-danger btn-xs ">Delete feature</button></td>
</tr>
<div class="add_modal" id="add_modal">
<h4 style="margin: 5%; ">Add Feature</h4>
<hr>
<label style="margin: 1%;">Enter Feature name</label>
<input type="text" id="text_featurename" name="text_featurename">
<input type="hidden" id="text_featureid" name="text_featureid" value="<?php echo $row['room_id']; ?>">
<input type="submit" name="submit" value="Submit" onclick="return add()" id="submit">
<button class="btn btn-default cbtn_addm">Close</button>
</div>
<?php } ?>
</table>
<button type="button" id="btn_c"class="btn_c">Close</button>
</div>

Related

Data not inserting in the database using a modal

I am trying to update the status of my order using a modal. it doesnt shows any error but it does not update the status of the order in the database I already look at the form and my file is right. but i dont know why it does not update the status in my database.
here is the image where i update the order status it exec
`<!-- Transaction History -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"><b>Transaction Full Details</b></h4>
</div>
<div class="modal-body">
<p>
Date: <span id="date"></span>
<span class="pull-right">Transaction#: <span id="transid"></span></span>
</p>
<table class="table table-bordered">
<thead>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Status</th>
</thead>
<tbody id="detail">
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td><span id="total"></span></td>
</tr>
<form action="order_edit.php" method="POST" enctype="multipart/form-data">
<td colspan="3" align="right"><b>Status</b></td>
<td><span id="total">
<select name="status" id="status" class="form-control form-control-sm rounded-0" required>
<option value="1" <?php echo isset($meta['status']) && $meta['status'] == 1 ? 'selected' : '' ?>>Pending</option>
<option value="3" <?php echo isset($meta['status']) && $meta['status'] == 3 ? 'selected' : '' ?>>Out for Delivery</option>
<option value="4" <?php echo isset($meta['status']) && $meta['status'] == 4 ? 'selected' : '' ?>>Done and Paid</option>
</select>
</span></td>
<td>
<button type="submit" class="btn btn-success btn-flat" name="edit"><i class="fa fa-check-square-o"></i> Update</button>
</td>
</form>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
</div>
</div>
</div>
`
`<?php
include 'includes/session.php';
if(isset($_POST['edit'])){
$id = $_POST['id'];
$status = $_POST['status'];
date_default_timezone_set("Asia/Manila");
$date = date('Y-m-d h:i:sa');
$date1 = date('Y-m-d h:i:sa');
try{
$stmt = $conn->prepare("SELECT * FROM sales WHERE id=:id");
$stmt->execute(['id'=>$id]);
$row = $stmt->fetch();
$stmt = $conn->prepare("UPDATE sales SET dateDelivered=:dateDelivered, order_received=:order_received, status=:status WHERE id=:id");
$stmt->execute(['dateDelivered'=>$date,'order_received'=>$date1,'status'=>$status, 'id'=>$id]);
$_SESSION['success'] = 'Status updated successfully';
}
catch(PDOException $e){
$_SESSION['error'] = $e->getMessage();
}
$pdo->close();
}
else{
$_SESSION['error'] = 'Fill up Update Status form first';
}
header('location: sales.php');
?>`
Add the hidden input tag in form tag
<input type="hidden" name="id" value="<?php echo $meta['id']; ?>">

Ajax wont stop if false

I have problem with my ajax,
here my index:
<form name="add_name" id="add_name">
<div class="col-lg-12">
<div class="form-row mb-2">
ID Kurir :
<div class="col">
<input type="text" id="idkurir" name="idkurir" placeholder="Input ID Kurir" class="idkurir" autofocus />
</div>
Nama Kurir :
<div class="col">
<input type="text" id="namakurir" name="namakurir" value="Nama Kurir" class="namakurir" readonly />
</div>
No Laporan :
<div class="col">
<input type="text" id="nolaporan" name="nolaporan" value="No Laporan" readonly />
</div>
Date :
<div class="col">
<?php $now=date('d-m-Y H:i'); ?>
<input type="text" name="date" value=<?php echo "'$now'"; ?> readonly />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<table class="table table-bordered" id="dynamic_field1">
<tr>
<td colspan=2 align=center><strong>Antar Ulang</strong></td>
</tr>
<tr>
<td><input type="text" name="awbau[]" placeholder="Enter AWB" class="form-control name_listau" /></td>
<td><button type="button" name="addau" id="addau" class="btn btn-success">Add More</button></td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-bordered" id="dynamic_field2">
<tr>
<td colspan=2 align=center><strong>Undelivery</strong></td>
</tr>
<tr>
<td><input type="text" name="awbundel[]" placeholder="Enter AWB" class="form-control name_listundel" /></td>
<td><button type="button" name="addundel" id="addundel" class="btn btn-success">Add More</button></td>
</tr>
</table>
</div>
</div>
<center><input type="button" name="submit" id="submit" class="btn btn-info btn-block mb-4 mr-2" value="Submit Data" /></center>
</form>
here my ajax script :
$(document).on("keypress", ".idkurir", function(e) {
var idkurir = $('#idkurir').val();
if (e.which == 13) {
$.ajax({
type: "POST",
url: "checkdata.php",
data: {
idkurir: idkurir
},
success: function(response) {
if (response == 1) {
alert("Kurir sudah laporan");
} else {
if (response == "ID Kurir tidak di temukan") {
alert(response);
} else {
var d = new Date();
var today_date = ("0" + d.getDate()).slice(-2) + ("0" + (d.getMonth() + 1)).slice(-2);
$('#nolaporan').val(idkurir + today_date);
$('#namakurir').val(response);
}
}
}
});
}
});
and here my checkdata to check if data exist :
session_start();
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("reportchecker", $connect);
$idkurir = $_POST["idkurir"];
$nolaporan = $idkurir . date("dm");
$sql = "SELECT * FROM jampulang WHERE nolaporan = '$nolaporan'";
$result = mysql_query($sql, $connect);
$count = mysql_num_rows($result);
$response = [];
$sql2 = "SELECT * FROM kurir WHERE idkurir = '$idkurir'";
$result2 = mysql_query($sql2, $connect) or die(mysql_error());
$count2 = mysql_num_rows($result2);
if ($count == 1) {
echo "1";
} else if ($count2 == 1) {
$row = mysql_fetch_array($result2) or die(mysql_error());
echo $row['nama'];
} else {
echo "ID Kurir tidak di temukan";
}
my problem is when response from checkdata = "ID Kurir tidak di temukan", ajax not showing alert and stop update field nolaporan and nama kurir
$('#nolaporan').val(idkurir + today_date);
$('#namakurir').val(response);
in my script above when reponse "ID Kurir tidak di temukan" still update field nolaporan and namakurir.
You can fix it on the client side using $.trim() like below:
if($.trim(response) == 'ID Kurir tidak di temukan') {
//do your code
}

How to send a jQuery ID to Bootstrap Modal to use it in PHP function?

I know there are lots of similar posts but nothing really helps me. I'm trying to run a PHP function in Bootstrap Modal with two parameters, one of the parameter is a row ID that needs to go from jQuery.
I can send it and display it in a div id but how can I convert this parameter for a PHP function?
jQuery
$(document).ready(function() {
$("a").click(function(){
var hrefs = $(this).attr("href");
$("#modal_form").attr('action',hrefs);
var ids = hrefs.split("=").pop();
$("#sid").html(ids);
});
});
Bootstrap Modal
<!-- Update Record Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update Translation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="translation.php" id="modal_form" method="post">
<div class="modal-body">
<div id="sid"></div> /* I'm getting the right ID here*/
<?php selectedTranslation($dbh, $ids); ?> /*I need to run this function*/
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="update" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
php function
function getAllTranslationById($dbh, $id){
...
<?php
$sqlSelect = "SELECT * FROM xxxx";
$result = mysqli_query($dbh, $sqlSelect);
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>
<td><img alt="Link" src="images/edit.png" title="Update this row"></td>
</tr>
<?php }?>
</table>
<?php }
php function
function selectedTranslation($dbh, $sid){
....
<?php
$sqlSelect = "SELECT * FROM xxxx ";
$result = mysqli_query($dbh, $sqlSelect);
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>
</tr>
<?php }?>
</table>
<?php }?>
Its just impossible like the way you want
So what you can do instead?
Use Ajax.
<div class="modal-body">
<div id="sid"></div> /* I'm getting the right ID here*/
<div id="ajaxResult"></div>
</div>
// JS Codes
$(document).ready(function() {
$("a").click(function(){
var sid = ""; // set your `sid` here
$.ajax({
url: "/url_here", //url to your PHP page
type: "post",
data: {id: sid},
success: function(data) {
$("#ajaxResult").html(data); //result html
}
});
});
});

I am trying to retrieve data from a database using ajax and populate in form that is in a bootstrap modal

I need a help here when I click on the edit button on the image below i expect to see data populated on a form in a bootstrap modal window I am using jquery ajax method to populate the data in the form of
and the edit modal image
Here is code for the home page
<?php require_once("connect.php"); ?>
<?php require_once("fetch.php"); ?>
<?php require_once("select.php"); ?>
<?php require_once("process.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<ul class="nav nav-pills">
<li>Home</li>
</ul>
<button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Add</button>
<table class="table" id="table">
<tr>
<th>S/N</th>
<th>Name</th>
<th>Email</th>
<th>Description</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
</tr>
<?php
$query = "SELECT * FROM contact";
$runQuery = mysqli_query($connect, $query);
if(!$runQuery){
die("Could not run select query ".mysqli_error($connect));
}
$sn = 1;
while($row = mysqli_fetch_assoc($runQuery)){ ?>
<tr>
<td><?php echo $sn++ ?></td>
<td><?php echo $row["name"] ?></td>
<td><?php echo $row["email"] ?></td>
<td><?php echo $row["description"] ?></td>
<td>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-warning btn-sm edit-data" id="<?php echo $row['userid'] ?>">Edit</button>
</td>
<td>
<button type="button" data-target="#viewModal" data-toggle="modal" class="btn btn-primary btn-sm view-data" id="<?php echo $row['userid'] ?>">View</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm del-data" id="<?php echo $row['userid'] ?>">Danger</button>
</td>
</tr>
<?php } ?>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Data</h4>
</div>
<div class="modal-body">
<div id="success" class="alert alert-success"></div>
<form class="form" method="POST" id="insertData">
<div id="nameError" class="alert alert-danger"></div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div id="emailError" class="alert alert-danger"></div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
<input type="hidden" name="userid" id="contactUserId">
<div id="descriptionError" class="alert alert-danger"></div>
<div class="form-group">
<label>Description</label>
<textarea name="description" id="description" class="form-control"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Add" name="add" id="add">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="viewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">View Data</h4>
</div>
<div class="modal-body" id="contactDetail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This code is for entering and updating data in the database process.php
<?php
if(!empty($_POST)){
$name = $_POST["name"];
$email = $_POST["email"];
$description = $_POST["description"];
$userid = $_POST["userid"];
if($userid != ''){
$query = "UPDATE contact SET name = '$name', email='$email', description='$description' WHERE userid = $userid ";
$runQuery = mysqli_query($connect, $query);
if(!$runQuery){
die("Could not run query ".mysqli_error($connect));
}
}else{
$query = "INSERT INTO contact(name, email, description) VALUES ";
$query .=" ('$name', '$email', '$description')";
$runQuery = mysqli_query($connect, $query);
if(!$runQuery){
die("Could not run insert query ".mysqli_error($connect));
}
}
}
This code retrieves data from database
<?php
if(isset($_POST['userid'])){
$editId = (int)$_POST['userid'];
$query = "SELECT * FROM contact WHERE userid = $editId";
$runQuery = mysqli_query($connect, $query);
if(!$runQuery){
die("Could not run query ".mysqli_error($connect));
}
$getData = mysqli_fetch_assoc($runQuery);
echo json_encode($getData);
}
This is my js file
$(document).ready(function(){
$("#insertData").submit(function(event){
event.preventDefault();
if($("#name").val() == ""){
$("#nameError").css("display", "block").html("Name is required");
}else if ($("#email").val() == "") {
$("#emailError").css("display", "block").html("Email is required");
}else if ($("#description").val() == "") {
$("#descriptionError").css("display", "block").html("Description is required");
}else{
$.ajax({
url: "index.php",
method: "POST",
data: $("#insertData").serialize(),
success: function(data){
$("#success").css("display", "block").html("Data added");
$("#insertData")[0].reset();
}
});
}
});
$(document).on("click", ".edit-data", function(){
var contactId = $(this).attr("id");
$.ajax({
url:"index.php",
method: "POST",
data: {contactId:contactId},
dataType: "json",
success: function(data){
$("#name").val(data.name);
$("#email").val(data.email);
$("#description").val(data.description);
$("#contactUserId").val(data.userid);
$("#add").val("Update");
$("#myModal").modal("show");
}
});
});
$(document).on('click', '.view-data', function(){
var contactId = $(this).attr("id");
if(contactId != '')
{
$.ajax({
url:"index.php",
method:"POST",
data:{contactId:contactId},
success:function(data){
$('#contactDetail').html(data);
$('#viewModal').modal('show');
}
});
}
});
});
You are sending contactId and in your PHP you are looking for userid. Change your data to data: { userid: userid }.
$(document).on("click", ".edit-data", function() {
var userid = $(this).attr("id");
$.ajax({
url: "index.php",
method: "POST",
data: { userid: userid },
dataType: "json",
success: function(data) {
$("#name").val(data.name);
$("#email").val(data.email);
$("#description").val(data.description);
$("#contactUserId").val(data.userid);
$("#add").val("Update");
$("#myModal").modal("show");
}
});
});

PHP Ajax Update MySQL Data Through Bootstrap Modal

I want to update my database using php ajax modal. When updating the relevant field { $('#main_id').val(data.id); } don't pass an id to the update query therefor an insertion occurs without executing the updating query.
console log details when trying to update
I tried to solve this but I couldn't. without updating the existing data it inserts a new record
here is my index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
$query = "SELECT * FROM tbl_main_category ORDER BY cat_Id DESC";
$result = mysqli_query($connect, $query);
?>
<div id="employee_table">
<table class="table table-bordered">
<tr> <th width="70%">Employee id</th>
<th width="70%">Employee Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr> <td><?php echo $row["cat_Id"]; ?></td>
<td><?php echo $row["category_name"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $row["cat_Id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["cat_Id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="category_name" id="category_name" class="form-control" />
<br />
<input type="hidden" name="main_id" id="main_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
console.log('test')
var main_id = $(this).attr("id");
console.log(main_id)
$.ajax({
url:"fetch.php",
method:"POST",
data:{main_id:main_id},
dataType:"json",
success:function(data){
console.log(data)
$('#category_name').val(data.category_name);
console.log(data.category_name)
$('#main_id').val(data.id);
console.log(data.id)
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
insert.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
if(!empty($_POST))
{
$output = '';
$message = '';
$category_name = mysqli_real_escape_string($connect, $_POST["category_name"]);
if($_POST["main_id"] != '')
{
$query = "
UPDATE tbl_main_category
SET category_name='$category_name' WHERE cat_Id='".$_POST["main_id"]."'";
$message = 'Data Updated';
}
else
{
$query = "
INSERT INTO tbl_main_category(category_name)
VALUES('$category_name');
";
$message = 'Data Inserted';
}
fetch.php
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
if(isset($_POST["main_id"]))
{
$query = "SELECT * FROM tbl_main_category WHERE cat_Id = '".$_POST["main_id"]."'";
$result = mysqli_query($connect, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>
You have Fetched the value from $('#main_id').val(data.id) instead of $('#main_id').val(data.cat_Id);
You have fetched value of id instead of cat_Id

Categories