راکت
راکت
بازگشت به پرسش و پاسخ‌ها
حل شده

ویرایش سبد خرید با Ajax

19 پاسخ

سلام دوستان.
داخل سبد خرید وقتی میخوام تعداد هر محصول رو ویرایش کنم، اگه 10 تا محصول داخل سبد خرید باشه و من بیام تعداد محصول دوم رو ویرایش کنم، ویرایش نمیشه، در واقع فقط تعداد محصول اول ویرایش میشه و بقیه رو نمیتونم ویرایش کنم.
در واقع فقط آیدی محصول اول گرفته میشه.
کد Ajax:

$.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update() {
                var foods_id = $('#foods_id').val();
                var quantity = $('#quantity').val();
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foods_id, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        alert(foods_id);
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }

کد کنترلر:

public function edit(Request $request)
    {
        $foods_id = $request->input('foods_id');
        $quantity = $request->input('quantity');
        if (Cart::where('foods_id', $foods_id)->where('user_id', Auth::id())->exists()) {
            $cart = Cart::where('foods_id', $foods_id)->where('profile_id', Auth::id())->first();
            $cart->quantity = $quantity;
            $cart->update();
            return response()->json(['status' => 'محصول با موفقیت ویرایش شد']);
        }
    }
لاراولajax
Armin Rahmati
Armin Rahmati
@arminrahmati999
ثبت پرسش جدید

پاسخ‌ها

19
رضا جهانگیر
رضا جهانگیر
@rezajahangir

تخصص: Full-Stack Developer

بهترین پاسخ

سلام به شما دوست عزیز.
شما آیدی رو تو پارامتر تابع داری میگیری، حالا باید اینو بذاری کنار رشته ای که تو آیدی select داری، یعنی کدتو باید به صورت زیر بنویسی:

var quantity = $('#food_quantity_'+foodId).val();

موفق باشید.

1
ارسال پاسخ
سهیل رضایی
سهیل رضایی
@rezaesoheil
var foods_id = $('#foods_id').val();

اینجا فقط داری input اول رو میگیری به نظرم

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@rezaesoheil
آخه به این صورت نوشتم:

<input type="hidden" id="foods_id" value"{{ $cart->foods_id }}>

ولی فقط محصول اول رو میگیره.

0
ارسال پاسخ

گفتگوهای مرتبط

شاید پاسخ شما همین‌جا باشد

مقدار قیمت در سبد خرید

8 پاسخ

مشکل عدم نمایش انیمیشن هدر

2 پاسخ

جداول مورد نیاز اشتراک

2 پاسخ

اعمال نشدن تغییرات در vuejs

6 پاسخ
سهیل رضایی
سهیل رضایی
@rezaesoheil

@arminrahmati999
کد blade و event handler جاوا اسکریپت رو هم بزارید تا کامل بشه راهنمایی کرد و ببینم چه جوری داره عمل میکنه فرآیند آپدیت محصولات کارت

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@rezaesoheil

@php $total = 0; @endphp
                @foreach($carts as $cart)
                <form action="">
                <div class="row clearfix">
                    <div class="item-block-1">
                        <div class="image-wrapper">
                            <div class="image">
                                <a href="https://roocket.ir/{{ $cart->foods->path() }}"><img src="{{ $cart->foods->getImageUrl() }}" style="margin: -10px 0 0 0;" alt="" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="product">
                        <h4><a href="https://roocket.ir/{{ $cart->foods->path() }}">{{ $cart->foods->title }}</a></h4>
                    </div>
                    <input type="hidden" id="foods_id" value="{{ $cart->foods_id }}">
                    <div class="quantity">
                        <select id="quantity" onchange="update()">
                            <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                            <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                            <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                            <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                            <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                            <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                            <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                            <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                            <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                            <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                        </select>
                    </div>
                    <div class="price">
                        {{ $cart->foods->price * $cart->quantity }}
                    </div>
                    <div class="delete">
                        <button type="submit" name="action" value="delete"></button>
                    </div>
                </div>
                    @php $total += $cart->foods->price * $cart->quantity; @endphp
                @endforeach
                </form>
                <div class="row clearfix" style="float: left">
                    <div class="total">
                        <label style="font-size: 18px">
                            قیمت کل:
                        </label>
                        <p>{{ $total }}</p>
                    </div>
                </div>
0
ارسال پاسخ
سهیل رضایی
سهیل رضایی
@rezaesoheil

blade : 

<input type="hidden" id="foods_id_{{ $cart->foods_id }}" value="{{ $cart->foods_id }}">

            <div class="quantity">
                <select id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">
                    <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                    <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                    <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                    <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                    <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                    <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                    <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                    <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                    <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                    <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                </select>
            </div>

ajax : 


