#ajax #laravel #routes #submit #preventdefault
Вопрос:
У меня здесь есть таблица данных с формой внутри, в которой есть 3 кнопки отправки. Я сделал оператор switch, который проверяет, какая кнопка отправки была нажата, а затем выполняет операцию этой кнопки отправки в моей store() функции. В настоящее время я пытаюсь отправить форму с помощью ajax. Если я удалю switch оператор и просто верну одну операцию/функцию, например saveCredit() , то он сохранит данные в базе данных. Однако с switch помощью оператора на месте он не сохраняет никаких данных.
Кроме того, другой пример-если я удалю e.preventDefault() его , он сохранит данные в базе данных, но перенаправит на make-a-sale/save-purchase маршрут, которого не должно быть. Он должен перенаправить на ту же страницу. Как я могу заставить кнопки отправки сохранять данные в базе данных даже с switch инструкцией и e.preventDefault() на месте? Как сделать перенаправление на текущую страницу? Что я здесь делаю не так?
Пожалуйста, обратитесь к моему контроллеру:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModels{
CustomerBillingInfo,
Customer,
Product,
Purchases,
SetupBusiness
};
use AppTraitsPrintReceiptTrait;
use CarbonCarbon;
use Picqer;
use Auth;
class PurchasesController extends Controller
{
use PrintReceiptTrait;
public function index()
{
return view('make-a-sale.index', ['has_id' => false]);
}
public function indexWithId($product_id)
{
return view('make-a-sale.index', ['product_id' => $product_id, 'has_id' => true]);
}
public function create()
{
return view('make-a-sale.index');
}
public function computeAndConvertData(Request $request)
{
$qty_per_item = array_map('intval', $request->qty);
$zero = floatval('0.00');
$payment = floatval($request->payment);
$total = floatval($request->total);
$balance = $total - $payment;
$new_data = array(
'qty_per_item' => $qty_per_item,
'zero' => $zero,
'payment' => $payment,
'total' => $total,
'balance' => $balance
);
return $new_data;
}
public function saveCredit(Request $request)
{
$product_ids = array_map('intval', $request->product_id);
$cod = $this->computeAndConvertData($request);
$data = $this->createData($request, $product_ids, $cod['qty_per_item'], $cod['balance']);
$this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $cod['zero'], $cod['total']);
$this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);
return redirect()->route('make-a-sale.index');
}
public function savePurchaseAndPrint(Request $request)
{
$product_ids = array_map('intval', $request->product_id);
$cod = $this->computeAndConvertData($request);
$payment = $cod['payment'] == $cod['zero'] ? $cod['zero'] : $request->payment;
$balance = $cod['balance'] != $cod['zero'] ? $request->total : $cod['balance'];
$data = $this->createData($request, $product_ids, $cod['qty_per_item'], $balance);
$purchase = $this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $payment, $balance);
$this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);
return $this->printReceipt($purchase->code, $purchase->barcode, $purchase->product_id, $purchase->qty_per_item, $purchase->balance);
}
public function savePurchase(Request $request)
{
$product_ids = array_map('intval', $request->product_id);
$cod = $this->computeAndConvertData($request);
$data = $this->createData($request, $product_ids, $cod['qty_per_item'], $cod['balance']);
$this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $request->payment, $cod['balance']);
$this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);
return redirect()->route('make-a-sale.index');
}
public function store(Request $request)
{
switch($request->get('action_create')) {
case 'credit':
$this->saveCredit($request);
break;
case 'save_and_print':
$this->savePurchaseAndPrint($request);
break;
case 'save':
$this->savePurchase($request);
break;
default:
return redirect()->route('make-a-sale.index');
}
}
private function generateRandomNumbers($length = 12)
{
$num = '0123456789';
$num_length = strlen((string)$num);
$random_number = '';
for ($i = 0; $i < $length; $i ) {
$random_number .= $num[rand(0, $num_length - 1)];
}
return $random_number;
}
private function generateBarcode($code_to_convert)
{
$generator = new PicqerBarcodeBarcodeGeneratorHTML();
$barcode = $generator->getBarcode($code_to_convert, $generator::TYPE_CODE_128, 2, 35);
return $barcode;
}
public function createData(Request $request, $product_ids, $qty_per_item, $balance)
{
$code = $this->generateRandomNumbers();
$validation = $request->validate([
'code' => 'unique:purchases',
'product_id' => 'required',
'customer_id' => 'required'
]);
$data = array_merge($validation, [
'code' => $code,
'barcode' => $this->generateBarcode($code),
'status' => 'Regular',
'type' => $balance == floatval('0.00') ? 'Sale' : 'Accounts Receivables',
'cashier_id' => Auth::user()->id,
'customer_id' => $request->customer_id,
'product_id' => $product_ids,
'no_of_items' => $request->no_of_items,
'qty_per_item' => $qty_per_item,
'payment_type' => $balance <= 0 ? 'cash' : 'credit',
'total' => $request->total,
'created_at' => Carbon::now()->timestamp
]);
return $data;
}
public function createPurchaseData($data, $product_id, $qty_sold, $payment, $balance)
{
$purchases = Purchases::create(array_merge($data, [
'payment' => $payment,
'balance' => $balance,
'product_details' => $this->createProductsDetails($product_id, $qty_sold)
]));
return $purchases;
}
public function updateProductQtyOnHand($product_ids, $qty_per_item)
{
$products = array_combine($product_ids, $qty_per_item);
foreach ($products as $product_id => $receive_item_qty) {
$qty_on_hand = Product::where('id', '=', $product_id)->value('qty_on_hand');
$difference = $qty_on_hand - $receive_item_qty;
Product::select('qty_on_hand')->where('id', '=', $product_id)->update(['qty_on_hand' => $difference]);
}
}
}
Вот мой маршрут:
Route::post('make-a-sale/save-purchase', [PurchasesController::class, 'store'])->name('make-a-sale.store');
Вот некоторые из моих Аяксов:
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function() {
$.noConflict();
var tableId = '#tbl-make-a-sale';
// Footer button group actions
saveCredit(tableId);
savePurchase(tableId);
});
function saveCredit(tableId) {
$('#btn-credit').on('click', function(e) {
e.preventDefault();
if (!$("input[name='product_id[]']").val()) {
toastr.error('The table is empty. Please add some products first.');
} else {
let productIds = $("input[name='product_id[]']").map(function(){ return $(this).val(); }).get();
let qtyPerItem = $("input[name='qty[]']").map(function(){ return $(this).val(); }).get();
let params = {
product_id: productIds,
qty: qtyPerItem,
no_of_items: $("input[name='no_of_items']").val(),
customer_id: $("input[name='customer_id']").val(),
payment: parseFloat($('input[name="payment"]').val()),
total: parseFloat($('input[name="total"]').val()),
_token: $('meta[name="csrf-token"]').attr('content')
}
$.ajax({
url: 'make-a-sale/save-purchase',
type: 'POST',
data: params,
success: function(data) {
toastr.success("A new ledger has been created!");
$(tableId).DataTable().clear().draw(false);
$('#search-customers').val('0').trigger('change.select2').prop('disabled', true);
$('#cash-container, #txt-amount-due').hide();
},
error: function(xhr, status, error) {
let errors = xhr.responseJSON.errors;
for (var key in errors) {
if (errors.hasOwnProperty(key)) {
toastr.error(errors[key]);
}
}
}
});
}
});
}
function savePurchase(tableId) {
$('#btn-save').on('click', function(e) {
e.preventDefault();
if (!$("input[name='product_id[]']").val()) {
toastr.error('The table is empty. Please add some products first.');
} else {
let productIds = $("input[name='product_id[]']").map(function(){ return $(this).val(); }).get();
let qtyPerItem = $("input[name='qty[]']").map(function(){ return $(this).val(); }).get();
let params = {
product_id: productIds,
qty: qtyPerItem,
no_of_items: $("input[name='no_of_items']").val(),
customer_id: $("input[name='customer_id']").val(),
payment: parseFloat($('input[name="payment"]').val()),
total: parseFloat($('input[name="total"]').val()),
_token: $('meta[name="csrf-token"]').attr('content')
}
$.ajax({
url: 'make-a-sale/save-purchase',
type: 'POST',
data: params,
success: function(data) {
toastr.success("Products have been sold successfully!");
$(tableId).DataTable().clear().draw(false);
$('#search-customers').val('0').trigger('change.select2').prop('disabled', true);
$('#cash-container, #txt-amount-due').hide();
},
error: function(xhr, status, error) {
let errors = xhr.responseJSON.errors;
for (var key in errors) {
if (errors.hasOwnProperty(key)) {
toastr.error(errors[key]);
}
}
}
});
}
});
}
Вот мой HTML:
<form id="form-make-a-sale" action="{{ route('make-a-sale.store') }}" method="post" enctype="multipart/form-data">
@csrf
<table id="tbl-make-a-sale" class="w-full tbl-responsive overflow-x-auto rounded-lg border-none tbl-default">
<thead class="w-min">
<tr>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">Actions</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Barcode
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Name
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Description
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Qty. On Hand
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Qty. To Sell
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none hidden">
SRP
</th>
<th
class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
Ext. Price
</th>
</tr>
</thead>
<tbody class="bg-white"></tbody>
</table>
<div class="w-full pb-6 md:pb-0 border-t border-gray-200 md:border-none">
<div class="flex bg-white justify-between items-center">
<div class="pt-6 pb-0 px-6 whitespace-no-wrap">
<p class="text-2xl text-gray-700 font-bold">Total</p>
</div>
<div class="pt-6 pb-0 px-6 whitespace-no-wrap">
<p class="text-4xl text-gray-700 font-extrabold font-mono text-right">
<span id="total">₱ 0.00</span>
<input type="hidden" name="total" readonly/>
</p>
</div>
</div>
<div id="cash-container" style="display: none;">
<div class="flex justify-between items-center">
<div class="px-6 whitespace-no-wrap">
<p class="text-lg text-gray-700 font-bold">Cash</p>
</div>
<div class="px-6 whitespace-no-wrap">
<p class="text-lg text-gray-700 font-extrabold font-mono text-right">
<span id="cash">0.00</span>
</p>
</div>
</div>
</div>
</div>
<div class="mt-4 w-full md:border-t md:border-b md:border-gray-200">
<div id="amount-due-container" class="flex bg-persian-blue md:bg-white justify-between items-center">
<div class="p-6 whitespace-no-wrap">
<p id="lbl-amount-due" class="text-2xl text-gray-50 md:text-gray-700 font-bold">Amount Due</p>
</div>
<div class="p-6 whitespace-no-wrap">
<p id="txt-amount-due" class="text-3xl text-gray-50 md:text-gray-700 font-extrabold font-mono text-right">
<span id="amount_due"></span>
</p>
</div>
</div>
</div>
<div id="btn-footer-group-mas" class="m-6 justify-between">
<button type="button" class="px-8 py-4 text-md font-medium text-gray-50 transition-colors duration-300 transform bg-red-400 hover:bg-red-500 rounded hover:text-white focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas btn-clear" name="clear" value="clear" tabindex="2">Clear
</button>
<div id="btn-footer-right-group-mas">
<button type="button" id="btn-cash" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-green-400 hover:bg-green-300 focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas" data-hystmodal="#pay-in-cash-modal" tabindex="3">Cash
</button>
<button type="submit" id="btn-credit" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-yellow-400 hover:bg-yellow-300 focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas credited" name="action_create" value="credit" tabindex="4">Credit
</button>
<button type="submit" id="btn-save-and-print" class="px-8 py-4 text-md font-medium text-indigo-400 transition-colors duration-300 transform border-2 border-indigo-400 rounded bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring disabled:opacity-40 cursor-not-allowed cstm-size-m-mas cstm-size-w-full-mas" name="action_create" value="save_and_print_receipt" tabindex="5">Save and Print Receipt
</button>
<button type="submit" id="btn-save" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-indigo-600 rounded hover:bg-indigo-500 focus:outline-none focus:ring cstm-last-el-size-m-mas cstm-size-w-full-mas" name="action_create" value="save" tabindex="6">Save
</button>
</div>
</div>
</form>
Мы очень ценим любую помощь.
Комментарии:
1. эй, я не могу понять твой вопрос. но прежде всего проверьте, вызывает ли ajax вызов вашего метода контроллера или нет? просто верните любую строку с вашего контроллера, а затем в части функции успеха ajax выведите строку ответа в консоли или предупредите эту строку контроллера
2. amp; 2-я вещь, которую вам не нужно писать жестко закодированный URL-адрес в запросе ajax
Ответ №1:
На стороне контроллера вместо перенаправления на маршрут вы можете перенаправить JSON на интерфейс Ajax в интерфейсе. Например: Вместо:
return redirect()->route('make-a-sale.index');
Ты можешь:
return response()->json(["status"->true]);
Комментарии:
1. Спасибо, понял. Однако он все равно не сохранил данные в базе данных.
2. Используйте try{}catch(Exception $e){} и проверьте, не создает ли код каких-либо исключений.
3. Извините, но он не возвращает никаких ошибок.
4. Должно ли мое действие в форме быть таким? Это правильно?
<form id="form-make-a-sale" action="{{ route('make-a-sale.store') }}" method="post"></form>
Ответ №2:
ваш вопрос я не понимаю, но сначала проверьте, отправляете ли вы запрос на отправку Ajax в функцию вашего контроллера «нет»…
2-е, вам не нужно писать жестко закодированный URL-адрес в запросе ajax…
$.ajax({
type: "GET",
url: "{{ route('home') }}?page=" page,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
// data: { id: deal_id, }
}).done(function( data ) {
//on success do your operation
})
.fail(function(jqXHR, ajaxOptions, thrownError)
alert('No response from server');
});
Если вы хотите передать параметр в URL, например domainname.com/user/edit/{id}
затем вы можете перейти на ajax, как указано выше, по тому же URL-адресу, используя маршрут вы…
просто сделайте, как показано ниже
user_id = 3; //on click get user_id
url = "{{ route('admin.users.edit',':id') }}";
url = url.replace(':id', user_id);
затем эта переменная URL передается в ajax
$.ajax({
type: "POST",
url: url,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
// data: { id: deal_id, }
}).done(function( data ) {
//on success do your operation
})
.fail(function(jqXHR, ajaxOptions, thrownError)
alert('No response from server');
});
Ответ №3:
Извините @Суровый Патель, если я не могу хорошо объяснить свой вопрос.
Мне удалось решить эту проблему с помощью:
return response()->json([$data]);
И добавление перенаправления для каждого случая в моем заявлении о переключении:
return redirect()->route('make-a-sale.index');
Оператор переключения:
public function store(Request $request)
{
switch($request->get('action_create')) {
case 'credit':
$this->saveCredit($request);
return redirect()->route('make-a-sale.index');
break;
case 'save_and_print':
$this->savePurchaseAndPrint($request);
break;
case 'save':
$this->savePurchase($request);
return redirect()->route('make-a-sale.index');
break;
default:
return redirect()->route('make-a-sale.index');
}
}
Спасибо @Shree Sthapit