Ajax всплывающее окно просмотра данных обновления с использованием php с sql - PullRequest
0 голосов
/ 16 апреля 2020

Так что я пытался это исправить часами. Любая помощь будет оценена Homepage-index. php

 <?php 
include 'conn.php';
$query = "SELECT * FROM ordersdata ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>

<!doctype html > 
<html>
<head>
    <title> CRUD Server </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

<br /><br />  
<div class="container">  
<h3 align="center">Responsive CRUD</h3>
<br />  
<br />
<h4 align="center">Customer Order Management</h4>
<div id="orders_table">  
<table class="table table-striped">
<tr>  
<th width="70%">Product Name</th>
<th width="70%">Product Weight</th>
<th width="70%">Product Quantity</th>
<th width="70%">Product Price</th>
<th width="10%" class="text-center">Edit</th>
<th width="20%" class="text-center">View Details</th>
</tr>  
<?php  
while($row = mysqli_fetch_array($result))  
{  
?>  
<tr>  
<td><?php echo $row["pname"]; ?></td>  
<td><?php echo $row["pweight"]; ?></td>
<td><?php echo $row["pqty"]; ?></td>
<td><?php echo $row["pprice"]; ?></td>
<td class="text-center"><input type="button" name="edit" value="Edit" id="<?php echo $row["oid"]; ?>" class="btn btn-info edit_data" /></td>  
<td class="text-center"><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-success view_data" /></td>  
</tr>  
<?php  
}  
?>  
</table>  
</div>  
</div>  
</div> 
<!-- order Details -->
<div id="dataModal" class="modal fade">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header">  
<h4 class="modal-title">Order Details</h4>  
<button type="button" class="close" data-dismiss="modal">&times;</button>  
</div>  
<div class="modal-body" id="order_detail">  
</div>  
<div class="modal-footer">  
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div>  
<!-- /orders Details -->
<!-- PHP Ajax Update MySQL Data Through Bootstrap Modal -->
<div id="add_data_Modal" class="modal fade">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header">  
<h4 class="modal-title">Orders details</h4>  
<button type="button" class="close" data-dismiss="modal">&times;</button>  
</div> 
 <!-- main shit -->
<div class="modal-body">  
<form method="post" id="insert_form">  

<label>Select Status</label>  
<select name="ostatus" id="ostatus" class="form-control">  
<option value="0">0</option>  
<option value="1">1</option>  
<option value="2">2</option>  
<option value="3">3</option>  
</select>  
<br />  

<input type="hidden" name="order_id" id="order_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-danger" data-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div> 
<!-- / PHP Ajax Update MySQL Data Through Bootstrap Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>     
<script>  
$(document).ready(function() {
$('#add').click(function() {
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function() {
var order_oid = $(this).attr("oid");
$.ajax({
url: "fetch.php",
method: "POST",
data: {
    order_oid: order_oid
},
dataType: "json",
success: function(data) {
$('#pname').val(data.pname);
$('#pweight').val(data.pweight);
$('#pqty').val(data.pqty);
$('#pprice').val(data.pprice);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
$('#insert_form').on("submit", function(event) {
event.preventDefault();
if ($('#pname').val() == "") {
alert("Order Name required");
} else if ($('#pweight').val() == '') {
alert("product weight");
} else if ($('#pqty').val() == '') {
alert("product quantity");
} else if ($('#pprice').val() == '') {
alert("product price");
} else {
$.ajax({
url: "insert.php",
method: "POST",
data: $('#insert_form').serialize(),
beforeSend: function() {
$('#insert').val("Inserting");
},
success: function(data) {
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#orders_table').html(data);
}
});
}
});
$(document).on('click', '.view_data', function() {
var order_id = $(this).attr("id");
if (order_id != '') {
$.ajax({
url: "select.php",
method: "POST",
data: {
order_id: order_id
},
success: function(data) {
$('#order_detail').html(data);
$('#dataModal').modal('show');
}
});
}
});
});
</script>
</body>
</html>

conn. php

<?php
$connect = mysqli_connect("localhost", "dummy", "123456", "www") or die ('I cannot connect to the database  because: ' . mysql_error())
?>

insert. php

<?php  
include 'conn.php'; // MySQL Connection
if(!empty($_POST))  
{  
$output = '';  
$message = '';  
$ostatus = mysqli_real_escape_string($connect, $_POST["ostatus"]);  

if($_POST["order_oid"] != '')  
{  
$query = "  
UPDATE orders
SET ostatus='$ostatus',   
WHERE oid='".$_POST["order_oid"]."'";  
$message = 'Data Updated';  
}  
else  
{  
$query = "  
INSERT INTO orders(ostatus)  
VALUES('$ostatus');  
";  
$message = 'Added Record Successfully';  
}  
if(mysqli_query($connect, $query))  
{  
$output .= '<label class="text-success">' . $message . '</label>';  
$select_query = "SELECT * FROM orders ORDER BY id DESC";  
$result = mysqli_query($connect, $select_query);  
$output .= '  
<table class="table table-bordered">  
<tr>  
<th width="70%">Customer Name</th>
<th width="70%">Customer Address</th>
<th width="70%">Customer Mobile</th>
<th width="70%">Payment Method</th>
<th width="70%">Order Status</th>
<th width="15%">Edit</th>  
<th width="15%">View</th>  
</tr>  
';  
while($row = mysqli_fetch_array($result))  
{  
$output .= '  
<tr>  
<td><?php echo $row["oname"]; ?></td>  
<td><?php echo $row["odeladd"]; ?></td>
<td><?php echo $row["omobile"]; ?></td>
<td><?php echo $row["opaymethod"]; ?></td>
<td><?php echo $row["ostatus"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="'.$row["oid"] .'" class="btn btn-info btn-xs edit_data" /></td>  
<td><input type="button" name="view" value="view" id="' . $row["id"] . '" class="btn btn-info btn-xs view_data" /></td>  
</tr>  
';  
}  
$output .= '</table>';  
}  
echo $output;  
}  
?>

выберите . php

<?php
if (isset($_POST["order_id"])) {
$output = '';
include 'conn.php'; // MySQL Connection
$query  = "SELECT * FROM ordersdata WHERE id = '" . $_POST["order_id"] . "'";
$result = mysqli_query($connect, $query);
$output .= '  
<div class="table-responsive">  
<table class="table table-striped">';
while ($row = mysqli_fetch_array($result)) {
$output .= '  
<tr>  
<td width="30%"><label>pname</label></td>  
<td width="70%">' . $row["pname"] . '</td>  
</tr>  
<tr>  
<td width="30%"><label>pweight</label></td>  
<td width="70%">' . $row["pweight"] . '</td>  
</tr>  
<tr>  
<td width="30%"><label>pqty</label></td>  
<td width="70%">' . $row["pqty"] . '</td>  
</tr>  
<tr>  
<td width="30%"><label>pprice</label></td>  
<td width="70%">' . $row["pprice"] . '</td>  

</tr>  
';
}
$output .= '  
</table>  
</div>  
';
echo $output;
}
?>

Есть две таблицы с именами orders и ordersdata, и обе имеют oid в качестве общего столбца. Оба находятся в одной базе данных под названием www. Когда я нажимаю кнопку «Изменить», ajax должно появиться всплывающее окно, но это не так. Теперь я беру oid из редактирования и id из вида. Страница вставки вызывается для edit_data, который я передал order_oid, и для view_data я передал order_id. Помощь бы высоко ценится Спасибо.

1 Ответ

0 голосов
/ 16 апреля 2020

Вам следует позвонить

$('#add_data_Modal').modal('show');

Как это,

$(document).on('click', '.edit_data', function() {
var order_oid = $(this).attr("id");
$('#add_data_Modal').modal('show');

И я думаю, .attr ("oid"); (var order_oid) передается как неопределенное, вы должны изменить его на .attr ("id");

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...