function update(foodId) {
    var foods_id = $('#foods_id').val();
    var quantity = $('#quantity').val();
    $.ajax({
        type: "POST",
        dataType: "json",
        data: {foods_id: foodId, quantity: quantity},
        url: "/edit",
        success: function (data) {
            alert(foods_id);
            const Msg = Swal.mixin({
                toast: true,
                position: 'top-end',
                icon: 'success',
                showConfirmButton: false,
                timer: 3000
            });
            Msg.fire({
                type: 'success',
                title: data.status,
            });
        },
    })
}

id رو از blade به فانکشنت پاس میدی و بعدش از اون آیدی استفاده میکنی توی eventhandler
و اینکه شما داری توی حلقه ای که میزنی دو تا آیدی رو تکرار میکنی که این کار درست نیست. اگر توی حلقه ها میخوایی آیدی بدی به المنت هات باید با استفاده از متغییر توی حلقت یه ایدی یونیک ایجاد کنی

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@rezaesoheil
تشکر از توضیحاتتون ولی متاسفانه الان با ارور زیر مواجه شدم.

POST http://localhost:8000/edit 500 (Internal Server Error)
0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@rezaesoheil
در واقع داخل تب Network مقدار foods_id درسته ولی مقدار quantity رو null برمیگردونه

0
ارسال پاسخ
میلاد خسروی
میلاد خسروی
@milwad

تخصص: برنامه نویس بامزه

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@milwad
تشکر از لینک هایی که فرستادین.
قبل از اینکه سوالمو مطرح کنم خیلی سرچ کردم ولی متاسفانه به نتیجه ای نرسیدم، این لینک هایی هم که فرستادین قبل چک کرده بودم.
آقای @rezaesoheil لطف کردن بهم گفتن که چیکار کنم ولی مقدار quantity رو متاسفانه null برمیگردونه.

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@rezaesoheil
@milwad
من به تگ select یه name دادم، به صورت زیر:

<select name="qty" id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">

بعد کد ajax قسمت var quantity رو به صورت زیر نوشتم:

var quantity = $('select[name="qty"]').val();

فرض کنید 2 تا محصول داخل سبد خرید هست، از محصول اول 3 عدد و از محصول دوم 5 عدد، حالا وقتی مثلا تعداد محصول اول رو به 7 تغییر میدم درسته و مشکلی نداره ولی وقتی مقدار محصول دوم رو تغییر میدم مقدار آپدیت شده محصول اول که الان 7 هست رو میذاره واسه محصول دوم، یعنی تعداد هر دو محصول الان شده 7، در واقع مقدار محصول اول رو برای بقیه قرار میده.
ممنون میشم راهنمایی کنید.

0
ارسال پاسخ
فرشید مرادی
فرشید مرادی
@eniack

تخصص: noob

سلام دوست عزیز ، ببینید ای دی یک اینپوت باید منحصر به فرد باشه ما یه اینپوت با یه ای دی میتونیم داشته باشیم ، پس شما وقتی داری value یه اینپوت رو میگیری باید ببینی کجا کلیک شده براساس کلاس و بعد دسترسی داشته باشی به value الکی کداتو تغییر نده همون دو‌خطی که اینپوت رو‌میگیری براساس کلاسش کن

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@eniack
چیزی که شما گفتین هم انجام دادم ولی نشد.

<input type="hidden" id="foods_id_{{ $cart->foods_id }}" value="{{ $cart->foods_id }}">
                    <div class="quantity">
                        <select class="qty" id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">
                            <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                            <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                            <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                            <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                            <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                            <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                            <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                            <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                            <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                            <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                        </select>
                    </div>
$.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update(foodId) {
                var quantity = $('.qty').val();
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foodId, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }
0
ارسال پاسخ
فرشید مرادی
فرشید مرادی
@eniack

تخصص: noob

نه عزیز اینطوری نیست ،
کد ajax شما چه زمانی اجرا میشه؟ وقتی روی کدوم المنت کلیک بشه اجرا میشه؟

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@eniack
سلکت باکس.

0
ارسال پاسخ
فرشید مرادی
فرشید مرادی
@eniack

تخصص: noob

به این صورت بنویسید

var quantity = $(this).val()

این ولیو گزینه انتخاب شده رو برمیگردونه

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@eniack
هیچ اتفاقی نمیوفته.
داخل console هم ارور زیر رو نمایش میده.

Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at init.val (jquery.min.js:2105:44)
    at update (carts:234:40)
    at HTMLSelectElement.onchange (carts:83:87)
0
ارسال پاسخ
فرشید مرادی
فرشید مرادی
@eniack

تخصص: noob

این کد رو

var quantity = $(this).val()

قبل از $.ajaxSetup({ بزارید و الرت بگیرید

0
ارسال پاسخ
Armin Rahmati
Armin Rahmati
@arminrahmati999

@eniack
الرتی نشون نداد

var quantity = $(this).val();
            alert(quantity);
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update(foodId) {
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foodId, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }

ولی ارور زیر رو داد:

 POST http://localhost:8000/edit 419 (unknown status)
0
ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام